Hiding menu items

There's one more important topic we should touch on when it comes to the conditional visibility of menu items. Besides platform-specific entries, developers usually provide utility functions that are relevant only for local development and debugging.

Let's take Chrome Developer Tools as an example. This is an extremely convenient set of utilities that help you debug code and inspect the layout at runtime. However, you don't want your end users accessing the code when they're using the application in real life. In most cases, it is going to be harmful rather than useful. That's why we're going to learn how to use particular menu items for development but hide them in production mode.

It may be a good idea to clean up the menu a bit first. Perform the following steps to do so:

1. Remove the Debugging menu from the template and only leave the Help entry, as shown in the following code:

      const template = [
        {
          role: 'help',
          submenu: [
            {
              label: 'About Editor Component',
              click() {
                shell.openExternal('https://simplemde.com/');
              }
            }
          ]
        }
      ];

      const menu = Menu.buildFromTemplate(template);

      module.exports = menu;

1. Run the project with npm start and ensure there is no Debugging item in the application menu.

We have already used the process object from Node.js to detect the platform. process also provides access to environment variables by utilizing the process.env object. Each property of this object is a runtime environment variable.

Let's assume that we would like to use extra menus when the DEBUG environment variable is provided. In this case, the application needs to check for process.env.DEBUG.

1. Take a look at the following code to get a better understanding of how to check for environment variables:

      if (process.env.DEBUG) {
        template.push({
          label: 'Debugging',
          submenu: [
            {
              label: 'Dev Tools',
              role: 'toggleDevTools'
            },
      
            { type: 'separator' },
            {
              role: 'reload',
              accelerator: 'Alt+R'
            }
          ]
        });
      }

As you can see, once you have defined the DEBUG environment variable, the application pushes an extra Debugging item to the main application menu. This process is similar to the one we used earlier to add an extra menu item for macOS platforms.

1. Now, let's modify our start script so that we always start in debugging mode for local development and testing:

      {
        "name": "markdown-editor",
        "version": "1.1.0",
        "description": "",
        "main": "index.js",
        
        "scripts": {
          "start": "DEBUG=true electron ."
        }
      }

You can use environment variables with production applications too. However, while you can add some debugging capabilities, please don't hide any security-sensitive features behind these flags.

With the help of environment variables, you can enable or disable certain features in your application. This is excellent since it allows you to have better debugging and testing utilities without confusing your application users with technical and low-level functionalities.

In the next section, we are going to learn how Node.js and Chrome processes can communicate and how menu items can help us send messages between both.