One of the ways that an Electron app can be packaged for distribution is by using Electron Forge.
For Windows, there are currently two options for the kind of installer that Electron Forge can make, WiX and Squirrel.Windows. These each have their own set of configuration options and produce installers with different user experience. (Note: I am not counting the Zip option, which as the name implies is just a zip file containing all your application files, with no actual installer.)
Creating a Basic Installer
Squirrel.Windows
Squirrel.Windows installers do not display detailed progress information or ask the user for any confirmation while installing. Instead, they display a simple looping animation, and the application is launched immediately once installation is complete.
The default icon and progress animation of a Squirrel.Windows installer
WiX
Before you can create WiX installers using Electron Forge, you will first need to install the WiX toolset, and make sure the candle.exe
and light.exe
tools are configured to be accessible via the PATH
system variable. You will also need to make sure that the Forge component @electron-forge/maker-wix
is installed as a dev dependency in your Electron project, as Electron Forge’s project setup script does not currently include it.
By default, the installer will show this simple window, with no configuration options during install:
Customisation
Custom Application Icon
Electron Forge lets you set an application icon in the same way, regardless of the kind of installer. You will need to have an icon in .ico
format, but an easier method is to create a 1024x1024 PNG image of your icon and then use a helper tool called electron-icon-maker which will not only generate an .ico
for you from the PNG, but also an ICNS-type icon that would potentially work for a Mac version of your app.
In the Electron Forge configuration, add a path string for “icon” to the “packagerConfig” subsection that specifies where your .ico
file is:
Customising a WiX Installer
You can provide a more user-friendly “wizard” interface to a WiX installer by adding a "ui": {...}
config section:
Now the installer will look like this, with several “pages” for the user to click through and given the choice to choose a directory, rather than a fully automated installation process:
You can also specify custom image files to be used as the background for this wizard:
This can be used to add branding to the installer:
Note that, as it is an MSI, the icon for the installer itself cannot be changed.
Customising a Squirrel.Windows Installer
You can replace the “installing” animation with any GIF, and the icon for the installer itself with an .ico
file, like this: