How to build your first Electron app

Let’s build a small Electron desktop app that opens a window with an HTML page. We’ll install Electron with npm, create main.js and index.html, then run the app.

If you’re new to Electron, read the first lesson of my free course for an explanation of Chromium, Node.js and the process boundaries. This tutorial gives you a first app to run and change.

Electron is free and open source, and lets you build cross-platform desktop apps with JavaScript, HTML and CSS. It was created at GitHub and powers apps including VS Code, Slack and Discord.

A quick look into the Electron internals

Electron is basically bundling the Chromium rendering library and Node.js (Chromium the open source project made by Google, on which they build the Chrome browser).

You have both access to a canvas powered by Chromium, which runs the V8 JavaScript engine, and use any Node.js package, and run your own Node.js code.

It’s a sort of Node.js for the desktop, if you wish. It does not provide any kind of GUI elements, but rather lets you create UIs using HTML, CSS and JavaScript.

Electron aims to be fast, small in size, and as slim as possible, yet providing the core features that all apps can rely upon.

Which kind of apps you can create using Electron

You can create lots of different kind of apps, including:

• regular apps, with a dock icon, and a window
• menu bar apps, which don’t have any dock icon
• daemons
• command line utilities

A good collection of Electron apps is available on the official site: https://www.electronjs.org/apps. With Electron you can create apps and publish them on the Windows and Mac App Store. One of mine is Note Repo, a daily notes app I built with Electron.

Learning Electron by example

The old Electron API Demos app is legacy now. For a current starter, use the official electron-quick-start repo, or follow the Electron docs.

Those screenshots still show the shape of a simple Electron window. The docs walk through the same ideas with up-to-date APIs.

How to create your first Electron app

First, create a new folder on your filesystem and into it run:

npm init -y

to create a package.json file:

{
  "name": "testelectron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Add this line in the scripts section:

"scripts": {
  "start": "electron ."
}

Now install Electron:

npm install -D electron

Electron can now be started with

npm start

However if you do you will see an error telling you there’s no main.js file, which is what we wrote in the package.json file to be the main starting point of our app:

An Hello World Electron GUI app!

Let’s create an application that shows an Hello World in a window.

Create 2 files, main.js:

const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  console.log(
    `Node ${process.versions.node}, Chrome ${process.versions.chrome}, Electron ${process.versions.electron}`
  )
  createWindow()
})

and index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>Check the terminal for the Node, Chrome, and Electron versions.</p>
  </body>
</html>

The renderer stays isolated from Node. Leave contextIsolation on (it is the default) and do not enable nodeIntegration in the renderer. Version strings come from the main process (process.versions), printed in the terminal when the app starts.

Now run again npm start, and this window should show up:

This is a very simple one-window app, and when you close this window, the application exits.

Making app developer’s life easier

Electron aims to make the developer’s life easier. Applications have lots of problems in common. They need to perform things that the native APIs sometimes make a little bit more complicated that one might imagine.

Electron provides an easy way to manage In-App Purchases, Notifications, Drag and Drop, managing key shortcuts and much more.

It also provides a hosted service for app updates, to make updating your apps much simpler than if you had to build such as service yourself.

Want me to talk about your product? You can sponsor this site.