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.
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-winstaller
Setting up installer script
Create a new file called createinstaller.js in installers/windows/
constcreateWindowsInstaller=require('electron-winstaller').createWindowsInstallerconstpath=require('path')getInstallerConfig().then(createWindowsInstaller).catch((error)=>{console.error(error.message||error)process.exit(1)})functiongetInstallerConfig(){console.log('creating windows installer')constrootPath=path.join('./')constoutPath=path.join(rootPath,'release-builds')returnPromise.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
Running this with the following command would create an installer for us in release-builds/windows-installer.
node installers/windows/createinstaller.js
If 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/
constelectron=require('electron')constapp=electron.appmodule.exports={handleSquirrelEvent:function(){if(process.argv.length===1){returnfalse;}constChildProcess=require('child_process');constpath=require('path');constappFolder=path.resolve(process.execPath,'..');constrootAtomFolder=path.resolve(appFolder,'..');constupdateDotExe=path.resolve(path.join(rootAtomFolder,'Update.exe'));constexeName=path.basename(process.execPath);constspawn=function(command,args){letspawnedProcess,error;try{spawnedProcess=ChildProcess.spawn(command,args,{detached:true});}catch(error){}returnspawnedProcess;};constspawnUpdate=function(args){returnspawn(updateDotExe,args);};constsquirrelEvent=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 shortcutsspawnUpdate(['--createShortcut',exeName]);setTimeout(app.quit,1000);returntrue;case'--squirrel-uninstall':// Undo anything you did in the --squirrel-install and// --squirrel-updated handlers// Remove desktop and start menu shortcutsspawnUpdate(['--removeShortcut',exeName]);setTimeout(app.quit,1000);returntrue;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-updatedapp.quit();returntrue;}}}
And in main js we’ll require this file at the beginning:
//handle setupevents as quickly as possibleconstsetupEvents=require('./installers/setupEvents')if(setupEvents.handleSquirrelEvent()){// squirrel event handled and app will exit in 1000ms, so don't do anything elsereturn;}constelectron=require('electron')// Module to control application life.constapp=electron.appconst{ipcMain}=require('electron')varpath=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:
To create a DMG installer for our Electron app we can use the electron-installer-dmg package.
In this tutorial we’ll create a DMG installer for the Electron tutorial app. To create a DMG installer you first need to package the app. Read that tutorial first if you haven’t already.
1. Installing package
Open up a terminal and run these commands:
# For use in npm scripts
npm install electron-installer-dmg --save-dev# For use from cli
npm install electron-installer-dmg -g
2. Creating the DMG installer
This is the basics that we need to create the DMG. First run the package-mac script that we created to create a package for the mac in the electron packager tutorial:
npm run package-mac
This will create a package for us in the release-builds folder. So now we can create the DMG with this command:
This will create a file called electron-tutorial-app.dmg in the root folder of the application. The dmg will use default settings. In the next step we’ll look at what settings we can do to it.
3. Usage
If we look at the file usage.txt we can see that we have some options to make when it comes to the installer:
As you see above we can set the out path of the .dmg file that is generated. We can set an icon that the dmg-window will use (By default this was the electron icon when i tried). We can set the icon size and custom background for the window.
Since the packages are created in the release-builds folder we’ll create the installers there as well. We also already have the icon created for the application (this is done in the icon tutorial)
Packaging your app into an asar archive speeds up requires a bit, it conceals the source code and helps to avoid long path names on Windows. Asar is an archive format that concatenates files together without compression.
I got this error when building a Windows installer for an electron app with electron winstaller:
"The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters."
This was because of a package in node_modules that created very long paths.This did however work on Linux and MacOS. The solution was to package my app with asar before creating the installer.
Asar and electron packager
Install the asar package globally:
$ npm install-g asar
In the Electron tutorial app we use electron packager. To the build script we can pass –asar=true in package.json:
Lets look at IPCMain and IPCRenderer in Electron. We can use it to send messages between main and renderer processes.
Over at the forums there was a developer who needed to open a second app window from the main process when the user had done something in the renderer process. So I thought we could look at a real world example. So in this tutorial we’ll wait for the user to click a button. Then we’ll send a message to the main process which in turn opens a new window.
1. Setting up a new window in main.js
Fire up the Electron tutorial app or your own app, and open main.js. The additions are highlighted in bold.
constelectron=require('electron')varpath=require('path')// Module to control application life.constapp=electron.app// Module to create native browser window.constBrowserWindow=electron.BrowserWindow//Adds the main Menu to our app// Keep a global reference of the window object, if you don't, the window will// be closed automatically when the JavaScript object is garbage collected.letmainWindowletsecondWindowfunctioncreateWindow(){// Create the browser window.mainWindow=newBrowserWindow({titleBarStyle:'hidden',width:1281,height:800,minWidth:1281,minHeight:800,backgroundColor:'#312450',show:false,icon:path.join(__dirname,'assets/icons/png/64x64.png')})....secondWindow=newBrowserWindow({frame:false,width:800,height:600,minWidth:800,minHeight:600,backgroundColor:'#312450',show:false,icon:path.join(__dirname,'assets/icons/png/64x64.png'),parent:mainWindow})secondWindow.loadURL(`file://${__dirname}/windows/secondWindowcontent.html`)require('./menu/mainmenu')}...
We create a new variable to hold our second window with let secondWindow and by now you know how to create a new BrowserWindow. But this time the size of the window has changed. And we also don’t show a frame, so we set that to frame:false. This is because we close the window from a button that we create ourselves instead of using the standard os-buttons. If the user closes the new window with the built in close button they wont be able to open it again because it’s not initialized anymore.
We also set mainWindow as parent so that secondWindow will stay on top of the parent window. There are some platform specific handling to the parent setting:
On macOS the child windows will keep the relative position to parent window when parent window moves, while on Windows and Linux child windows will not move.
On Windows it is not supported to change parent window dynamically.
On Linux the type of modal windows will be changed to dialog.
On Linux many desktop environments do not support hiding a modal window
The secondWindow also loads another .html file called ipcwindow.html that is located in a folder called windows. Lets look at that next.
2. IPCWindow content
Create a new folder called windows. In that folder you create ipcwindow.html. Add this content to the html file:
<!DOCTYPE HTML><!--
Hyperspace by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
--><html><head><title>Electron tutorial app - ipc</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1"/><linkrel="stylesheet"href="../assets/css/main.css"/></head><body><!-- Sidebar --><sectionid="sidebar"><divclass="inner"><nav><ul></ul></nav></div></section><!-- Wrapper --><div><sectionid="welcome"class="wrapper style1 fullscreen intro"><divclass="inner"><h1>Yes this is the second window!</h1><ulclass="actions"><li><ahref="#one"id="close-me-button"class="button scrolly">Close me</a></li></ul></div></section></div><!-- Footer --><footerid="footer"class="wrapper style1-alt"><divclass="inner"><ulclass="menu"><li></li></ul></div></footer><!-- Scripts --><script>window.$=window.jQuery=require('../assets/js/jquery.min.js');</script><script>window.i18n=new(require('../translations/i18n'));</script><script src="../assets/js/jquery.scrollex.min.js"></script><script src="../assets/js/jquery.scrolly.min.js"></script><script src="../assets/js/skel.min.js"></script><script src="../assets/js/util.js"></script><script src="../assets/js/main.js"></script><script>require('../assets/js/translations')</script></body></html>
3. Changes in navigation menu and who we are section
When this tutorial is being written the navigation menu and who we are section looks like this:
Navigation menu - who we are
Change the name of the menu-item to IPC/Remote in the en.js and sv.js translations
{...."Who we are":"IPC/Remote"....}
Also rename sections/whoweare.html to ipcremote.html. Then update link=rel and the sidebar menu in index.html:
....
<linkrel="import"href="sections/ipcremote.html">
....
<li><aid="welcome-menu"data-section="welcome"href="#">Welcome</a></li><li><aid="whoweare-menu"data-section="ipcremote"href="#">Who we are</a></li><li><aid="whatwedo-menu"data-section="whatwedo"href="#">What we do</a></li><li><aid="getintouch-menu"data-section="getintouch"href="#">Get in touch</a></li>
In ipcremote.html we also need to update the id of the section to ipcremote and adding some information about what will happen if we click the button:
<templateclass="section-template"><sectionid="ipcremote"class="wrapper style2 spotlights"><section><divclass="content"><divclass="inner"><h2>IPCRenderer and IPCMain</h2><p>Click the button below to send a message that is picked up in the main process and open a new window</p><ulclass="actions"><li><ahref="#"id="open-secondwindow-button"class="button">Open Window</a></li></ul></div></div></section>
4. IPCRenderer
Now we’ve got our app set up and it’s finally time to move on to sending and receiving messages with IPC. This will be done asynchronous.
Create a file called ipc.js in assets/js/. To start with you can add this content to it:
init() is called on documentready. That in turn hooks up an onclick event on the button in the ipc section with id #open-secondwindow-button. Now to the ipc stuff. When that button is clicked ipcRenderer.send is invoked like this: ipcRenderer.send(‘open-second-window’, ‘an-argument’) The first value sent as a parameter is the name of the event. The second one is an argument of your own choice.
and add a require statement to the file in index.html:
And to listen to the event and showing the second window just add this code:
...ipcMain.on('open-second-window',(event,arg)=>{secondWindow.show()})// This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.on('ready',createWindow)
And at this point the tutorial on ipc main and renderer is over. But we’ll do it once more just to be able to close the secondwindow again.
6. Closing a BrowserWindow
Open up ipc.js again and add another on click event that sends a closing message to main:
