electron : In simple hello world app, not able to view the default menu bar - electron

Question

I am new to electron and trying to run the simple hello world.
In that "Electron" app, its menu bar should show up as a normal application with generic options, such as edit, view, window, help. But I am not able to see it. My OS system is macOS High Sierra.
I simple hello world code I have taken from the following link.
https://www.tutorialspoint.com/electron/electron_hello_world.htm
https://www.youtube.com/watch?v=RL305ldfzm8&list=PLC3y8-rFHvwiCJD3WrAFUrIMkGVDE0uqW&index=2
Could any one help?

Answer 1

Adding this work for me
const { isMac } = electron;

Answer 2

The menu shown in the tutorial is for windows system. The default menu is shown if no menu is set using Menu.setApplicationMenu(menu). Sets menu as the application menu on macOS. On Windows and Linux, the menu will be set as each window's top menu.. If you want to show that default menu use the following.
Use the https://electronjs.org/docs/api/menu#menusetapplicationmenumenu link for reference
const { app, Menu } = require('electron')
const template = [
// { role: 'appMenu' }
...(process.platform === 'darwin' ? [{
label: app.getName(),
submenu: [
{ role: 'about' },
{ type: 'separator' },
{ role: 'services' },
{ type: 'separator' },
{ role: 'hide' },
{ role: 'hideothers' },
{ role: 'unhide' },
{ type: 'separator' },
{ role: 'quit' }
]
}] : []),
// { role: 'fileMenu' }
{
label: 'File',
submenu: [
isMac ? { role: 'close' } : { role: 'quit' }
]
},
// { role: 'editMenu' }
{
label: 'Edit',
submenu: [
{ role: 'undo' },
{ role: 'redo' },
{ type: 'separator' },
{ role: 'cut' },
{ role: 'copy' },
{ role: 'paste' },
...(isMac ? [
{ role: 'pasteAndMatchStyle' },
{ role: 'delete' },
{ role: 'selectAll' },
{ type: 'separator' },
{
label: 'Speech',
submenu: [
{ role: 'startspeaking' },
{ role: 'stopspeaking' }
]
}
] : [
{ role: 'delete' },
{ type: 'separator' },
{ role: 'selectAll' }
])
]
},
// { role: 'viewMenu' }
{
label: 'View',
submenu: [
{ role: 'reload' },
{ role: 'forcereload' },
{ role: 'toggledevtools' },
{ type: 'separator' },
{ role: 'resetzoom' },
{ role: 'zoomin' },
{ role: 'zoomout' },
{ type: 'separator' },
{ role: 'togglefullscreen' }
]
},
// { role: 'windowMenu' }
{
label: 'Window',
submenu: [
{ role: 'minimize' },
{ role: 'zoom' },
...(isMac ? [
{ type: 'separator' },
{ role: 'front' },
{ type: 'separator' },
{ role: 'window' }
] : [
{ role: 'close' }
])
]
},
{
role: 'help',
submenu: [
{
label: 'Learn More',
click () { require('electron').shell.openExternalSync('https://electronjs.org') }
}
]
}
]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)