Last time we created a dmg installer for macOS. Now it’s time to look at an Electron Windows installer with Electron-winstaller. This tutorial expects you to build the installer on Windows.
This code will be added to the Electron tutorial app on Github. Before going through this tutorial you need to make sure you know how to package your app.
Adding description
Since i haven’t added it before now i needed to add a description of the app in package.json.
{
"name": "electron-tutorial-app",
"productName": "Electron tutorial app",
"description": "Application for electron tutorials",
"version": "0.1.0",
...Installing package
Run this command in your terminal:
npm install --save-dev electron-winstallerSetting up installer script
Create a new file called createinstaller.js in installers/windows/
const createWindowsInstaller = require('electron-winstaller').createWindowsInstaller
const path = require('path')
getInstallerConfig()
.then(createWindowsInstaller)
.catch((error) => {
console.error(error.message || error)
process.exit(1)
})
function getInstallerConfig () {
console.log('creating windows installer')
const rootPath = path.join('./')
const outPath = path.join(rootPath, 'release-builds')
return Promise.resolve({
appDirectory: path.join(outPath, 'Electron-tutorial-app-win32-ia32/'),
authors: 'Christian Engvall',
noMsi: true,
outputDirectory: path.join(outPath, 'windows-installer'),
exe: 'electron-tutorial-app.exe',
setupExe: 'ElectronTutorialAppInstaller.exe',
setupIcon: path.join(rootPath, 'assets', 'icons', 'win', 'icon.ico')
})
}The interesting thing here is the settings:
- appDirectory: Tells the installer where to look for the packaged app.
- authors: Who created the app.
- noMsi: should we use an msi installer?
- outputDirectory: where should the installer be saved?
- exe: the name of the packaged exe file in the app directory
- setupExe: the name of the installer exe
- setupIcon: the iconf or the installer
You can find a complete list of settings here.
Running this with the following command would create an installer for us in release-builds/windows-installer.
node installers/windows/createinstaller.jsIf you get an error complaining about to long path names, have a look at the asar tutorial.
Handling squirrel install events
Now the readme of electron-winstaller tells us to handle squirrel events inside our app. This will help us with the installation and also create shortcuts for us. The script below is copied directly from that readme. I’ve just wrapped it in module.exports so that we can require it from main.js
Start by creating a file called setupEvents.js in the folder installers/
const electron = require('electron')
const app = electron.app
module.exports = {
handleSquirrelEvent: function() {
if (process.argv.length === 1) {
return false;
}
const ChildProcess = require('child_process');
const path = require('path');
const appFolder = path.resolve(process.execPath, '..');
const rootAtomFolder = path.resolve(appFolder, '..');
const updateDotExe = path.resolve(path.join(rootAtomFolder, 'Update.exe'));
const exeName = path.basename(process.execPath);
const spawn = function(command, args) {
let spawnedProcess, error;
try {
spawnedProcess = ChildProcess.spawn(command, args, {detached: true});
} catch (error) {}
return spawnedProcess;
};
const spawnUpdate = function(args) {
return spawn(updateDotExe, args);
};
const squirrelEvent = process.argv[1];
switch (squirrelEvent) {
case '--squirrel-install':
case '--squirrel-updated':
// Optionally do things such as:
// - Add your .exe to the PATH
// - Write to the registry for things like file associations and
// explorer context menus
// Install desktop and start menu shortcuts
spawnUpdate(['--createShortcut', exeName]);
setTimeout(app.quit, 1000);
return true;
case '--squirrel-uninstall':
// Undo anything you did in the --squirrel-install and
// --squirrel-updated handlers
// Remove desktop and start menu shortcuts
spawnUpdate(['--removeShortcut', exeName]);
setTimeout(app.quit, 1000);
return true;
case '--squirrel-obsolete':
// This is called on the outgoing version of your app before
// we update to the new version - it's the opposite of
// --squirrel-updated
app.quit();
return true;
}
}
}And in main js we’ll require this file at the beginning:
//handle setupevents as quickly as possible
const setupEvents = require('./installers/setupEvents')
if (setupEvents.handleSquirrelEvent()) {
// squirrel event handled and app will exit in 1000ms, so don't do anything else
return;
}
const electron = require('electron')
// Module to control application life.
const app = electron.app
const {ipcMain} = require('electron')
var path = require('path')
...Adding script shortcuts
As we have done with the packager and dmg installer scripts we will add a script shortcut to the Windows installer script in package.json:
"scripts": {
"package-mac": "electron-packager . --overwrite --asar=true --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
"package-win": "electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electron Tutorial App\"",
"package-linux": "electron-packager . --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds",
"create-installer-mac": "electron-installer-dmg ./release-builds/Electron\\ tutorial\\ app-darwin-x64/Electron\\ tutorial\\ app.app electron-tutorial-app --out=release-builds --overwrite --icon=assets/icons/mac/icon.icns",
"create-installer-win": "node installers/windows/createinstaller.js"
}Now you can run the following to create a Windows installer:
npm run package-win
npm run create-installer-winSigning installer
The readme of electron-winstaller tells you to sign your installer. Read more about why.