Electron JS

Electron is a popular and open-source JavaScript framework designed as a project by Cheng Zhao and is developed and maintained by GitHub. Electron is primarily used to develop desktop GUI applications that include various web technologies. It can also be called a runtime framework that allows you to create desktop-suite applications along with HTML, CSS, and JavaScript. It also combines the rendering feature of Chromium Engine with the Node.js runtime environment.

In this tutorial, you would be covering the basics of Electron JS and will be guided through the process of creating a sample application. By the end of the tutorial, you will be able to recognize different types of terminologies associate with Electron JS and its application through examples. You would also be recognized and adapt to the Electron versions. Let's get started.

Why Electron JS?

Before proceeding to build something on Electron JS, it is important to understand more about why it is used instead of other frameworks. Considering that you are building a backend application using the Java route for continuous integration and cross-platform feature, you need to have all the dependencies installed in your system. Also, there might arise a case where you need a package to be imported without having to disturb the present work environment which is quite difficult. These problems are mere factors if you are developing any application using Electron JS.

With Electron JS, you can cover these problems using a single code-base. Electron JS can generate various installers depending on all the platforms you need to develop the application. Thus, a single code base can serve to install all the necessary dependencies using it. Another advantage of Electron JS is that you can build a website, build a desktop application. It adds up to building all the native desktop apps for the web where the team of web developers can be easily translated into developers who can build desktop software.

Structure of an Electorn JS App

If it is talked about the structure of designing and developing an application powered by Electron JS, three major components are taken into consideration as discussed below.

Chromium: Chromium is an Electron JS structural component that is mainly responsible for the creation and visualization of web pages. The content on the web is displayed using Renderer Process and the presence of Chromium environment lets you gain control of all the contents and development tools that is quite similar to operate like that of Chrome Browser.

Node.js: The influence of Node.js in the structure of an application involving Electron is to provide the system access capabilities. With Node.js, Electron JS can run its major processes so that access is easily offered. Node.js also makes it interactive by serving the data in the form of a file system and thereby letting you have control of the operating system as well.

Custom API: The use of Custom API in the Electron JS application is to enable developers to create similar desktop experiences so that user experience doesn't get overlaid. Custom API serves native desktop application functionalities so that one user cannot easily prompt to get affected by the libraries. Another instance that Custom API serves is by enabling the developers to create and show the context menu, display it and carve it into desktop notifications which would let them use the features with efficient keyboard shortcuts.

Renderer and Main process

To begin with, understanding the running mechanism of an Electron JS application, you are bound to know the two processes namely Main and the Renderer.

Main Process

To run any Electron JS application, the Main process is considered an entry point. It is just a simple Node.js environment where all the native interactions and functionalities are taken into consideration. Collectively, the Main process is responsible for creating web pages. It does so by creating a new instance in the BrowserWindow object of the Electron. This action further creates a new web page that runs under the influence of the Renderer process. The Main process can be used to create more than one web page where each page can run its Renderer process.

Installation

To use Electron JS, you will need Node.js. It is recommended to install the latest version of Node.js since previous versions might encounter compatibility issues. Thus, it is important to check the Node.js version and that can be done by using the below command.

node -v 
   
  OR 

npm -v

This command should print the versions of Node.js and npm accordingly.

Note: Electron JS embeds the Node.js version into binary. It istherefore recommended downloading the same version as Node.js

Framing Electron JS Application

Assuming that you went through the above concepts at ease, it is now the right time to get started in building our application using Electron JS. We would be creating a simple application just to showcase how things are framed.

To get started, first of all, run the below-given command from the preferred directory to create a folder for the project and then change it to the new folder later.

mkdir my-electron-app
cd my-electron-app

One logical thing here is to understand that an Electron JS, at the core, is a Node.js application that is running web pages. Therefore, the application you are learning to build needs to be initialized with package.json by running the below-given command.

Next, try to create front page of your application by using the below sample code snippet.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
    <title>My Electron App</title>
</head>

<body>
    <h1>Welcome to My Electron App</h1>
</body>

</html>

The above HTML code will simply create a webpage with the given title "My Electron App". It is kept in h1 tag with the text in the body as "Welcome to My Electron App". You now have a basic outlook of the Node.js application.

The next step is to convert the built application into a desktop application using Electron JS. It can be done by installing the Electron JS library. Moving to the command prompt, you will need to shift to the project's root directory and run the following command:

Once the above command is completely executed, installation is marked complete. You then need to create a file main.js. This is an entry point like you discovered previously and it will form the gateway of the application. Then, add the sample script given below.

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

const loadMainWindow = () => {
    const mainWindow = new BrowserWindow({
        width : 1200,
        height: 800,
        webPreferences: {
            nodeIntegration: true
        }
    });

    mainWindow.loadFile(path.join(__dirname, "index.html"));
} 

The code snippet given above, the Electron JS application is made to use BrowserWindow which is a module for creating and loading web pages. This module is imported directly from the Electron JS package and the paths are seamlessly imported to ensure the correct project work directory. Once these imports are done, you need to create the loadMainWindow() function as shown in the code snippet below.

This function makes use of the BrowserWindow to create a new window of 1200 px and 800 px respectively. Later, the application is run which loads the index.html file from the root directory. Next, you need to add the loadMainWindow() function beneath the existing code. When this function is called, it will invoke the app to boot up.

The next task is to be specific about the operating system where the application should stay active even if all windows are closed. Also, if any error occurs, you might need to fix it. To fix these problems with the operating system you just need to add the below code snippet.

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

The above code snippet listens to the events occurring in the app. When the even shoots up, the code checks for any particular window open currently that is related to the application. If not, the code loads the home screen by calling the function loadMainWindow().

Application Configuration

After going through all the steps shown above, you will need to make some specific changes to the package.json file. It is done to ensure the configuration of Electron JS working properly.

Next, to proceed with a further configuration, you need to open the package.json file and change the value of the main key in the main.js file. The code is given below.

Next, you need to add a start script to the existing script as follows:

"scripts": {
    "start" : "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
 }

Now, save the file and close it. Try running the Electron JS application using the following command.

This command would load the Electron App and it would be looking something like this.

You can further add custom components to create a broad desktop-friendly application by adding CSS components to your index.html file

Summary

Electron JS is a phenomenal game-changer in the arena of developing desktop applications. The tremendous power it delivers to web developers and application programmers is quite fascinating. The ease of developing applications using Electron JS is because of the component important feature which eliminates the need of installing heavy dependencies and configuring them into your application. In this tutorial, you learned what exactly is Electron JS, what are its use cases and you also got to know the structure and inner working mechanism behind an Electron JS project. In the later section, you built a native desktop application that can be further modified ensuring all the functions and dependencies are intact.

Next TopicHactoberfest

← prev next →