Configuring the application name in the menu

You may have already noticed the Electron label in the main application menu. This has happened because we launched a generic Electron shell to run and test our application with the npm start command. As you may recall, we defined the start command like so:

{
  "name": "markdown-editor",
  "version": "1.1.0",
  "main": "index.js",

  "scripts": {
    "start": "electron ."
  },

  "devDependencies": {
    "electron": "^7.0.0",
    "electron-builder": "^21.2.0"
  },
  "dependencies": {
    "simplemde": "^1.11.2"
  }
}

But when you package the application for distribution, it is going to have its own version of Electron embedded in it. In that case, the name of your application renders as expected.

Let's test the package with the macOS build:

1. Append the build:macos command to the scripts section of the package.json file:

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

1. Now, execute the npm run build:macos command in the Terminal to create a quick package for local development and testing.
2. Next, go to the dist/mac folder and run the markdown-editor application by double-clicking on its icon:

1. The code in the menu.js file now takes the following values from the package.json settings:

      {
        "name": "markdown-editor",
        "version": "1.0.0"
      }

The same behavior applies to the application version. When you run your project in testing mode, the About box will show the Electron framework version. For the packaged application, however, you should see the correct value.