Using native menus


#1

I have the basic Hello world app running and am trying to add native menus, using the sample code at https://github.com/atom/electron/blob/master/docs/api/menu.md

The first line of the code var remote = require('remote'); is throwing an error because I’m assuming I don’t have the “remote” module installed. npm install remote adds a module, but it crashes and I’m not even sure that’s the correct module?

Does anybody have any info on getting started with native menus or could offer me any suggestions? Thanks.


#2

Note: remote is an atom-shell module that is present in the renderer process scope. It allows you to manipulate the browser or main process.


#3

Does anybody know how to get the remote module installed in a project, or is it located somewhere in the electron-prebuilt or atom-shell project?

var remote = require('remote'); is causing this error (which is basically the same error that you get when a module isn’t installed):

“Error opening app - The app provided is not a valid electron app, please read the docs on how to write one: https://github.com/atom/electron/tree/master/docs


#4

I figured it out - basically the example using “remote” simply doesn’t work. To include the menu libs, just use:

var Menu = require('menu'); var MenuItem = require('menu-item');
The second example on the menu page works if you require the libs like this.


#5

@jasonhinkle The example does work, if you follow the standard architecture and write the majority of your code from the Renderer process. All Electron apps consist of two processes, the Main process and the Renderer process. Only the Renderer process has the remote library. You can read about them here:

Also check my posts on this topic, for more information about how Atom separates the code:


Review Request of Main & Renderer Separation with ref to Menu & Dialog modules
#6

I was confused the same, even after reading the docs.

main.js is run in the main process (makes sense), and Chromium (with application js) is in the renderer process.

So if want to set up an application menu, this would be a main process task, right?

The menu.md docs are a bit confusing here, I think - I don’t usually want a web page modifying the menu, which is what the examples in menu.md steer me towards (“creating a menu dynamically in a web page”).

For an application menu, the creation code is in main.js, which means remote isn’t needed, which means require(“menu”) works.

var template = [ // as per example in the docs
Menu = require("menu");
menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

That’s what I got to work. Newbie here, so corrections welcome.