Introduction

If you like and are familiar with web application development and if you want to develop a kind of desktop application then no need to learn new languages for building desktop applications. You can build desktop applications using HTML, CSS, and JavaScript. How it is possible? Yes, we can build the desktop application using Electron.js. In this article, we are going to explore what is electron and how to create an electron application.

Electron

How does Electron work?

Main Process

Renderer Process

Why Electron?

The electron helps to overcome the above difficulties.

How to create Electron App?

In this article, we are going to create Electron application and rendering the https://www.c-sharpcorner.com/ website in it. You can also render your web application in the Electron App.

Step 1

Create a folder for Electron Application. I have created the "Sample Electron App" folder. Open the VS code and navigate to the "Sample Electron App" folder.

Step 2

Create "package.json" file and copy and paste the below content to it. It has a dependency package and scripts to run the electron application.

{
  "name": "sample-electron-app",
  "version": "1.0.0",
  "description": "Sample electron app",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder build"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^13.1.7",
    "electron-builder": "^22.11.7"
  }
}

Run the below command to install the dependency packages.

npm install

Step 3

Once packages are successfully installed, then create a new file called "main.js". It is the starting point or main process of the application. You can see the above package.json file, we have mentioned that "main" property value is "main.js".

Import the app (Electron.js application object) and BrowserWindow (for creating and loading web pages) from "electron" module.

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

Create initialize() method to initialize the application's settings like height, width of the electron app and URL go to render etc. It is an optional method. You can directly mention it while creating the main window.

let initialWidth, initialHeight, hostUrl = "";

function initialize() {
  initialWidth = 300;
  initialHeight = 600;
  hostUrl = "https://www.c-sharpcorner.com/";
}

Create the createMainWindow() function. This function uses the BrowserWindow object to create a new browser window that loads the https://www.c-sharpcorner.com/ website. I have disabled the developer tools by setting false to "devTools" property. If you want to debug the web application using developer tools, then make it true.

let mainWindow;

// Creating the main window
function createMainWindow() {
  mainWindow = new BrowserWindow({
    autoHideMenuBar: true,
    frame: true,
    resizable: true,
    width: Number(initialWidth),
    height: Number(initialHeight),
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      enableRemoteModule: false,
      devTools: false
    }
  });
  mainWindow.loadURL(hostUrl);
}

Once the app is booting up or ready, call the above initialize() and createMainWindow() methods.

app.on("ready", () => {
  initialize();
  createMainWindow();
});

On macOS, it's common to re-create a window in the app when the dock icon is clicked and there are no other windows open. To ensure that add the following code. This code is listening to the "activate" event. When the event is fired, it checks if there are any windows currently open that belong to the application. If not then, created the window and loaded the URL by calling createMainWindow() function.

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createMainWindow();
  }
});

Quit the application when all windows are closed. The application still remains active even after all windows have been closed in the same operating systems. This often occurs on non-MacOS platforms. To fix this issue, add the following below the existing code in main.js file. In this code, the app is listening for the "window-all-closed" event and which is fired when all windows created by the Main process have been closed. It is checking the platform is non-MacOS and if then, it explicitly quits the application.

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

The finalmain.js file looks like as below,

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

let mainWindow;
let initialWidth, initialHeight, hostUrl = "";

function initialize() {
  initialWidth = 1500;
  initialHeight = 800;
  hostUrl = "https://www.c-sharpcorner.com/";
}

// Creating the main window
function createMainWindow() {
  mainWindow = new BrowserWindow({
    autoHideMenuBar: true,
    frame: true,
    resizable: true,
    width: Number(initialWidth),
    height: Number(initialHeight),
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      enableRemoteModule: false,
      devTools: false
    }
  });
  mainWindow.loadURL(hostUrl);
}

app.on("ready", () => {
  initialize();
  createMainWindow();
});

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createMainWindow();
  }
});

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

Run the application using the below command.

npm run start

The electron app looks like as below.

Building Cross Platform Desktop Applications using Web Technology

Run the below command to build the electron application.

npm run build

Once the application is build successfully then, the exe and dependency DLL files are available in the dist -> win-unpacked folder.

The installer will be available in the "dist" folder. You can install the app on any machine using this installer file.

Disadvantages of Electron

Every technology has its own pros and cons. An Electron framework has some cons which are,

If you are not considering or overcome the above cons (like if you have high memory and RAM machines) for your requirements then you can go with Electron app.

Summary

If you want to build a cross-platform desktop application then, you have to try Electron. Especially if you are coming from JavaScript and you already have some code you may be able to re-use then go with Electron. I hope you have liked it and know about what is electron and how to create an electron application.