The Step-By-Step guide

Building An Application With Electron.js — Part 1

A detailed guide on building your very first application using node.js and electron.js

What is Electron.js?

If you are thinking to build a cross-platform application i.e for Mac, Windows or Linux app, then Electron.js is what you require. To be precise, Electron JS is a runtime framework that allows the user to create desktop-suite applications with HTML5, CSS, and JavaScript.

Working Process of Electron.js

After having a basic idea of what exactly is Electron.js let’s have a look at it’s working procedure. It has two main processes, the main process and the renderer process.

The main process helps to bootstrap the application and is also responsible for interacting with native GUI related APIs. On the other hand, the renderer process is generated by the main process using a module called BrowserWindow. This renderer process helps in the display of the UI of your application. An electron app can have multiple renderer processes but there can not be more than one main process. For each BrowserWindow instance, there exists a renderer process. The main process is responsible for managing all web pages and their corresponding renderer processes.

The main process is invoked by running package.json’s main script file.

Hello Electron!

Let’s get started to develop a desktop application using Electron.js and Node.js

Setup for the application

The first step is to create a new folder in your file system and then subsequently creating the necessary files like package.json, main.js and index.html.

1. The package.json file is created using the command given below:

npm init

The JSON file created will be having a list of details of the application and dependencies and also a key called main which will mark the entry for the application (usually main.js file).

In the package.json file, a script shown below has to be added

2. Now, we have to install the dependencies i.e Electron.js. To install electron.js use the command given below:

npm install electron

3. Now to integrate it with node js we will be using the socket.engine module and to install this dependency the command used is:

npm install socket.engine

So, the final package.json will look like:

4. Now, create other files like index.html, main.js, host.js (for socket code), main.css (if required). Now it’s time to actually code and develop our very first desktop application.

Creating the main.js file

Add the following script to the main.js file

When the app gets the ready event it creates a window with specific configurations mentioned by the user like width, height, frame that is the top bar which can take a boolean value and webPreferences.

Note: Due to the Node.js integrations there are certain libraries like jQuery, AngularJS which causes problem as they also insert the same symbols like module, exports, require which are used in Node.js as well. So, in order to overcome this we can turn off the nodeIntegration in webPreferences. And to keep the abilities of Node.js and Electron API we insert the following script in index. html

Renaming the symbols in the page before including other libraries

Creating the index.html file:

Following is the sample code that can be used for creating the HTML file

This is the page that will be rendered by the app’s renderer process.

After creating all the necessary files we can try our app by executing the command given below

npm start

When this command gets executed successfully, the app window pops up and displays “Hello Electron :)”

This is a simple application and in the next part of this electron.js fundamental series, we will see how to integrate socket.engine with electron.js and also what are the various ways of accessing the DOM elements.

If you have gotten this far into the blog give yourself a pat on the back because guess what? You’re awesome. The whole working repository is available on GitHub.

Hit me up on LinkedIn for any collaborations on the topic or edits of this article.