March 25, 2022
Basics of Electron.js
DURATION
11mincategories
Tags
share
If you are planning to develop a desktop app and have experience working as a web developer then using electron.js is the most obvious choice. Unlike the native options, it allows you to develop cross-platform desktop apps for Linux, Windows, and macOS using HTML, JavaScript, and CSS.
Following are a few popular apps built with electronjs.
How are desktop applications run by electronjs?
Every electronjs app’s entry point is the main.js file (it might have a different name depending on the package.json file). This is known as the main process, it runs in a nodejs environment, and can be assumed to function similar to a “backend” in the case of a web application. In this file, we specify what HTML file to load, and this file gets opened in a chromium browser window known as a renderer process. This is what allows electronjs to create desktop apps using web technologies, it creates a browser instance and runs the app in there. It is also an issue sometimes because chromium is a resource-heavy browser.
Getting Started:
In this tutorial, we will begin by setting up our environment for electronjs and build a simple application that displays the version number of npm, Chrome, and Electron on your machine. While doing so, we will go through the details of how Electron works and its two processes.
Make sure that you have the node installed, if not then you can do that from here.
Now in the empty folder of your project run npm init -y to set up and initialize a npm project. This will create a package.json file.
Now, install electronjs and nodemon. Nodemon will make our work easier by restarting the app every time we save new changes.
1 2npm install--save - dev electron npm i--save - dev nodemon
Refer to this official guide, if you face any installation issues.
Add these scripts in the package.json file.
1 2 3 4"scripts": { "start": "electron .", "watch": "nodemon --exec electron ." },
In your package.json file set the entry point or the main value to “main.js”. Now create a new file named main.js.
Create an index.html file and paste the following code.
1 2 3 4 5 6 7 8 9 10 11 12<!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> We are using Node.js <span id="node-version"></span>, Chromium <span id="chrome-version"></span>, and Electron <span id="electron-version"></span>. </body> </html>
This is our HTML file and this is what will be loaded in the window. Note that we have left the version number of Node, Chrome, and Electron blank for now.
Now, we will work on the main.js file. To load the HTML file into the application we will need two modules.
App module to manage the app’s event lifecycle
BrowserWindow to manage windows
Add the following line in the main.js file
const { app, BrowserWindow } = ("electron");
Now, add a function that loads the HTML file in the window.
1
2
3
4
5
6
7
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
});
win.loadFile("index.html");
};
We have created a new browser window with dimensions of 800*600. Load the index.html file into it.
Now, let’s call this function.
1
2
3
4
app.whenReady()
.then(() => {
createWindow();
});
We can only create a browser window when the app module’s ready event gets fired. We can check for that using the app.whenReady().
Now run npm run watch in the terminal.
Your app should launch like this.
Now, all we need to do is add the version numbers in our app. It’s a trivial and easy thing to do in Nodejs, but we can’t modify the DOM from the main.js file. This is where a preloaded script comes into play. It will have access to both the window object (or DOM) and Nodejs functionality.
Create a file called preloader.js and write this code.
1
2
3
4
5
6
7
8
9
10
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`{dependency}-version`, process.versions[dependency])
}
})
We have created a function named replaceText() that replaces the inner text of any element, and we are calling the function for Chrome, Node, and Electron. This is working fine in a loop because I specifically named the ids in such a manner. We are accessing the version numbers using the process object, which is standard in Nodejs.
Modify the main.js like this.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const {
app,
BrowserWindow
} = require("electron");
const path = require('path')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, "preload.js"),
},
});
win.loadFile("index.html");
};
app.whenReady()
.then(() => {
createWindow();
});
This will preload the script we just wrote. Now see your app.
You will also be able to see the versions.
Finally, let’s add the code to quit the app. At the end of main.js write this.
1 2 3app.on("window-all-closed", () => { app.quit(); });
Now, when you close the renderer window, the process will quit as well.