An Introduction to Building Desktop Applications with Electron

An Introduction to Building Desktop Applications with Electron

In this basic introduction to Electron.js, learn how web developers can build desktop apps with their existing skillsets. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS.

Slack - (almost) the defacto team collaboration software, Visual Studio Code - one of the most popular code editors on the market at the time of writing, and the desktop version of WhatsApp all have one thing in common: they were all built with Electron.js. With these powerful companies adopting Electron.js over native desktop software development methods, Electron.js has established itself as a trustworthy framework for developing desktop applications.

In this tutorial, you will learn what Electron.js is all about and how you can use it to power your next amazing idea.

At the end of this tutorial, you will have developed a desktop application that:

  • Is built from the ground up with web technologies
  • Communicates between the Main and the Renderer processes
  • Makes use of Electron.js APIs to access features that are not available in the browser API
  • Displays desktop notifications

Project Requirements

Get to Know Electron.js

Simply put, Electron.js is an open-source framework that enables developers to build desktop applications with web technologies like HTML, CSS, and JavaScript. With this, building desktop applications is no longer an exclusive capability of developers who write C++, C#, or Java as web developers can now transfer their skills to rolling out industry-standard desktop software.

Using a combination of Chromium (the open-source version of the Google Chrome browser) and the Node.js JavaScript runtime, web developers can wrap their existing web applications with Electron.js to produce desktop applications and generate installers for Windows, macOS, and Linux platforms.

Electron.js is maintained by Github, making it a dependable project that’s backed by a formidable team of engineers.

Why Use Electron.js

Before Electron.js, if an application needed to be installed on two or more different desktop operating systems (e.g. Windows and Mac), you would need to develop the application separately for both platforms using platform-compatible languages i.e C# or Visual Basic for Windows and Objective-C for Mac. If the developer decided to go the Java route (developing cross-platform desktop software using Java), the user of such an application would need to install a Java-runtime on both platforms to run the application.

However, with a single code-base, Electron.js can generate installers for all platforms without any installation dependency. Thus, a single development team can develop an application for targeted platforms. Another major advantage is that if you can build a website, you can build a desktop app with Electron.js, thus, existing web developers/web development teams can easily translate into developers of desktop software.

Prerequisites for Building an Electron.js Application

These are the things you’ll need to begin building apps with Electron.js:

  • Basic knowledge of HTML, CSS, and JavaScript
  • Node.js installed on your system
  • Basic knowledge of Node.js

Structure of an Electron.js App

How an Electron.js App is Structured

Structure of an Electron.js Application

Structurally, Electron.js is made of three major parts:

  • Chromium: This is the component in the Electron.js structure that is responsible for creating and displaying web pages. Web content is displayed in Electron.js’s Renderer process (more on this later) and due to the Chromium environment, you have access to all browser APIs and development tools just like operating in a typical Google Chrome browser.
  • Node.js: This is the component in the Electron.js structure that gives you access to system capabilities. Electron.js runs Node.js in its Main process (more on this later) giving you access to all that Node.js offers like interacting with the filesystem, operating system, etc. and more…
  • Custom APIs: To enable developers to create common desktop experiences and work easily with native functionalities, Electron.js has an API of easy to use libraries that help you perform tasks like creating and showing a context menu, displaying desktop notifications, working with keyboard shortcuts, etc.

The Main and Renderer Processes

A running Electron.js app maintains two types of processes, the Main process, and one or more Renderer processes.

The entry point of an Electron.js application is the Main process, which is simply a Node.js environment. This is where all the interaction with native functionality occurs.

The Main process is responsible for creating web pages. It does this by creating a new instance of the Electron.js BrowserWindow object. This creates a new web page that runs in its own Renderer process. The Main process can create more than one web page each running in its own Renderer process.

Typically, Electron.js applications boot up with a default web page which is the app’s startup screen. You can then create more screens if your application requires it.

Each Renderer process manages its own web page and is completely isolated from other Renderer processes and the Main process itself. Thus, if one Renderer process terminates, it does not affect another Renderer process. A Renderer process can also be terminated from the Main process by destroying its BrowserWindow instance.

Out of the box, the Renderer process only has access to browser APIs like the window and document objects, etc. This is because the Renderer process is simply a running Chromium browser instance. It can, however, be configured to have access to Node.js APIs such as process and require.

Relationship between the Main process and Renderer process(es)

Communication Between the Main and Renderer Processes

Oftentimes, you’ll want to use native functionality in your Electron.js application in response to events, like a user clicking a button. However, because the Renderer process and Main process are completely isolated from each other, native functionality cannot be accessed directly from the web page.

To make this possible, Electron.js provides an IPC (Inter-Process Communication) channel that allows the Renderer process to communicate with the Main process and vice-versa.

Using the ipcMain and ipcRenderer modules for the Main process and Renderer process respectively, you can emit events from one process and listen for events in the other process. You can also pass data from one process to another. In the exercise done later in this tutorial, you will use these modules to communicate between the Renderer and the Main processes.

Build a Simple Electron.js Project

Now it’s time to do some coding and get some hands-on Electron.js experience! In this tutorial you will be creating a simple desktop application that adds items to a task list. The goal is to create a desktop application from scratch and run it successfully.

Scaffold the Application

To begin, run the following commands from your preferred parent directory to create a folder for the project, and then change directory into the new folder:

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

Because an Electron.js app is, at heart, a Node.js application running web pages, you’ll need initialize the app and create a package.json file by running the following command:

npm init -y

Next, create the application home page by creating an index.html file at the root of the project folder and add the following code:

<!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 HTML code above creates a simple webpage with a title that reads “My Electron App” and an h1 tag in the body with the text “Welcome to My Electron App”.

At this point you have a basic Node.js application. The next step is to convert your app into a desktop application using Electron.js.

Start by installing the Electron.js library. Back in your command prompt, still in your project’s root directory, run the following command:

npm install --save-dev electron

Once the installation is complete, create a new file called main.js. This will be the entry point into the application: it’s the Main process script. This script will do the following:

  • Create a web page for the application home screen
  • Load the application home screen when the Electron.js app is booted up
  • Load the home screen when the app’s icon is clicked if the app’s windows are closed but the app is still running

In your new file, main.js, begin by importing the necessary packages and then creating a function whose job is to create a new web page for the application home screen:

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"));
}

In the code block above, app (the Electron.js application object) and BrowserWindow (the Electron.js module for creating and loading web pages) are imported from the Electron.js package. The path module is also imported, enabling you to work with the project directory.

After the imports, you create the loadMainWindow() function. This function uses the BrowserWindow object to create a new 1200px by 800px browser window that loads the index.html file from the project’s root.

Next, beneath the existing code, add a call to the loadMainWindow() function so that the function is invoked immediately after the app boots up:

app.on("ready", loadMainWindow);

The loadMainWindow() only gets called when the ready event is emitted on the app. The web page needs to wait for this event because some APIs can only be used after this event occurs.

The next step is to take care of an issue on some operating systems where the application still remains active even after all windows have been closed. This often occurs on non-MacOS platforms. To fix this, add the following below the existing code in_ main.js_:

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

This code instructs the app to listen for the window-all-closed event, which is fired when all windows created by the Main process have been closed. It then checks if the platform is MacOS and if not, it explicitly quits the application, ending the Main process and thus terminating the application.

The final step in this file is to ensure that the application boots up when its icon is clicked in the operating system’s application dock when there are no windows open. To achieve this, add the following code at the end of the file:

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

This code listens for the activate event on the app. When the event is emitted, this code checks if there are any windows currently open that belong to the application. If not, the home screen is loaded by calling loadMainWindow().

electron html css javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Build a Google Clone Search Engine Web App | HTML, CSS and JavaScript

We'll build a Google clone using HTML, SASS compiled to CSS, and Vanilla Javascript. The design will be mobile first, responsive, and have accessibility in mind. We'll use the Javascript Fetch API with Async / Await to retrieve search results from the Wikipedia API.

How to add CSS & Javascript to your HTML

In this video, we create a starter template and link external CSS and Javascript files into our HTML file. We also look into what a CDN is and general boilerplate setup for a web development project.

Web Animations with HTML, CSS, and JavaScript

Learn about some basic animations you can do with CSS, HTML and JavaScript and shows you how to add input animations to your site. Web animation is necessary for creating eye-catching websites that enable better conversions and attract users to click, view, and buy things on your website.

Responsive Website with HTML, CSS, and JavaScript

We will build a Modern Responsive Website with HTML, CSS, and JavaScript. Responsive Website with HTML, CSS, and JavaScript - How to Build a website with HTML, CSS, and JS