In partone andtwo of these Electron app development series, we created a basic text loader, and then addressed some security issues.But at the end of the day, we have not yet experienced the best feature of Electron apps:
I configured the build script as 'pack': 'electron-builder -dir -mwl', in script. The issue is, when i run the command npm run pack, it packages the application for all the platform, but for windows there is no single installer file either.exe or '.msi'. Electron-builder builds bunch of files for windows. The 'mas' key in the 'target' array configures electron-builder to build your app for the Mac App Store (MAS) in addition to the default formats. Specifying 'electronLanguages' affects which languages are shown on your app’s MAS page. If you don’t set this parameter, a long list of different languages will be displayed by default. Api documentation for electron-builder (v17.0.1) A complete solution to package and build a ready for distribution Electron app for MacOS, Windows and Linux with “auto update” support out. Which version of electron-builder are you using? 20.44.4: What target are you building for? Mac(dmg): I'm on MacOs 10.15 (beta2). While trying to build dmg I get following exception: Error: Exit code: 2.
Their ability to run on multiple platforms.
In this tutorial, we will use the codebase that we ended up with in the last part.you can get it here.
Note: I usually provide a link to a repository with the completed project at the end of the tutorial, but for this one I think is important that you have the package.json at hand to compare it with yours and find any possible differences in case you run into problems.
You can find the app configured to build on macOS, Windows, and Linux here:
https://github.com/mran3/Text-File-Loader-Build
macOS windows management
Before delving into packaging our app, let’s do a small adjustment to our code to respect the conventions of the macOS platform, where usually applications remain open even if they don’t have any active windows.We can implement that behavior easily with electron by adding the following code to app.js.
Other possible values for process.platform are:
- freebsd
- linux
- openbsd
- win32 (applies to any Windows).
If you are on a mac, relaunch our app and check that when you close the window, the app remains on the dock.Don’t worry about the electron icon, we will solve that next.
Icons
Also, if we are talking about distributing our app and provide a good user experience, we can not do it with the Electron logo as the icon. Create or find an icon of your liking for your app, I am going to use this one:
macOS uses a .icns format, Windows requires .ico and Linux prefer .png, fortunately, you can create icon files from a .png using online tools like https://cloudconvert.com/png-to-icns .
Once you have them in both formats, create a new folder in the root of the project (I called it assets) and put both icon files there.
Packaging and distribution toolset
To distribute your app with Electron, you need to package it for each operating system you want to target.The goal is to generate a .exe file for Windows, a .app for macOS, a .deb for Debian-based Linux distributions, and so on.
Electron Packager is the official Electron tool to help us convert our source code to a bundle specific for macOS, Linux, or Windows.
For Windows, Electron Packager will create a functional .exe along with a bunch of .dll and config files.Although you can put this together on a .zip file and send it to your users, that does not provide a great user experience.So we can go a step ahead and consider not only how to package our app but also how to distribute it.
That’s whenElectron Forge comes into play, allowing us to create nice step by step installation wizards for our application.Internally Electron Forge uses Electron Packager, so it is not necessary to install them separately, let’s run the following command to install them both:
Note
Be careful not to install electron-forge (without the @), as this will install electron-forge v5 which has problems creating apps for the latest versions of macOS.
Besides that, the official documentation relates to v6.
Then, let’s import our app into the Electron Forge workflow by running on a terminal located at the root of our project:
Have in mind that if you want to start a new Electron app with Forge included, you don’t have to import your project, instead, you can start a new project with the create-electron-app command (more info on the official Electron Forge documentation: https://www.electronforge.io/).
Although in theory, you could generate all your packages from one platform, that requires installing and configuring a lot of tools (i.e. wine and mono on mac to be able to build for Windows), so I recommend generating each executable in its own platform.
macOS
We are all set for making our executables.
I will start with macOS, but you can skip ahead if you are interested in the process forWindows orUbuntu Linux.
Open your package.json and in the scripts section, add one new entry:
Also, modify the name field so it does not contain spaces or uppercase letters.I am sure you don’t want to present your app to your users with that hyphens on it, to avoid that, create a new field below name named productName and put whatever name you like.
The beginning of your package.json file should look similar to this:
Now we need to add some configuration for Electron Forge, inside your package.json there should be a config field:
As you can see, the icon extension is not specified, but Electron Packager (under the hood) will add the correct extension (.ico or .icons) depending on the platform.
Now run the script we created by running the following command on your terminal:
At the end of the process, you should end up with a new folder named out.
Inside of it there should be two folders one with a long name containing the .app file generated by Electron Packager and the other named make contains a .zip file that you can distribute to your users.Uncompress, run and enjoy:
Note
For each platform, you can have different makers that produce different types of distributable files, maker-zip is the default maker for macOS, but others allow for example exporting to DMG files
(you can read more about it here: https://www.electronforge.io/config/makers/dmg ).
Ubuntu (Debian) Linux
To create a .deb package, we will need to make sure that our system has two utilities installed: fakeroot and dpkg, these are not npm packages, but actual applications of the operating system.
To install them, run the following commands on your terminal:
Add a new entry inside your scripts section with the following content:
You could just execute npx @electron-forge/cli make without the platform or targets arguments and electron forge will try to identify in what platform it is running and try to create the corresponding packages.
Getting the icon to work on linux required some additional steps.
Make sure the configuration of maker for debian (in your package.json) specifies what icon to use:
This will set the icon of the app, but for it to appear in the dock, we will need to jump off from our package.json for a moment and modify our main.js adding the icon to the call of new BrowserWindow.
Now on a terminal let’s run:
If everything went well you should have again an out folder with two sub-folders.
One with a bunch of files (the output of electron-packager), and make where you will find a nice .deb file ready to be double-clicked and install our beautiful app:
One configuration that builds your app without problem in one platform, might need to install additional packages on another.For example, macOS does not have a problem if the description field on package.json is not present, but it is required for Debian.
Windows
As you might guess, we need to add a new entry to npm scripts.Why not test the platform inferring capabilities of Electron Forge and call it without parameters:
Squirrel is the default maker for Windows.It is intended to be lightweight and provide a hassle-free experience to the user, not requiring admin permissions or long installation wizards.
As a side note, this makes Squirrel great for creating apps that can run on a pen drive.
Right now Squirrel will work, but it won’t generate a nice Desktop icon, but for that, we just need to add a simple line to our main.js file:
Run npm make from the terminal, install your application, test it, and if everything goes right, edit your CV and add “Developer of multi-platform desktop applications”. 😉
If you run into any problems, remember that you can find the completed project on:
https://github.com/mran3/Text-File-Loader-Build
Recently I released my first Electron application. When my application was ready to be released, it was required to have it notarized by Apple, or else nobody could use my your application. Although there are quite a few articles on this matter, it still took some trial and error because I ran into a couple of problems that were not mentioned. To save others some time figuring these things out, I've created this walkthrough to get you started.
Electron Builder
I've used Electron Builder together with the Electro Builder Vue CLI to build my first application. According to the official Electron website, it's described as a 'complete solution to package and build a ready-for-distribution Electron app that focuses on an integrated experience.'
From my experience, Electron Builder works excellent during development, but it seems a bit buggy in regards to making your application available to the general public. I've experienced some issues with notarizing and publishing. So I might give Electron Forge (maintained by Electron) a try for my next application to see how that works compared to Electron Builder (maintained by a third-party).
Apple Developer Program
In order to distribute your Electron app on macOS, you need to participate in Apple's Developer Program, which costs $99 per year. You can sign up for an developer account at https://developer.apple.com.
Head over to your Developer Portal and click on 'Certificates, IDs & Profiles.'
Next, head over to 'Certificates' and click the blue plus icon to create a new certificate. Depending on your distribution wishes, you need to select a certificate type. In this example, we will go ahead and select 'Developer ID Application,' which reads, 'This certificate is used to code sign your app for distribution outside of the Mac App Store.'
Next up, we need to upload a 'Certificate Signing Request.' You can create this with the Keychain Tool on your Mac. You can find this application in /Applications/Utilities
Next, choose Keychain Access > Certificate Assistant > Request a Certificate from a Certificate Authority. Fill out the form:
User Email Address: <your email address>
Common Name: <anything>
CA Email Address: <leave empty>
Request is: Saved to disk
This will create a new file .certSigningRequest. Head back to Apple's Developer Portal again and upload the certificate signing request.
Now download your certificate to your Mac, then double click the .cer file to install in Keychain Access. If you don't do this, you will get some strange errors from Apple when notarizing your application, which doesn't tell you anything useful:
Configure after sign hook
Electron Builder also uses Electron Notarize behind the scenes. For example, this is the afterSignHook.js I'm using:
Make sure you adjust the appId to your app's name; the convention is country.company.appname. Finally, you need to set your Apple ID and password. It's recommended not to include your credentials in your code, so please use environment variables when possible. There is no API key you can use instead of a password but you can at least generate app specific passwords, so you don't need to write your personal password. Apple will provide you with something like edqv-akmn-hasr-tyui.
That should do it. You should now be able to successfully notarize your application with the npm run osx:build command.
Tip: If you want to know more about the inner workings of how your application is signed and notarized, look at the electron-osx-sign and electron-builder-notarize NPM package.
At the time of writing Electron Builder still contains a bug that causes the your-app-mac.zip file to have an unsigned copy of your application (the your-app.dmg will work just fine).
Luckily someone wrote a workaround (I've made some adjustments for it to work with my Vue boilerplate). Place this file in the root of your project.
Electron Builder has a couple of hooks you can use to run the fixMacDistributionArchive.js file. Open your vue.config.js file if you are using the Vue CLI and add the afterAllArtifactBuild:
Note: The afterAllArtifactBuild is bugged when running any publish command like publish:all. I highly recommend that you use your own publishing script to push your release up to GitHub for example.
Electron-builder Mac Target Zip Dmg Download
All done! You should now be able to share your awesome notarized application app with the rest of the world. I'm working on a solution to make it easier for you to distribute your applications. If you are interested make sure you subscribe and be notified at Unlock.
I'm curious what you think of Electron Builder and if you've tried some alternatives. Tweet me @philo01 and share your experience.
Also, if you want to be notified about more articles about Electron be sure to subscribe or just follow me on Twitter, I appreciate the support 🙌🏼
Auto-updates for private repositories and licensing
Electron-builder Mac Target Zip Dmg
If you are building a commercial Electron product you are definitely going to be interested in Unlock. Unlock provides cloud-based licensing, distribution, and reporting for your Electron applications so you can set yourself free from logistics so you can focus on building software instead of packaging, versioning, and distributing products to your customers.