Build desktop apps using Electron: The Beginner’s Guide

Electron is a framework for building cross platform desktop applications using Node.js and Chromium. Electron uses web pages as its GUI, so you could also see it as a minimal Chromium browser, controlled by JavaScript.

Installing Electron

Before installing electron, make sure that you have installed nodejs on your computer. If you have not installed already, get the installer from here. Note that this installs npm as well for you. Once the installation is complete, you can confirm that node and npm are installed by running the following commands in your terminal.

Screen Shot 2017-06-18 at 20.29.09

Install electron globally by running the following command in the terminal.

npm install -g electron

Tip: If the installation stops on “node install.js” when you try the above command, it means that it is still downloading electron package. If you wish to see the download progress, type the following command to install electron.

npm install electron –verbose

You can confirm that electron is installed by running the following command.

electron -v

Main and Renderer Processes

The main process creates web pages by creating BrowserWindow instances. As the name suggests, the BrowserWindow class gives you the ability to create a browser window.

Each BrowserWindow instance runs the web page in its own renderer process. When a BrowserWindow instance is destroyed, the corresponding renderer process is also terminated.

The main process manages all the renderer processes.  Each renderer process is isolated and only cares about the web page running in it.

File Structure

The electron app mainly requires three files: package.json, main.js, and index.html. The folder structure would be as follows:

electron-app/

  • index.html
  • main.js
  • package.json

Creating first electron app

Create a project folder and let’s create a package.json file. Navigate to the project folder in terminal and type the following command.

npm init

You will be asked for the following information. Enter main.js in the “entry point” and your name in the “author name” fields. Other fields can be skipped by pressing return.

Screen Shot 2017-06-15 at 11.35.58

Now, create main.js and index.html files in your project folder. Add the following code in main.js file.

const {app, BrowserWindow} = require("electron");

const url = require("url");

const path = require("path");

let win;

app.on("ready", function(){

win = new BrowserWindow({width: 400, height: 400});

win.loadURL(url.format({

pathname: path.join("Path to your project folder directory", "index.html"),

protocol: "file:",

slashes: true

}));

});

Add some header and text in your index.html file.

Running your app

Make sure to navigate till your project directory in terminal. Type the following command.

electron .

We can also run the app by adding following script in package.json file.

"scripts": {

"start": "electron ."

}

Then run the following command in terminal.

npm start

The app should look something like this:

 Screen Shot 2017-06-18 at 21.22.23

Wrapping Up

Electron offers a way to create desktop applications with the web technologies that we already know without the need to learn new languages that are specific to operating systems. It also includes automatic app updates, Windows installers, other useful native app features that are exposed through JavaScript APIs.

Read the official Electron documentation for more information and also ways to distribute your application.

4 thoughts on “Build desktop apps using Electron: The Beginner’s Guide

Comments are closed.