Packaging for multiple platforms

Please note that running on all platforms does not necessarily mean that you can test and run all the installation packages on a single platform. This means you cannot, for example, launch Windows installers on Linux, or macOS installers on Windows. You may need to have access to either real machines with their respective platforms, or virtual machines, running with VirtualBox, Parallels, or any other modern virtualization software.

There are many community tools that you can use to build and package Electron applications for production. We are going to use electron-builder (https://www.electron.build/) for this purpose.

According to its documentation, electron-builder is as follows:

A complete solution to package and build a ready for distribution—Electron app for macOS, Windows, and Linux with auto update support out of the box.

The list of supported features is outstanding; it is recommended that you take a look at the documentation of electron-builder if you want to find out more.

With this tool, for example, you can create distribution packages for all platforms when developing only on macOS, or any other platform.

Before we continue, let's install it for our project with the following command:

npm i -D electron-builder

Now, let's look at how we can set up the packaging scripts, depending on your target platform. We are going to package our Electron application for macOS, Ubuntu Linux, and Windows 10 with a minimal set of configuration parameters.

Packaging for macOS

If you intend to publish our application to the App Store, you should provide an application ID and category settings. Open the project's package.json file for editing, and append the following section to the end of the file:

{
  "build": {
    "appId": "com.my.app.id",
    "mac": {
      "category": "public.app-category.utilities"
    }
  }
}

Feel free to customize the values and provide the relevant information later. For now, you can leave those values as they are.

There are two ways you can build your application: through the development and production modes. Let's start with the development script, which allows you to quickly run and see that your application is working as expected:

1. Update the package.json file and add the build:macos entry to the scripts section, as shown in the following code:

      {
         "scripts": {
          "start": "electron .",
          "build:macos": "electron-builder --macos --dir"
        }
      }

Just like the npm start command we used earlier, you can customize all the parameters in a single place. You only need to remember and document a simple command npm run build:macos.

2. To build the application for development, open the Terminal window in VS Code and run the build:macos script, as follows:

      npm run build:macos

3. After a few seconds, you will see the build's output in the dist/mac folder:

4. Double-click on the icon to run your simple Electron application locally.
5. Let's also add the necessary script so that we can create production or distribution packages. Append the dist:macos entry to the scripts section, as shown in the following code:

      {
        "scripts": {
          "start": "electron .",
          "build:macos": "electron-builder --macos --dir",
          "dist:macos": "electron-builder --macos"
        }
      }

Now, you have two scripts that handle running and packaging on your macOS machine.

Running the dist:macos script takes a bit longer than the build:macos one. After running the script, you get several different packages in the dist folder of your project: my-first-app-1.0.0.dmg, a typical macOS installer; my-first-app-1.0.0-mac.zip, an archived installer so that you can distribute it easily; and, of course, mac/my-first-app, which includes the ready-to-launch application:

Try running the .dmg file; you should see the typical macOS installer:

Please refer to the electron-builder documentation for ideas and tips on how to customize it: https://www.electron.build/configuration/dmg.

Congratulations—you've got your first cross-platform Electron application installer up and running on macOS!

Packaging for Ubuntu

The process of packaging your application for Ubuntu doesn't differ much from that of macOS. Let's get started:

1. You need to provide an application identifier and a category in the linux section of the package.json file:

      {
         "build": {
          "appId": "com.my.app.id",
          "linux": {
            "category": "Utility"
          }
        }
      }

Please note that you can declare settings for Linux alongside those for other platforms, which is handy when you're developing for multiple operating systems or switching between them. The same applies to the scripts section. In this book, we are going to use different script names so that you can merge them into a single configuration.

2. Update your package.json file and append the following scripts to it so that you can build your application in development mode and distribution mode:

      {
         "scripts": {
          "start": "electron .",
          "build:linux": "electron-builder --linux --dir",
          "dist:linux": "electron-builder --linux"
        }
      }

3. Let's ensure that we can build the application for local testing. Run the first script in the Terminal window:

      npm run build:linux

4. In the project's root, you should see the dist/linux-unpacked folder, which contains several build artifacts:

5. Now, let's see what you get when you're building packages for distribution. Run the second command, as shown in the following code:

      npm run dist:linux

6. This time, you are going to get multiple packages in the dist folder, as shown in the following screenshot:

The files that will be in your output folder are as follows:

• my-first-app 1.0.0.AppImage: The AppImage format is a universal software packaging format for all GNU/Linux distros.
• my-first-app_1.0.0_amd64.snap: This is a snap file, another popular format for sandboxed applications.
• linux-unpacked/my-first-app: This is the unpacked build for local testing and custom distributions.

7. For now, double-click on my-first-app 1.0.0.AppImage to run the app. If you get the Would you like to integrate my-first-app with your system dialog, click No.
8. This will be your final output:

Congratulations—you've got your first cross-platform Electron application package up and running on Ubuntu Linux!

Packaging for Windows

Now that you know how to set up build scripts for macOS and Ubuntu Linux, configuring for Windows shouldn't be a problem for you.

As I mentioned earlier, it is possible and also recommended to keep the configuration files for all platforms in a single code repository, inside the package.json file. The build scripts for Windows are shown in the following code:

{
   "scripts": {
    "start": "electron .",
    "build:windows": "electron-builder --win --dir",
    "dist:windows": "electron-builder --win"
  }
}

Both scripts should be familiar to you. The build:windows script creates an unpacked local build for development and testing purposes, while the dist:windows script prepares the application for distribution.

Let's try to build and run the development version of the application:

1. Open the Terminal window in Visual Studio Code, or a Command Prompt tool, and run the following script:

      npm run build:windows

Note that you can build Windows packages with macOS or Ubuntu Linux if you have the Wine tool installed, but I recommend having a virtual machine nearby for testing purposes. It should also be possible to build for Linux on a Windows machine, but you may want to have a real Linux machine for application testing purposes.

2. Once the script exits, you should see the prebuilt application, that is, my-first-app.exe, in the dist/win-unpacked folder.
3. Double-click on the my-first-app.exe file to run the application:

4. We need to use the build:windows script to create a distribution package for testing purposes. Let's check that we can build packages for redistribution:

      npm run dist:windows

5. Check the dist folder once again. You should see the my-first-app Setup 1.0.0.exe installer file alongside the win-unpacked folder:

6. Now, double-click the installer file. The setup wizard should set up the application and automatically launch it.

Congratulations—you've got your first cross-platform Electron application package up and running on Windows 10!