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.

1. 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

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

1. Double-click on the icon to run your simple Electron application locally.
2. 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:

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