How to Convert a Web App into a Desktop App Using Electron

Device compatibility is necessary is to provide seamless experience across various platforms, whether it's a website, mobile or a desktop application. For example, making a web application available as a desktop app allows it to be accessible anytime, especially if it supports offline access.

These days, it easier to take an already developed website and convert it to a mobile or desktop app. In the past, this required developers to understand platform-specific languages, but now numerous tools available make the process much easier.

In this article, we will cover the steps to convert a web application into a desktop app and why you might want to do it.

TL; DR:

Electron is a framework that enables developers to convert web applications to desktop applications. It combines chromium and Node.js, which gives applications access to the native features of operating systems such as Windows or macOS. Electron makes it faster for developers to build desktop apps without learning device-specific languages.

Electron JS or Electron.js is an open-source runtime framework created by Cheng Zhao. It enables developers to create cross-platform desktop applications using web technologies such as HTML, CSS, and JavaScript.

Electron is based on Node.js, and it's a framework that combines Chromium rendering engine, which is used for Google Chrome, with Node.js runtime, a server-side JavaScript engine that also provides web code access to native operating system APIs.

Features of Electron

Features of Electron JS include the following:

Cross-platform Compatibility: Electron.js makes it possible for developers to run applications for multiple operating systems, such as Mac, Windows, and Linux. This ensures that apps are consistent across different environments, improving users' experience.

Web Technology Integration: Electron.js makes it possible for developers to build desktop applications using web technologies, including HTML, CSS, and JavaScript, which also allows them to use existing tools and frameworks to speed up development.

Chromium Rendering Engine: The Chromium rendering engine, which powers Google Chrome, is what Electron.js uses to ensure that it renders with high performance and is compatible with modern web standards.

Node.js Runtime: Electron.js integrates with Node.js to enable a range of server-side functionality so that developers can use Node.js modules for tasks such as file system operations, network communication, etc

Two essential processes in Electron.js include;

Main Process: The main process manages the lifecycle of Electron applications. It handles the following;

• Browser Window Creation: This enables the creation and management of browser windows, which serve as the graphical interface for the application.

• Application Lifecycle Management: The main process uses the Electron app module to manage the lifecycle of an application. This module provides a set of events and methods that allow developers to add custom application behaviour, e.g., closing an application or displaying information panels.

• Native APIs: The main process extends Electron's features beyond wrapping web contents in a desktop app using Chromium; it also adds custom APIs to interact with the user's operating system. Electron provides built-in modules that allow applications to interact with native desktop functionality such as tray icons, dialogs, and menus.

Renderer Process: Electron app creates a renderer process for every BrowserWindow. The renderer displays the user interface, and standard web technologies can be used in the renderer, such as;

• HTML and CSS Rendering: This processes and displays web content and styling.

• DOM Access: This allows scripts access to the DOM so they can manipulate the elements on pages.

• Web API: This supports browser APIs such as fetch, WebSocket’s, audio, and video applications. This ensures that the Electron renderer has the same capabilities as the web page.

Also, the renderer process doesn't have direct access to Node.js or Electron APIs by default. To include NPM modules or JavaScript libraries in the Apps UI, developers often use a bundler toolchain like Webpack or Parcel to convert the modules into a format that is compatible with the renderer's environment.

There are many reasons why one would need to convert a website or web application to a Desktop App, some include:

Offline Access: Desktop apps allow users access to content or features even when there's no internet connection.

Performance: Desktop apps can use the system resources, such as RAM and CPU, to store and process data quickly, which can make them faster and responsive than when running in a browser.

User Experience: Desktop Apps can provide a good user experience based on speed and can be more powerful when performing powerful tasks because they can leverage native features of the computer.

Automatic Update: Using tools like Electron allows desktop apps to update automatically, which means users do not have to do the update manually before they access the latest version.

Benefits of Electron.js

Cross-Platform Development: Electron.js makes it possible to use web technologies to build a desktop application for operating systems like Windows, Linux, and macOS.

Web Technology Usage: Electron leverages web technologies such as JavaScript, HTML, and CSS, allowing developers with these skills can get started without having to learn a new language from scratch.

Development Speed: Building a desktop app is faster today compared to the past, where it took a long time to build, and developers had to write code from scratch using low-level languages like C++.

Electron allows developers to build desktop applications in JavaScript, which is considered one of the easiest languages to learn and work with. This speeds the process of developing cross-platform applications.

Large Community: Electron is open-source and is used by developers across the globe, which means it has a strong and thriving community. This community of developers and users provides resources and support to other developers in building their applications.

Limitations of Electron.js

Some of the limitations of Electron.js include the following;

Application Size: Electron apps a large application because each app bundles Chromium engine and Node.js runtime which resulting in an application size of 50MB, and may increase as more features are added.

Memory Usage: Electron apps consume a lot of memory because each BrowserWindow runs in a separate renderer process. This leads to higher RAM usage compared to native applications.

Limited Access to Native Features: Electron apps can access native functionalities, but the renderer cannot access the features directly. The renderer has to communicate with the main process using an IPC (inter-process communication), which is like a bridge that allows the renderer to request native features. This extra communication layer adds complexity and is one of the reasons why native frameworks still outperform Electron in terms of performance.

In this quick tutorial, we will convert an existing web application to a desktop application using Electron instead of building from scratch.

Prerequisite: You need to understand the basics of web development using HTML, CSS, JavaScript, and React, and should be able to build a simple website using these web technologies in VSCode.

Step One

Install Electron by running the following command in your project file's terminal

npm install electron --save-dev

Step Two

Configure Electron JS. Inside your package.json file, add "main": "electron.js",

In the root of your project, create a file named electron.js

Step Three:

Inside the electron.js file within the public folder, write the following script as shown in the image below.

In the code above, app and Browser window modules are imported from Electron.

• The function createWindow creates a new Electron window, and width and height dimension set.

• win.loadURL("http://localhost:5173"/) loads the local development server.

• app.whenReady runs after Electron has been initialized.

• createWindow() opens the main window.

• app.on listens for all windows being closed.

• app.quit closes the app

• process.platform !=="darwin" ensures that on macOS the app stays running in the background when all windows are closed, which is standard macOS behavior.

Step Four

Update the package.json file by adding a start script for Electron “electron”: “electron .”

Also, in the vite.config file, configure the server so it always runs on a particular port.

Step Five

Start Application. First, run your React app, and then the electron script.

npm run dev

After the app loads, in another terminal, run the electron script

npm run electron

Note: If you try to run this application on Windows and you get an error, you can try running the node_modules.bin\electron electron.js, which tells Windows to run electron directly.

You can add node_modules.bin\electron electron.js as a script in the package.json file so that you don't have to type the entire length of instruction and run npm run electron instead.

In the image above, you can see that the app opens in a window, and not in the browser.

The image below also shows that the app is open on the Windows taskbar. This means that Electron has successfully converted our web app to a desktop app.

This example shows how easy it is to use Electron to convert a web app into a desktop application with just a few lines of code. For a production-ready app, you'd still have to work with things like packaging and installers, security, context isolation, etc.

Electron JS simplifies the process of converting a web application into a desktop app. In the past, to create a desktop application meant that developers had to learn low-level languages like C++ or device-specific languages.

Many organizations still hire specific developers to handle desktop and mobile applications, especially for complex applications, and Electron doesn't eliminate the need for understanding device-specific languages and the need for developers with these skills.