Electron Auto-Updater via Renderer (Frontend) Manipulation

electron-builder presents a delightful auto-update flow for Electron apps that gives you a lot of flexibility about how, where and when you want to serve and update your application. Once you integrate it in your electron app, it works beautifully with checkForUpdatesAndNotify where the app will automatically check for updates and notify the user if there is an update they can install. The update is then automatically installed when the app is closed. Here, we will take a different road and manipulate the app-update lifecycle from the frontend (in the case of Electron, the renderer), and let the end-user decide what to do with it.

We want the frontend to tell the electron main process proactively if (1) it should check for updates, (2) it should download the found update, (3) it should quit the app and install the downloaded update.

Why would you want this?

To inform your user about what is going on when you are initializing your app. Show meaningful messages about the state of your process and allow the user to intervene/continue/cancel as they wish.

If you want to use the default checkForUpdatesAndNotify and not touch it in the renderer, the configurations here are the way to go. We used electron-react-boilerplate ❤ to kickstart our app and the initial configuration for the updater run through the main process is already integrated there.

This guide assumes that you have initiated an electron project with a working main and renderer. You also need to add electron-updater to your project dependencies.

Initiate the updater in your main

We will go through the blocks you need to add to your codebase one by one to set up the updater and manipulate it from the renderer.

main.dev.js
import { autoUpdater } from 'electron-updater';
...
class AppUpdater {
  constructor() {
    // Link to your server where you have the installation files
    const linkToFiles = 'http://example.com';

    // Tell the autoUpdater where to check for the updates…