Packaging Series: How to build an MSI package for an Electron application

Written by Horatiu Vladasel · July 4th, 2019

Electron is an open-source framework which combines the Chromium rendering engine and the Node.js runtime in order to allow for the development of desktop GUI applications using web technologies.

For the purpose of this article, let’s suppose you have a simple “Hello World” JavaScript desktop application developed using Electron and which was bundled-in into an EXE. Basically, all what the application does is to open the below window.


Packaging it as MSI

Now, let’s see how you can package this as an MSI so that you can install it via your deployment tool.

Step-by-step packaging instructions:

1. Launch Advanced Installer.

2. Select “Installer Project” and then click on “Create Project”.

3. Enter your product details – you can also set the Control Panel icon for your application.


4. On the left pane, browse to “Files and folders” page and then drag and drop the binary files to the installation directory of your Electron application (e.g. “helloworld-win32-x64” folder).


5. Create a shortcut to your EXE file – you can do it directly from “Files and Folder” page by right clicking on the .EXE file and then “New Shortcut to” -> “Installed File”.


6. Browse to “Builds” page and set the configurations as per your requirements or you can just use the defaults.


And that’s all. Now you can build your MSI package.

Parametrizing a setting

Going forward, let’s suppose you want to parametrize a setting within your Electron MSI package so that you can easily change that from “Property” table or from command line during the installation. And for the purpose of this example, let’s say you want to parametrize the background colour of “Hello World” window.

First, you need to identify the file which stores the setting in question. In our case, it’s the java script file itself.

       const electron = require('electron');
       const app = electron.app;
       const path = require('path');
       const url = require('url');
       const BrowserWindow = electron.BrowserWindow;
       var mainWindow;
       app.on('ready',function(){
        mainWindow = new BrowserWindow({width: 1024, height: 768,backgroundColor: '#0b12e5'});
         mainWindow.loadURL(url.format({
         pathname: path.join(__dirname, 'test.html'),
         protocol: 'file:',
         slashes: true
        }));
       });   
       

Note#0b12e5 is the HEX code for blue.

Now, in order to achieve your goal, all you need to do is to follow the following steps:

1. The first thing you need to do is to add a public property and set its value.

- On the left pane, browse to “Package Definition” and select “Install Parameters” page;

- Scroll down to the “Property” section, right-click and then select “New Property”;

- Enter the property’s details into the “New Property” window;


Note#e4f407 is the HEX code for yellow.

2. Next, you need to add a Text File Update into your MSI package which will go and replace the existing string within the editable text file with its new value.

- On the left pane, browse to “Resources” and select “Files and Folders” page;

- Click on “New Text File Update” toolbar button;

- Enter the “Text File Update” details, ensuring you add a reference to the Property added previously in the “Replace” text box;



And that’s all. Now, you can re-build your MSI package to include the changes above.

If you install the newly built MSI and browse to the java script file where the background colour setting is stored, you will notice that the initial value #0b12e5 is now replaced by #e4f407. And if you launch your application, you will get the below window:


Moreover, the background colour can be easily changed by updating the public property which we defined and by adding BACKGROUNDCOLOUR=<HEX colour code> to your install command line as you can see in the example below.


Note#4ebb08 is the HEX code for green.


Video Tutorial


Comments: