Native Menus not showing OS X Electron

Question

I used the electron-quick-start to create an Electron app, and I want the only native menu to show to be the 'Edit' menu, with the usual suspects inside.

However, after searching and exhausting all relevant Google results for 'electron menu not working', I'm at a loss.

My current main.js file:

const {app, Menu, BrowserWindow} = require('electron')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;

app.setName('mathulator');

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 900, height: 550})

  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/index.html`)

  // In this file you can include the rest of your app's specific main process
  // code. You can also put them in separate files and require them here.

  const template = [
    {
        label: 'Mathulator',
        submenu: [
            {
                role: 'quit'
            }
        ]
    },
    {
      label: 'Edit',
      submenu: [
        {
          role: 'undo'
        },
        {
          role: 'redo'
        },
        {
          type: 'separator'
        },
        {
          role: 'cut'
        },
        {
          role: 'copy'
        },
        {
          role: 'paste'
        },
        {
          role: 'pasteandmatchstyle'
        },
        {
          role: 'delete'
        },
        {
          role: 'selectall'
        }
      ]
    }
   ]

  mainWindow.setMenu(Menu.buildFromTemplate(template))

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow()
  }
})

I've also packaged it up with electron-packager, to no avail.

I'm running it in the main.js file, which from what I can gather from the masses of either vague or convoluted information around the web, is the main process and therefore one in which I should create the menus.

I also tried doing it in render.js, which I saw suggested. To no avail. It'll either show up with the default electron-quick-start menu, or just a simple menu named after the app, containing one item labelled 'Quit'.

What might I be doing wrong, and what might I have misunderstood from the available information?

---

Edit: I actually attached the wrong file, tried using Menu.setApplicationMenu() the first time, like so:

const {app, Menu, BrowserWindow} = require('electron')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;

app.setName('mathulator');

function createWindow () {
    // Create the browser window.
    mainWindow = new BrowserWindow({width: 900, height: 550});

    // and load the index.html of the app.
    mainWindow.loadURL(`file://${__dirname}/index.html`);

    // Emitted when the window is closed.
    mainWindow.on('closed', function () {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow = null;
    });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function () {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
        app.quit();
    }
})

app.on('activate', function () {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (mainWindow === null) {
        createWindow();
    }
})

const template = [
    {
        label: 'Mathulator',
        submenu: [
            {
                role: 'quit'
            }
        ]
    },
    {
        label: 'Edit',
        submenu: [
            {
                role: 'undo'
            },
            {
                role: 'redo'
            },
            {
                type: 'separator'
            },
            {
                role: 'cut'
            },
            {
                role: 'copy'
            },
            {
                role: 'paste'
            },
            {
                role: 'pasteandmatchstyle'
            },
            {
                role: 'delete'
            },
            {
                role: 'selectall'
            }
        ]
    }
];

Menu.setApplicationMenu(Menu.buildFromTemplate(template));

Answer 1

The issue here is that BrowserWindow.setMenu() is only available on Windows and Linux. On macOS you should use Menu.setApplicationMenu().

Answer 2

Note that on OSX the menu is not on the window itself but on the top of dosktop.

I lost bunch of time trying to troubleshoot why it was not showing up.