In this section, we are going to learn how to package the Electron application for distribution.

Let's start by installing the electron-builder library and configuring the package scripts:

1. Run the following command to install the library:

npm install -D electron-builder

2. Update the package.json file and include the pack-app and dist-app scripts. Also, provide the homepage address, as shown in the following code:

"homepage": "./",
"scripts": {
    "electron": "electron .",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "pack-app": "electron-builder --dir -c.mac.identity=null",
    "dist-app": "electron-builder"
  },

We are going to use the pack-app script for testing purposes. With the --dir switch, the Electron Builder tool generates the output without actually packaging it for production use. Developers typically use this mode to test the packaging and structure. For production use, you should use the dist-app script.

Don't run the scripts just yet—we still need to configure the project so that we can use the compiled resources (instead of the http://localhost:3000 address) with live reloading for development purposes.

3. Update the package.json file and append the Electron builder configuration, as shown in the following code:

"build": {
    "files": [
      "build/**/*"
    ]
}

4. Install the electron-is-dev library with the following command:

npm install electron-is-dev

This library allows you to detect whether your Electron project is running in development mode or whether the code is being executed by the packaged application.

5. Update the public/electron.js file, as follows:

const { app, BrowserWindow } = require('electron');
const isDev = require('electron-is-dev');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    },
    resizable: false
  });

  win.loadURL(
    isDev
      ? 'http://localhost:3000'
      : 'index.html'
  );
}

app.on('ready', createWindow);

6. Update the public/index.html file and add the following meta element:

<meta
      http-equiv="Content-Security-Policy"
      content="script-src 'self' 'unsafe-inline';"
/>

7. Now, you can create and test the application package by running the following commands:

npm run build
npm run pack-app

For production use, you may need to run the following commands:

npm run build
npm run dist-app

We have successfully prepared the installation packages for the distribution of our Electron application. If you want to find out more about the Electron Builder application, please refer to the official repository: https://github.com/electron-userland/electron-builder.