The electron-builder is a complete solution for packaging and distributing the Electron application on Mac, Windows, and Linux platforms. It provides a number of options that can automate the build process. It's recommended to use this tool instead of packaging your application manually, and this is well suited with your task runners. It provides some useful features out of the box that includes npm package management, code signing, auto update the application, numerous target formats, build version management, publishing the artifacts, and so on.

In order to use the electron-builder, the configuration should be done in your application source code itself. This is a single-time process, which will save your time later when you build the application. The configuration should be done in your application's package.json file. The electron-builder provides a wide variety of options to customize your packaging process. Let's check how we can use this tool to package your Electron application.

The first step is to provide the right package information to your application. The package.json should be defined with a proper name, version, description, author name, and e-mail. The next step is to provide the build configuration inside the package.json file. As I mentioned, the electron-builder provides a wide variety of options. You can get more details about all available options on the GitHub page at: https://github.com/electron-userland/electron-builder/wiki/Options.

Add the following code to your package.json file. We will discuss the details of these options shortly in this chapter:

"build": {
    "appId": "electron.app.id",
    "mac": {
       "category": "com.company.app.type"
     }
}

Create a directory called build in the root of your project and save the assets for the executable into that folder. Copy a background.png  (for Mac OS dmg background), icons.icns (Mac OS app icons), and icon.ico (For Windows exe icon) to that folder.

The Linux icon set will be generated automatically based the Mac OS icns file.  If you need to specify the files for Linux platform, you just need to copy the files into the build/icons directory. The filename must contain the size of the icon 32x32.

Add the script key to your package.json, as follows:

"scripts": {
"pack": "build --dir",
"dist": "build"
}

Then, you can run the npm dist to pack your application for the distribution. We will discuss more on electron-builder in the upcoming sections.