Packaging and distributing your electron/angular2 desktop apps

Hi Friends,

Hope you are all well. This post is a sequel to my previous post Angular 2 – Desktop apps with Electron. If you haven’t yet read that, you could do so by clicking here.

Let’s begin from where we left off.

You can get the app from here.

A video screencast of this tutorial.

Now that you have the app. Let’s see how to package it and distribute it to different platforms.

To do so, first of all install an npm module called electron-packager using the below command.

Then open up your package.json file and under the scripts section add a new script and name it as package as shown below.

As you can see I have mentioned the platform as linux and architecture as all. To build for windows change it to win32 and for mac change it to darwin. The arch option specifies the architecture of the operating system (i.e., 32bit or 64bit). To build for all platforms just give electron packager . –all

Linuxapp is simply the name and you could change it to something you desire.

Now assume that the app is built. Open up the Linuxapp-linux-x64 directory and navigate to resources/app directory. You could see that all the code is available right. This shouldn’t be the scenario and this code shouldn’t be accessible by the end user. To handle this situation we can make use of another npm module called asar.

Go ahead and install it using the below command.

Now open up package.json file and then add the archive script as shown below.

Now the app.asar is created in the same resources/app directory. Delete the original app directory and you could see that the app still works fine as well.

(Please watch the video, I have shown how to do it for windows as well, its a similar method).

This is how you package and distribute your app to end users. Thanks for reading guys. Peace. :)

Liked it? Take a second to support admin on Patreon!
  • JFSebastian

    One hint: For mac use –platform=darwin instead of –platform=mac

  • Michael Jenner

    Great tutorial!

    I’m thinking of creating an app where I need to run some async processes. What is the recommended approach to do this? Say I need to read two datasources (json or sqlite3) before I do a third thing … In other words, how to control state of an electron app? I guess it can be considered two state machines, one for the main proces and one for the renderer.

  • Bibin Varghese

    Hi,
    I am working on creating Electron App which can auto update itself. I am using Angular 2 along with Electron to create the application. I would like your help on the same.
    Thanks