Introduction
Auto-update Electron applications with private repositories using Unlock
electron

Auto-update Electron applications with private repositories using Unlock

Back in December last year, I published my first Electron application. Things were relatively straightforward until my application was ready for production, and I had to figure out how to get auto-updates to work with a closed-source/private application. I couldn't find a solution that met my requirements, so I decided to build my service to make this super easy.

Introducing Unlock

The service I've built is now known as Unlock. It allows you to secure your applications with a simple API and manage your application licenses and distribution with ease. Using Unlock means you can set yourself or your team free from logistics and can do way more valuable work than packaging, versioning, and distributing a new release to their customers.

Unlock provides a plug-and-play auto-update solution for your Electron application. Unlock supports both Electron native and Electron builder applications. Connect your repository, copy and paste a few lines of code, and you are ready. Every time you publish a new release on Github, your release is uploaded to Unlock's CDN and distributed to your users.

Unlock admits new users in its beta program at the time of writing, and new users are accepted every week. Click here to enroll in the beta program.

In this article, we will look at how to use Unlock to auto-update your Electron application.

Prerequisites

Before we can continue, make sure you meet the following prerequisites:

  • You will need to be enrolled in the beta program.
  • You need to have an Electron application.
  • You have an Apple Developer account to notarize your macOS application.
  • You need a Github account and a private repository. You can create this for free if you don't have an account.

Setting up Unlock for update distribution

Let's kick off by creating our product by providing Unlock with the name of our product, the website (optional), and our type of product, in this case, Electron. We will cover licensing in a future article, so you can go ahead and disable this.

Next, we need to connect our Github account and select the repositories we want to grant access to.

In this example, I'm using an application that uses the Electron Builder updater, so I've gone ahead and selected this. I've also chosen to enable the auto-publish feature and the public download page.

The auto-publish feature will automatically publish new updates from Github to your users. If you disable this feature, you will need to publish new releases manually from the Unlock interface or via the API.

Unlock will provide you with a URL that you can share with new users if you enable the public download page, so they want to download your application.

Believe it or not, that's all it takes. We can now continue with configuring Electron to use Unlock as its auto-update provider.

Configure Electron auto-update

Unlock will present you with a code snippet that you can use for your Electron application when you visit the Distribution section. The code snippet has all the information it needs and works with your chosen update engine.

You can go ahead and add the code snippet to your main.js. It's recommended not to execute this code snippet in your development environment. For me, this looks something like this:

    if (process.env.WEBPACK_DEV_SERVER_URL) {
        // Load the url of the dev server if in development mode
        win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
        if (!process.env.IS_TEST) win.webContents.openDevTools()
    } else {
	const server = 'https://dist.unlock.sh/v1/electron'
	const productId = '6db7eeb6-04c9-431b-98f6-fc70e8fee226'
	const url = `${server}/${productId}/releases`

        autoUpdater.setFeedURL({
            url: url,
            serverType: 'json',
            provider: "generic",
            useMultipleRangeRequest: false
        })
        
        autoUpdater.checkForUpdatesAndNotify()
    }
Only check for updates when the application is running in production.

Publishing your release

Depending on the framework, the command-line interface may publish your application directly from your CLI. For example, if you use Electron Builder, the following command will do the trick:

yarn publish:all

The command will create a new draft release on Github for you to publish. Alternatively, you can also upload your build artifacts manually. Click Draft a new release and attach the binaries by selecting them. Tag your release with the correct version, and finally, click Publish release.

Don't change the filenames of your binaries; otherwise, the release may fail. Unlock supports all platforms; it's your choice which binaries you want to upload.

Tip: Electron is using Squirrel to perform updates. When providing updates for macOS, you only need to upload the zip files. Any .dmg files are discarded as these files are redundant.

If you switch back to Unlock and go to the releases page for your product, you will see that it has imported the release you just published on Github.

Now the only thing that remains is to start your Electron application. After a few seconds, it will notify you that an update is ready to be installed.

Application update successful

Conclusion

Unlock makes it super easy to ship your software to all of your users. Besides distribution, Unlock also provides a licensing feature which we will cover in a future article. Also, more great features are scheduled to be added in the near future. Be sure to reach out on Twitter and let me know what you think of Unlock or share your feedback and feature requests.

Philo Hermans
Author

Philo Hermans

Software Engineer, Laravel enthusiast & Business NLP Practitioner. Previously founder & CTO @ Wonderkind.

Previous Post

How to build modals with Laravel and Livewire

Success! Your membership now is active.