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.

cross-platform

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.

If you already have existing JavaScript development skills in your team, Electron is an efficient way to produce desktop applications.

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:

{
  "name": "electron-hello-world",
  "version": "1.0.0",
  "main": "main.js",
  "license": "MIT",
  "author": "Andrew Tait",
  "scripts": {
    "start": "electron ."
  }
}

Now add the Node electron-prebuilt package to your project. This installs compiled Electron binaries for your development OS. We only need this package for development, so install it using

yarn add electron-prebuilt --dev 

Now let’s create our application. Specifically, Electron applications have a main process that launches the browser window. Create a main.js file with the following contents

const { app, BrowserWindow } = require("electron");

let mainWindow = null;

app.on("ready", () => {  
  mainWindow = new BrowserWindow({ 
    width: 800, 
    height: 600 
  });

  mainWindow.loadURL(`file://${__dirname}/index.html`); 
});

Note that this script loads an index.html file containing the core of our application. For now, we’ll just have a simple static file that displays our text.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Electron Hello World!</title>
</head>
<body>
  <p>Hello World, from Learning Tree!</p>
</body>
</html>

Run the following command in your terminal

yarn start

If all goes well, you should see an application window similar to

Electron app screenshot

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.

<body>
  <p>Hello World, from Learning Tree!</p>
  <div><a id="click-me-link" href="#">Click Me!<a></div>
  <p id="counter-status">Clicked 0 time(s)</p>

  <script src="index.js"></script>
</body>

Create an index.js file with the following contents

let counter = 0;

const counterStatus = document.getElementById("counter-status");

document.getElementById("click-me-link").onclick = () => {
  counter++;

  counterStatus.innerHTML = `Clicked ${counter} times`;
};

Here we’ll close the existing application if still running, and run the latest version.

yarn start

Finally, click on the link and the counter message should update. Voila—a cross-platform interactive desktop app built using JavaScript.

In addition, the code loaded via the main.js can be as complex as your app needs it to be. You can use frameworks such as React, Angular or jQuery to develop your application.

Type to search blog.learningtree.com

Do you mean "" ?

Sorry, no results were found for your query.

Please check your spelling and try your search again.