Getting started with electron

Download electron eBook

Remarks

What is Electron?

Electron is an open-source framework, which is used to create desktop applications using HTML, CSS and JavaScript. In the inside, it works thanks to Chromium and Node.js.

Its original creator, GitHub, works with a wide community of developers to maintain the project, which can be found here.

One of the main perks of using Electron is that, since it's based in web technologies, it's cross platform, allowing to deploy applications for Linux, MacOS and Windows, with the same code.

It also features native elements such as menus and notifications, as well as useful developing tools for debugging and crash reporting.

Apps built on Electron

Some examples of applications that use this framework, are:

... and many others.

Versions

VersionRemarksRelease Date
1.0.02016-05-09
1.0.12016-05-11
1.0.22016-05-13
1.1.02016-05-13
1.1.12016-05-20
1.1.22016-05-24
1.1.32016-05-25
1.2.02016-05-26
1.2.12016-06-01
1.2.22016-06-08
1.2.3There are more between this and
1.4.7, but there were too many
to list out
2016-06-16
1.4.7Lastest version as of 19th Nov 20162016-11-19
1.6.112017-05-25
1.7.3Lastest Version as of 19th Jun 20172017-06-19

Hello World!

Setup

An Electron project structure usually looks like this:

hello-world-app/
├── package.json
├── index.js
└── index.html
 

Now let's create the files and initialize our package.json .

$ mkdir hello-world-app && cd hello-world-app
$ touch index.js
$ touch index.html
$ npm init
 

Note: If the main parameter is not specified in package.json , Electron will use index.js as the default entry point.

The Main Process

In Electron, the process that runs package.json ’s main script is called the main process. Here we can display a GUI by creating BrowserWindow instances.

Add the following to index.js :

const { app, BrowserWindow } = require('electron')

// Global reference to the window object
let win

// This method will be called when Electron has finished
// initialization and is ready to create browser windows
app.on('ready', function(){
    // Create the window
    win = new BrowserWindow({width: 800, height: 600})

    // Open and load index.html to the window
    win.loadURL('file://' + __dirname + '/index.html')

    // Emitted when the window is closed.
    win.on('closed', () => {
        // Dereference the window object
        win = null
    });
})

// Quit the app if all windows are closed
app.on('window-all-closed', () => {
    app.quit()
})
 

HTML Template & Renderer Process

Next we create the GUI for the app. Electron uses web pages as its GUI, each running in their own process called the renderer process.

Add the following code to index.html :

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>
 

Running the App

There are multiple ways to run an Electron App.

With electron-prebuilt installed Globally

First, make sure you have electron-prebuilt installed.

Now we can test the app using this command:

$ electron .
 

Method 2 - Without electron-prebuilt installed Globally

First, we'll have to enter your app's folder (the folder where package.json is).

There, open up a Terminal/Command Prompt window and type npm install to install the necessary into that app's folder.

Afterwards, key in npm start to run the app. Keep in mind that your package.json still has to specify a 'start' script.

If everything worked correctly, you should see something like this:

enter image description here

Congratulations! You've successfully created your first Electron app.

Installation of Electron

Dependencies

To install electron you must first install Node.js, which comes with npm.

How to install it?

Use npm:

# Install the `electron` command globally in your $PATH
npm install electron -g

# OR

# Install as a development dependency
npm install electron --save-dev
 

Stats

231 Contributors: 11
Monday, June 26, 2017
Licensed under: CC-BY-SA

Not affiliated with Stack Overflow
Rip Tutorial: info@zzzprojects.com

Download eBook