Exploring the Electron application framework
Universal Desktop

© Lead Image © pino, 123rf.com
GitHub's Electron project brings the benefits of web programming to the realm of desktop applications.
If the boss orders a cross-platform desktop app for internal use, stressed IT staff often lack the time to get familiar with C++/Qt, Java, or Python and the associated application packaging. The Electron project [1] solves this problem by making a desktop app more like a web app. Electron combines Chromium [2] and Node.js [3] into a single run time, thus allowing the developer to build the application using the standard tools of web development, such as HTML, CSS, and JavaScript. The cross-platform nature of web development makes it quite easy to adapt your application to run on Windows, Mac OS, or Linux, and Electron even comes with tools that will package the app for the target OS.
Electron applications even update themselves automatically. Updates are retrieved from known sources, such as a GitHub repository, via an update server.
Electron began in 2013 as the framework for building GitHub's Atom text editor. GitHub open sourced Atom and Electron in 2014. Electron has an MIT license. Version 1.0.0 was released in 2016, and as of this year, it is available in Windows and OS X app stores as well as Linux repositories.
Bold Design
An Electron app works like a web application but in the reduced browser environment outlined in Figure 1. The Chromium components execute the application (top right in the picture). JavaScript libraries such as Bootstrap [4], React [5], Angular [6], or JQuery [7] contribute to the complete package.

Because the code within the application always executes using the Chromium run time, Electron avoids the possibility of problems arising from dissimilar browsers or browser versions. Developers also benefit from the debugging tools that come along with Chromium (Figure 2).
The main process manages the browser window. The Node API facilitates the connection to the desktop operating system. The developer can extend the Node environment by adding additional node packages.
Installing a Framework
Electron, the boilerplate project, and a set of tools used with Electron, including electron-packer
, electron-builder
, or electron-forge
, all take the form of node packages. Listing 1 installs Electron and all the tools a developer needs to pack the Electron apps onto a Ubuntu 16.04 node. Line 1 installs git and curl via the package manager; line 3 installs the latest version of Node.js. The necessary package list is created by a Bash script, which curl retrieves in line 2, under /etc/apt/sources.list.d/nodesource.list
, and then updates the list of available packages via apt-get.
Listing 1
Installing a Node
01 sudo apt-get install git curl 02 sudo curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - 03 sudo apt-get install -y nodejs 04 npm install yarn 05 sudo su 06 # it also works without Yarn with: sudo npm -g install electron-forge 07 yarn add global electron-forge
After nodejs
in line 3, the script inserts the alternative node package manager, Yarn [8], one line later. With root privileges, Yarn then installs electron-forge
[9] (line 6).
Empty Stage
Electron has a number of boilerplate projects [10] that accelerate the development process by providing an minimal executable app out of the box. These projects internally use electron-packer
to create the Electron application and electron-builder
to packetize platform-specific formats. electron-forge
, which is installed in Listing 1, offers the best combination of both tools. It also comes from the workshop of the creators of electron-packer
and electron-builder
. The forge
shell command makes use of electron-forge
.
The life cycle of an app starts when the developer taps the forge init app
command into the keyboard. This command creates the app
project directory from Listing 2 in the style of a boilerplate project. As with any node app, the node_modules
directory stores all packages listed in the package.json
configuration file – in the latest version.
Listing 2
Boilerplate App
01 |- app 02 |- node_modules 03 |- package.json 04 |- src 05 |- yarn.lock
Finally, the src
directory stores the minimal web app, which the developer then converts step-by-step into the desired application.
Initially, the directory contains the index.html
HTML document and thus the entire web app, as well as the index.js
file. The programmer checks the development progress by switching to the app
project directory and entering the forge init start
command. Since a watch process like Angular is missing, a location.reload()
reloads the app via the debugging console.
Figure 2 shows the started app at run time. The debugging tool appears in the Chromium window on the right side of the screen by default. In the final version, the developer has to remember to disable the debugging tools in the main process code.
The yarn.lock
file from line 5 in Listing 2 remembers the currently stored packets under node_modules
. This mechanism makes it possible to reproduce node projects on other machines on a scale of 1 to 1.
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Support Our Work
Linux Magazine content is made possible with support from readers like you. Please consider contributing when you've found an article to be beneficial.
News
-
Arch Linux 2023.12.01 Released with a Much-Improved Installer
If you've ever wanted to install Arch Linux, now is your time. With the latest release, the archinstall script vastly simplifies the process.
-
Zorin OS 17 Beta Available for Testing
The upcoming version of Zorin OS includes plenty of improvements to take your PC to a whole new level of user-friendliness.
-
Red Hat Migrates RHEL from Xorg to Wayland
If you've been wondering when Xorg will finally be a thing of the past, wonder no more, as Red Hat has made it clear.
-
PipeWire 1.0 Officially Released
PipeWire was created to take the place of the oft-troubled PulseAudio and has finally reached the 1.0 status as a major update with plenty of improvements and the usual bug fixes.
-
Rocky Linux 9.3 Available for Download
The latest version of the RHEL alternative is now available and brings back cloud and container images for ppc64le along with plenty of new features and fixes.
-
Ubuntu Budgie Shifts How to Tackle Wayland
Ubuntu Budgie has yet to make the switch to Wayland but with a change in approaches, they're finally on track to making it happen.
-
TUXEDO's New Ultraportable Linux Workstation Released
The TUXEDO Pulse 14 blends portability with power, thanks to the AMD Ryzen 7 7840HS CPU.
-
AlmaLinux Will No Longer Be "Just Another RHEL Clone"
With the release of AlmaLinux 9.3, the distribution will be built entirely from upstream sources.
-
elementary OS 8 Has a Big Surprise in Store
When elementary OS 8 finally arrives, it will not only be based on Ubuntu 24.04 but it will also default to Wayland for better performance and security.
-
OpenELA Releases Enterprise Linux Source Code
With Red Hat restricting the source for RHEL, it was only a matter of time before those who depended on that source struck out on their own.