Getting started with electron

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#

Version	Remarks	Release Date
1.0.0		2016-05-09
1.0.1		2016-05-11
1.0.2		2016-05-13
1.1.0		2016-05-13
1.1.1		2016-05-20
1.1.2		2016-05-24
1.1.3		2016-05-25
1.2.0		2016-05-26
1.2.1		2016-06-01
1.2.2		2016-06-08
1.2.3	There are more between this and 1.4.7, but there were too many to list out	2016-06-16
1.4.7	Lastest version as of 19th Nov 2016	2016-11-19
1.6.11		2017-05-25
1.7.3	Lastest Version as of 19th Jun 2017	2017-06-19

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

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:

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