Build Your Very Own Electron Cross-Platform Desktop App Using JavaScript

Cross-platform technologies are popular right now. Microsoft seems to be embracing non-Windows OSes—e.g. porting flagship projects such as .NET and SQL Server to Linux/macOS.

Most of this activity is around server and mobile technologies. Windows still has a commanding share—89% in 2016)—of the desktop, with macOS on just under 10% of desktops in the same year.

However, while these numbers may make support for macOS look unnecessary, the numbers are more skewed for certain categories of user. In some fields, macOS has much higher penetration. I have regular requests for macOS tools from academics, for example.

In 2016, it was reported that macOS and Linux combined accounted for 48% of developer desktop OSes–leading to predictions that non-Windows OSes will overtake Windows OSes this year (with developers).

For some market segments, possibly the more lucrative ones, cross-platform solutions make a lot of sense.

Electron

Electron is a library for building cross-platform desktop apps using HTML, CSS, and JavaScript. It was created by GitHub to build their Atom editor. It is open source and has been used by Microsoft to develop their cross-platform Visual Studio Code IDE. Slack use it for their desktop apps. It’s production-ready.

The library is based on Node.js and Google’s Chromium—making it very stable across multiple platforms. Everything can be packaged up, using native installers, so users don’t need to have Node or Chromium pre-installed on their machines.

Creating your first Electron app

Let’s build a simple Electron app from scratch to illustrate the process. You’ll need to install Node. I prefer the YARN package manager to NPM, so will use that here. You can use NPM, but, if you want to follow along, you might want to install YARN.

Launch a terminal/console and create a new folder (e.g. electron-hello world). Enter this folder and run the following YARN command

yarn init

You’ll be asked a number of questions. You can mostly accept the defaults. Specify your entry point as main.js and add your name as author. This will create a package.json file. Edit it to create a define a start script. You should end up with the following provided below:

Of course, static apps aren’t much use—let’s add some interactivity. To begin, add a “Click me!” (…yes, it’s one of those demos…) link, and a message that displays the number times the link was clicked, to the index.html view.

Furthermore, we’ll also add a script tag to include the code (coming next) since it listens for clicks and updates the counter status message.