Getting Started with Electron Framework

Electron is a cross platform desktop application framework based on javascript. It allows web developers to create desktop application easily without jumping ships and learn other programming languages. Electron is open source and maintained by Github. Popular projects developed on electron framework are whatsapp, twitch, figma and visual studio. Electron is a barebone framework and thus it can support all major frontend development frameworks like angular, vue, react, ember and even vanilla javascript. In this tutorial, we will be using javascript.

Electron has two main processes – Main processs and rendering process. Main process communicates with the hardware, file systems and compiled module support. Whereas, Rendering process deals with the frontend and can be developed using HTML, CSS and javascript

Quick Start

To install electron use node packet manager. Open terminal and type

npm install - g electron

To get a minimal quick start electron project, use git to clone the quick-start repository from github. Go into the repository, install dependecies and run the project.

git clone https://github.com/electron/electron-quick-start

cd electron-quick-start

npm install && npm start

Electron project from scratch

Quick start is an easy way to start the project, but here we will start from scratch since we are starting to learn. It is always advisible to start from scratch while learning and using quick start ode for experienced developers. It is just my personal opinion and therefore you can either start from scratch or use quick start.

Create a directory (Folder) and open visual studio code in the directory. From the terminal in VS code, we will be performing actions on the project such as running the project and installing dependencies as we go through. In the terminal type,

npm init

This command is used to set up a new npm package inside the directory. It will prompt a few data, you can fill choose to fill or skip most of the fields except entry point. Give “main.js” as entry point instead of index.html as shown in figure.

Visual Studio code terminal for starting electron project
Check the entry point given

This will create package.json file after confirming the data enterered by the user. Type “yes” to confirm. Next step is to install electron and save the entry in package.json file.

npm install --save electron

To run an electron project we can use the command “electron start“. However we can use “npm start” to run the project. For that, we can add a line in package.json file under scripts. If you choose to not delete the “test” attribute in the scripts section, add a colon “,” after test as shown in the figure. Else, VS code will throw error and will highlight text in orange color.

"start": "electron ."
Add start script to package.json

Creating main.js file

After playing with package.json file, we need to create main javascript file which would be the entry point to the application. In this file, we will add core functionalities for the application. In this particular project, we are creating a simple application that will display “Hello World”.

As a first step, we need to load some necessary dependancy packages like electron, url and path. Url and path modules are used to navigate through the directories, fetch files and other operations that require accessing other files.

const electron = require('electron'); 
const url = require('url');
const path = require('path');

Secondly, we have to load parts from the electron package. Here we will be calling “app” and “BrowserWIndow” for our application. The app controls the lifecycle of the application whereas, BrowserWindow let you create and control windows.

This can be done in two ways. FIrst, you can call these two parts individually as shown below:

const app = electron.app
const BrowserWindow = electron.BrowserWindow

Or, we can use object destructuring method to call them in a single line of code. For simplicity of writing, I will be using this method dor my application.

const{app, BrowserWindow} = electron;

Now that we have loaded basic dependancies, we need to create a variable that can be used to control main window and add an event called “ready” to perform actions on the window. But first, let’s see how the code looks like.

let mainWindow;
app.on('ready', function(){  
  mainWindow = new BrowserWindow({});  
  mainWindow.loadURL(url.format({      
       pathname: path.join(__dirname,'index.html'), 
       protocol: 'file:',  
       slashes: true   
    }));
});

In the first line a variable named mainWindow is created and when ready event occurs, we call a function() that will execute when the app is ready. The function will load “index.html” file that we will be creating in next section. For that we will make the mainWindow as an object of BrowserWindow() class. Then on the mainWindow object, we will load index.html file. Electron app runs on chromium based browser and act as a webapp. The url format will be “file://directory_name/index.html“. The “__dirname” holds the name of current working directory.

Creating index.html file

This is a simple boiler template file that we load. We have included a heading and a paragraph to display on the screen.

index.html file for electron app
index.html file

Run the application

To run the application, in the terminal window in VS code, run the command given below.

npm start

You can also use electron start instead of npm start. It is a personal choice. If you have encountered no errors, the app will be displayed on screen. To close the electron app, use close button on top right corner or use File -> exit from the menu bar.

In later sections, we will be adding more functionalities to the application and customising menus. Links for the tutorials will be added below. Thank you for reading. Comment below if you are facing any errors or any other suggestions and feedback.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.