← Zur Übersicht

Electron-Auto-Updates - Sweat and Tears

Electron-Auto-Updates - Sweat and Tears

Motivation

I recently worked on a project where we needed the Electron's autoupdate capabilities.

After a day of tearing my hair out - and only thinking about killing myself twice - I managed to get everything working. (Sarcasm OFF)

Today I want to share a guide on how to make a basic Electron app get updates automatically from GitHub Releases on macOS!

Example

You can download a working example at:

https://github.com/Vyperus/electron_autoupdate_example

Just go to the releases, download version 1.0.0 and start it on your Mac. It will then start to download the version 1.0.1 and inform you when the update is finished.

Step by Step

You will need to get a Developer ID Certificate, get a personal access token from GitHub, set some variables, setup the app, pack it and publish it.

Getting a "Developer ID Certificate"

Before you can pack und release your app to GitHub you need to sign the code.

Don't worry, the "electron-builder" will do that for you, but we need to get an appropriate certificate first.

For this, you need to create a "certSigningRequest" like this:

  • Open your "KeyChain Access".
  • Click on "KeyChain Access" in the upper left corner.
  • Click on "Certificate Assistant".
  • Click on "Request a certifacte from a certiface authority".
  • Keep everything as it is and click on "Save on Disk".
  • Now click on "Continue" and save it somewhere.

Now log in into your Apple developer account. Don't know how? Well, here is how:

If this is not what you see: Check if you have or your company already has a Apple Developer Team and make sure they invite you. If you can't do that or you simply don't have such a team you can pay 99$ a year to get one. Sadly, your journey ends here...

For all the other people, we continue with:

  • Click on "Certificates, ID's and Profiles".
  • Click on the dropbox up left and chose "MacOS".
  • Now click on the little "+" up right.
  • Chose "Mac Development" and continue.
  • Now you will be asked to create and upload your "certSigningRequest" you created earlier.
  • After uploading it, you will get a download with your fresh certificate. Too process, just double-click on it to add it to your KeyChain.

Getting a GitHubToken

  • Browse to GitHub.
  • Open your settings by clicking on the little arrow in the upper right corner and on "Settings".
  • Now click on "Developer Settings" on the left.
  • Click on "Personal access tokens".
  • Click on "Generate new token".
  • Fill in the token description and click on the checkbox of "repo".
  • Click on "Generate Token" on the bottom of the page.

You will now see your freshly generated token, please keep that window open.

Setting Environment Variables

  • Open your terminal, type:

    export GH_TOKEN="YOUR-TOKEN-HERE"

    and exchange "YOUR-TOKEN-HERE" with your freshly generated GitHub-Token. This will set the variable for this terminal session. Alternatively, you can set it on ~/.bashrc to expose it for new sessions as well.

Setup a Basic Electron App

  • Others have already written great instructions for this, please follow this guide: electron-quick-start.

Add the Updater

  • Start with installing:

    npm install electron-updater --save.

  • You can get it working by just adding these lines to your index.js:

     const {autoUpdater} = require("electron-updater");
     autoUpdater.checkForUpdates();
    
     autoUpdater.addListener('update-downloaded', (info) => {
       autoUpdater.quitAndInstall();
     });
    

    This becomes a little bit fancier, if we introduce a "download-progress" capability:

     autoUpdater.addListener('download-progress', (info) => {
       mainWindow.webContents.send('prog-made');
     });
    

Note: Check the full documentation of the events at electron-updater.

Pack Your App

  • Install "electron-builder" with

    npm install electron-builder.

  • Update your package.json with this:

     "build": {
       "publish": [{
           "provider": "github",
           "owner": "YOUR-NAME",
           "repo": "YOUR-REPO"
       }]
     }
    

    and

     "scripts": {
       "build": "build",
       "ship": "build -p always",
       ...
     }
    
  • Now build your app with

    npm run build

You should see no errors or warnings and a "dist" folder should appear in your projects root folder. In that folder you will find your .dmg and -mac.zip files.

Publish Your App to GitHub

If everything went smoothly, you can now publish your app to GitHub.

  • Run

    npm run ship

    to upload the generated files to GitHub and create a draft.

  • Now go to GitHub again and open your repository.

  • Click on "Releases".
  • Click on the edit button on your created draft.
  • Publish it by clicking in "Publish Draft".

Test the Update

  • Now go back to your package.json and update the version number.
  • Build and release the app again.
  • Download the "old" app from GitHub.
  • Start it and watch the auto update working.

Note: Download the .dmg file and move the app to your Application folder if you get any errors while updating.

Conclusion

This article showed how to integrate an update mechanism into your Electron application; a mechanism like this may be mandatory to pitch an Electron based web app to enterprise businesses. They tend to struggle with rolling out company-wide updates for desktop applications; we encourage our customers to consider web applications in Electron as a feasible replacement for their desktop applications.