Electron – Getting Started

Electron is a beautiful opensource framework, developed by GitHub. This was originally named Atom Shell, as it was developed to develop the atom editor by github. It’s based on node.js and chromium browser.

In this tutorial, we will cover how to get started with electron framework to create a hello world desktop app.

Steps for hello world electron app

I develop using MacOS Sierra on my macbook pro, and thus these steps are more focused and clear towards Mac operating systems. However the steps are straight forward. Also, I will update this article asap on a windows based computer and also on linux, so that steps and screenshots and accurate for clarity.

Main steps that we will follow in this tutorial include:

1. Update your system
2. Install Node.js
3. Initialize nodejs project (npm init)
4. Install Electron
5. Create Hello World desktop application using electron
6. Package the hello world app for distribution

Lets dive in!

1. Update your system

First things first! Update your system to the latest operating system release. Btw, it’s always a best practice to keep your system updated for latest security and feature released.

2. Install Node.js

Electron is based on Nodejs. So we need to install it on our computer before proceeding.

How to install Node.js on MacOS

To install node.js on macbook or any device running mac os, follow these steps:

1. Goto Nodejs.org and download the package for MacOS
2. Install the package normally with default options
3. Done

Installing node.js is very simple.

How to check if node.js is installed and running

You can do this by simply checking the version of node.js using terminal.

1. Open terminal
2. Type: node -v

This will show you the current nodejs version on your system like: v7.7.0

3. Initialize NodeJs project (npm init)

We need to run the command npm init in our project folder. Follow these steps:

1. Open terminal
2. Browse to your project directory (create if not exisiting)
3. When in the folder, type: npm init
4. Complete the process with default values, we can change them later easily

4. Install Electron

Installing Electron is very easy and simple too.

Note that Electron has to be downloaded or copied to the project folder that we are working on, as it’s a framework, not a service that runs on your system like nodejs.

Follow these steps to get this done.

1. Open terminal
2. Browse to your project folder (the same folder that we run npm init in, if you’re already in it, skip this step)
3. When in folder, type: npm install electron (do NOT type electron-prebuilt like advised in other old tutorials, it will install old version, as it’s abondoned in 2016 and we’re in 2017 now)
4. Wait for the proecess to complete

Please note, the process may stop for a minute or two while downloading the files on > node install.js, without any indication of what it’s doing. So don’t panic and don’t quit the process. Let it complete.

5. Create Hello World desktop application using Electron framework

Now it’s time to create our hello world desktop application. I’m using Atom editor by github on macbook pro running macos seirra. You can choose your environment and things will work fine.

Follow these steps.

Open your project folder

Edit package.json file

Your package.json file should look something like this:

{
 "name": "hello world",
 "version": "1.0.0",
 "description": "",
 "main": "main.js",
 "scripts": {
 "start": "electron ."
 },
 "author": "",
 "license": "ISC"
}

Don’t worry if it doesn’t. You can simply copy it to replace yours. Or else at least make “start” part of “scripts” look like this one. You can add this part if it’s not there already.

Note: You will find various values for main and start parameter in various tutoriols, however keep it this way unless you know what you’re doing and why you need it to be changed.

This here tells the compiler that our main or first file is main.js and also tells npm start that when it starts, run the main file.

Edit main.js file

Your main.js file should include this code:

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

app.on('ready',() => {
 let win = new BrowserWindow({width:800, height: 600})
 win.loadURL(`file://${__dirname}/index.html`)
 win.webContents.openDevTools(); // this line opens dev tools, remove it in production
})

Note the last line win.webContents.openDevTools(); this is there to open developer tools right inside your app, so that you can play with it easily. However remove this line or comment it out on your package file so that it don’t open on final production desktop app.

Note that we added win.loadURL(`file://${__dirname}/index.html`), this loads index.html file in our main app window. So we will create this file now.

Create Index.html file

We need to create a simple index.html file, like you would always do for your websites. Add this example code to index.html:

<html>
<head>
</head>
<body>
 <div>Hello World</div>
</body>
</html>

Run The electron desktop app

We can run the electron desktop app that we just created by following these steps:

1. Open terminal
2. Go to the app folder (don’t change anything if your terminal is open from previous steps on this tutorial, you’re already in that folder)
3. run this command: npm start
   • You can also run the app by running electron . command, like this:
     • On MacOS: ./node_modules/.bin/electron .
     • On Windows: .\node_modules\.bin\electron .

This will launch the app on your computer screen, which looks something like this:

6. Package Electron desktop application

Before packaging the electron desktop application, we need to install electron-packager. You can skip this part if you already have electron-packager installed.

Install Electron Packager on MacOS

Install electron packager on macos by following these steps:

1. open terminal
2. type: sudo npm i electron-packager –save-dev

And we’re done.

Compile and package electron desktop app for distribution

To compile the app, simply follow these steps:

1. Open terminal
2. Goto your app directory, if you’re following this tutorial then you’re already in that directory, so skip this step
3. Type: electron-packager . (including the last dot) and press enter

This will package the compiled app for your operating system and you can simply copy it from your project folder and distribute.

Note that if you have packaged once, made some change and now want to repackage it, it may give an error. Simply use the modified command electron-packager . –overwrite in that case and it will overrite the previous build.

Let me know if you have any queries related to this tutorial or other beginner related queries for electron framework.

You might also like

• Error 1618 while installing Skype (1)
• What happens to value of the current as the value of resistors is changed? (1)
• How to uninstall Yahoo toolbar? (1)