Electron Application Menu Working Example

Question

I'm new to Electron and having problems finding a working example of an application menu.

When trying to combine the Quick Start app with the example from the Class: Menu page of the Electron Documentation, nothing seems to happen — chaning the label values has no effect.

Googling raises more questions than it solves — such as, do I need to package my application to effect change in the application menu, or do I need to move my main.js and package.json to $projectRoot/resources/app (and if so, do I need to package it to run it)?

Is there a better way to get the hang of Electron...?

Edit

When I add the below to my app on OSX, the Application menu has one entry — Electron, with one option, Quit:

const electron = require('electron');
var menu = electron.Menu.buildFromTemplate([
    {
        label: 'Electron',
        submenu: [
        {
            label: 'Options',
            click: function() {
                alert('Test');
            }
        }
        ]
    }
]);

electron.Menu.setApplicationMenu(menu);

Answer 1

You don't need to package your app to change the application menu. Check that you're calling Menu.setApplicationMenu() after the ready event is emitted, e.g.

app.on('ready', () => {
  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
})

Answer 2

It is difficult to see whats the prb since you did not provide any code. However, here how this should work: In the main.js do this :

var MenuItem = require('menu-item');

And then make a function createMenu :

global.yourApp = {
        init() {
            whatsApp.createMenu();            
            config.init();
        },

        createMenu() {
            yourApp.menu =
                AppMenu.buildFromTemplate(require('./menu'));
                AppMenu.setApplicationMenu(yourApp.menu);
        }
}

./menu you will have the menu.js file that should look something like this:

    (function(scope) {
        "use strict";

        var template = [
            {
                label: 'Edit',
                submenu: [
                    {
                        label: 'Undo',
                        accelerator: 'CmdOrCtrl+Z',
                        role: 'undo'
                    }
                   ......
              ]
    }]
})(this);