Package your Electron application into a executable file with electron-builder
We’ve been running our app in a development environment using the Electron executable. Now let’s learn how to package our app into a .app or .exe file so that we can distribute it to other users. Electron doesn't provide this functionality out of the box, so we'll use a popular and easy-to-use npm package called electron-builder to handle the details. electron-builder will automatically grab our .ico or .icns file and use that as our app's icon.
[00:00] Electron-builder basically takes a JSON config from your package.json, and packages your application for Mac, Windows, or Linux. First thing we want to do is let's define an extra field here, product name. I'm going to call my product Hello World.
[00:14] Electron-builder will use the name property if product name is not defined. The reason to use product name is that it allows you to use spaces, which NPM won't allow in the name property. Also, make sure the author field is filled out, because that'll be visible to your users when they inspect your package.
[00:31] I'm just using my name. You can use the company name or your name here. Let's go down here, and let's create a build property. First thing we have to define is our app ID. For that, I'm going to do com.egghead.helloworld.
[00:44] On Mac, this uses the CF bundle identifier, and on Windows, it's the application user model ID. If those words don't mean anything to you, that's OK. Basically, these IDs are used to identify your application to the operating system.
[00:56] You should not change this once it's been set. You should basically follow this format with com.your organization name.your product name. The next thing I'll do is I'm going to define a files property here.
[01:09] I'm going to use this to ignore the build assets folder. Build assets here just has this PNG file that I don't need to ship to the user. There's a lot more options that you can specify here. This is a really minimal configuration. See Electron-builder's documentation to see everything that's possible.
[01:25] Then last important thing -- I already have it defined here -- is we'll want to create an NPM script for packaging our project. Build here, we'll call Electron-builder. What'll happen is, is Electron-builder looks at what platform you're currently on, and then it builds an executable for that platform.
[01:39] Let's run ours here and see what happens. Let's open our dist folder, where it was outputted by default. We can see it outputted a ZIP file, the DMG file, and then this is our actual application executable. The ZIP file is just this app file that's been zipped. Then the DMG file is like an installer.
[01:57] Let's open up the app file, and see if it works. Cool, it does. That's the electron version we have running. Let's try out our main menu item here. That's working great. We can see if we look here in the doc, we have our custom icon there showing up. It's great.
[02:13] Let's run this DMG file, and see what that looks like. This is you'd want your users to download. They get this nice screen that prompts them to drop the application into their applications folder. This UI right here is customizable in Electron-builder. This is the default that we're looking at.
[02:30] You might be wondering, where is all my code in this? What happened to my code? Where did it go? On the app folder, right-click on it, and go show package contents. If we go to contents, resources, scroll to the bottom here, you see there's app.asar and electron.asar.
[02:46] We just do a little quick preview on our app.asar. We can see these are our source files. Basically, ASAR is a file format created by the Electron team. You can see it doesn't compress your source files or anything.
[02:58] All it does is concatenate them into one large file. The reason your source files are put into an ASAR file is that it mitigates the issues with long paths on Windows. It also provides a slight performance boost to require calls.
[03:10] Let's take a look at this on Windows. I have the same source files here. To build it, we'll just run NPM run package. That'll build it for Windows. Let's open up the dist folder, and see what it outputted. It outputs an EXE file, which is the installer.
[03:26] Then if we open the unpacked folder, we can see here's our application that we can run right here. This is the same application running in Windows. We have our exit and say hello menu items, and those work as expected.