This is part four in the series of blog posts “Making an Electron App with Ember JS” where I go over how I built my app Snipline for the web, Mac, Windows, and Linux.
This post assumes you’ve read the previous chapters, if you haven’t then I highly recommend you do.
Notes for building Electron apps for Windows
To build the app for Windows you will need access to a machine that runs Windows.
We'll be building the app for external distribution (Downloadable from the web). It’s possible to build for the Windows Store but I have not had experience doing this. Please leave a comment below if you’ve done this!
As with MacOS, it’s highly recommended that you code sign your releases. Without doing this users will see warnings when trying to install your application. I use Sectigo for my certificates which start at $166/year. I’ll go into more details on this process throughout the rest of the article.
Certificate Setup
As mentioned, I use Sectigo for my code signing certificates which you can find here. After you’ve purchased a certificate you may have to wait a few days for it to be sent to you.
You’ll receive an email with a link to install the certificate. Make sure that you click this on the Windows machine that you’ll be using in Internet Explorer - NOT Microsoft Edge.
Once you have installed the certificate you’ll need to export it to a .pfx file for use with the Electron build process. To do this, follow this guide from Sectigo.
Make sure to give the certificate a strong password!
Configuring the app to build for Windows
Once you have the Ember app set up on your Windows machine you’ll need to make a few tweaks to the ember-electron/electron-forge-config.js file.
First, add a function for getting the code signing password you used earlier.
function getSigningPassword() {
if (process.platform !== 'win32') {
return;
}
if (process.env.CODESIGN_PASSWORD) {
return process.env.CODESIGN_PASSWORD;
} else {
console.log('Codesigning password can not be found, release build will fail');
console.log('To fix, set CODESIGN_PASSWORD');
}
}
Add or update the electronWinstallerConfig object
// ...
"electronWinstallerConfig": {
"name": "acme",
"noMsi": true,
"authors": 'acme',
"exe": 'Shopper.exe',
"title": "Shopper",
"certificateFile": "<certificate location>",
"certificatePassword": getSigningPassword(),
"icon": path.join(rootPath, 'electron-assets', 'shopper.ico'),
},
// ...
There are a few values you will need to update: name, authors, exe, title, certificateFile, and icon.
The ico file needs to be a 256x256 icon. This will be what is used on Windows as your app icon.
The certificateFile needs to be updated to the location where you saved the exported certificate.
To build the application use the following command, replacing the password with your own.
env CODESIGN_PASSWORD=<codesign password> env ELECTRON_ENV=production ember electron:make --environment=production
One thing to mention is that this command is temperamental on Windows. I’ve had several builds fail due to code signing failures only for it to work with no changes later on. If you do receive this error, make sure to keep trying a few more times.
Final Notes
And there you have it! You now know how to build an Ember JS Electron application across three of the most popular desktop platforms.
There are several things that can be improved on and investigated, including working with more Linux environments, integrating release upgrades for Windows and MacOS, or using Electron without relying on Ember Electron. These are all topics for other articles, but after reading through this series you should have enough to get your started.
Enjoy!
