Supporting automatic updates

The electron-builder project that we are using with our Electron application also provides support for automatic updates. In this section, we will learn how to set up a GitHub repository so that we can store and distribute application updates.

Our Markdown Editor application is going to check for new versions on each start-up and notify users if a new version is available. Let's set up automatic updates for Electron applications:

1. First, let's create a new GitHub repository and call it electron-updates. Initialize it with the README file to save time cloning and setting up the initial content:

1. Next, we need to generate a separate authentication token to allow our application to access GitHub and fetch updates:

Please note that the access token you create with GitHub's web interface should have the scope/permission repository set.

1. Once you get the token, save it somewhere—you are going to use it from the command line as a GH_TOKEN environment variable:

In my case, for demonstration purposes, the token is a value like this:

      cec93ac1cc2d42d422c20c554ca30a4cabf661b4

Please note, however, that the token is exclusive and is equivalent to a password. Never share it with others and don't push it to the source code. For the rest of the examples in this chapter, we are only going to use the access token from the command line in the form of an environment variable.

1. Install the electron-updater dependency to enable support for automatic update checks in our markdown editor project:

      npm i electron-updater

1. Update the package.json file and append the build and publish settings:

      {
        "name": "markdown-editor",
        "version": "1.1.0",
        "description": "",
        "main": "index.js",

        "scripts": {
          "start": "DEBUG=true electron ."
        },

        "build": {
          "appId": "com.my.markdown-editor",
          "publish": {
            "provider": "github",
            "owner": "<username>",
            "repo": "electron-updates"
          }
        }
      }

1. Use your GitHub account name as the owner property value and electron-updates as the repo value. This is how we call our GitHub project upon creation.

Now, let's learn how to publish the macOS distribution:

1. Update the scripts section of your package.json file according to the following code:

      {
        "scripts": {
          "publish:github": "build --mac -p always"
        }
      }

1. Don't run the publish command yet; we still need to wire the automatic update checks with the code.
2. Switch to the index.js file and import the autoUpdater object from the electron-updater library:

      const { autoUpdater } = require('electron-updater');

1. Checking for a new version of the application is extremely easy. All you need to do is call the checkForUpdatesAndNotify method of the autoUpdater object—the Electron library will handle the rest of the functionality.
2. Update the ready event in the index.js file, as follows:

      app.on('ready', () => {
        window = new BrowserWindow({
          ...
        });
        window.loadFile('index.html');
      
        autoUpdater.checkForUpdatesAndNotify();
      });

Here, we're creating a window, loading the index.html file to display the user interface, and then initiating the update check. The updater will performs the check against the GitHub repository and releases it in the background so that our users can keep using the application without interruptions.

1. The final content of your index.js file should look as follows:

      const { app, BrowserWindow, Menu } = require('electron');
      const menu = require('./menu');
      const { autoUpdater } = require('electron-updater');

      let window;

      app.on('ready', () => {
        window = new BrowserWindow({
          width: 800,
          height: 600,
          webPreferences: {
            nodeIntegration: true
          }
        });
        window.loadFile('index.html');

        autoUpdater.checkForUpdatesAndNotify();
      });

      Menu.setApplicationMenu(menu);

1. Now, you can run the following command to publish your first application version to GitHub:

      GH_TOKEN=cec93ac1cc2d42d422c20c554ca30a4cabf661b4 
      npm run publish:github

1. Don't forget to provide your token value for the GH_TOKEN environment variable. There may be many output messages in the Terminal window. The tool is going to compile the application, sign it, upload it to your GitHub repository, and issue the release draft.
2. The end of the log should look similar to the following:

       building target=macOS zip arch=x64 file=dist/
       markdown-editor-1.0.0-mac.zip
       building target=DMG arch=x64 file=dist/
       markdown-editor-1.0.0.dmg
       building block map blockMapFile=dist/
       markdown-editor-1.0.0.dmg.blockmap
       publishing publisher=Github (owner: DenysVuika, project: 
       electron-updates, version: 1.0.0)
       uploading file=markdown-editor-1.0.0.dmg.blockmap provider=GitHub
       uploading file=markdown-editor-1.0.0.dmg provider=GitHub
       creating GitHub release reason=release doesn't exist tag=v1.0.0 
       version=1.0.0 [======== ] 38% 25.6s | markdown-editor-1.0.0.dmg 
       to GitHub 
       building embedded block map file=dist/markdown-editor-1.0.0-mac.zip
       [======== ] 40% 24.4s | markdown-editor-1.0.0.dmg 
       to GitHub 
       uploading file=markdown-editor-1.0.0-mac.zip provider=GitHub
       [====================] 100% 0.0s | markdown-editor-1.0.0.dmg 
       to GitHub
       [====================] 100% 0.0s | markdown-editor-1.0.0-mac.zip 
       to GitHub

1. Navigate to your GitHub repository and switch to the Releases section. You should see a new Release Draft there with a few files that we are going to distribute:

As you may have recalled, we have configured the macOS target for building and packaging. This is why multiple different download links refer to the macOS platform. As soon as you enable other targets, you should see more entries on the release draft page, including Windows installers and Linux packages.

You can publish multiple times to the save release version draft. The version number depends on the version field value inside your package.json file.

1. Once you are happy with the first version, you can click the Edit button, write some details about the current release, and press the Publish release button:

As soon as you publish the release, the application becomes available for all users. Now, let's see automatic updates in action.