Menu.setApplicationMenu(menu) menu Menu null; Sets menu as the application menu on macOS. On Windows and Linux, the menu will be set as each window's top menu. Also on Windows and Linux, you can use a & in the top-level item name to indicate which letter should get a generated accelerator. For example, using &File for the file menu would result in a generated Alt-F accelerator that opens the. The menu can be hidden or auto-hidden (like in Slack or VS Code - you can press Alt to show/hide the menu). Relevant methods:- win.setMenu(menu) - Sets the menu as the window’s menu bar, setting it to null will remove the menu bar. (This will remove the menu completly)mainWindow.setMenu(null) - win.setAutoHideMenuBar(hide) - Sets whether the window menu bar should hide itself. Download all supported target platforms and arches of Electron using the installed electron or electron-prebuilt version (and cache the downloads in /.electron) For the darwin build, as an example: build the OS X Foo Bar.app; place Foo Bar.app in foobar/Foo Bar-darwin-x64/ (since an out directory was not specified, it used the current working.
Many of the communities I’m active in have adopted Slack to communicate. Even though Slack has a really sweet web app, I still prefer to use the desktop client for a few reasons.
- Having a native app means that it’s always on without having to keep a browser tab open.
- You keep the ability to alt-tab to it.
- Native notifications – this includes the unread badge count on OS X.
Building a desktop application can be challenging because of the required platform specific knowledge. If the app you’re building needs to run on different platforms your knowledge requirements increase significantly due to the disparate environments.
This is where Electron teleports in to save the day. From the repo:
> The Electron framework lets you write cross-platform desktop applications using JavaScript, HTML and CSS. It is based on Node.js and Chromium and is used in the Atom editor.
List Of Electron Apps
As mentioned above Electron was born and (open) sourced from GitHub’s Atom text editor and has since been used to build Slack, Microsoft’s Visual Studio Code, and much more.
Electron wraps the web technologies we already know and love in a native desktop experience.
In this post we’ll take an existing web-based chat application example that is built using Twilio’s IP Messaging service and modify it to run inside Electron. We’ll also add native OS notifications and drag and drop image uploads.
![Electron set app name in mac bars Electron set app name in mac bars](/uploads/1/2/6/4/126444477/714184577.png)
Setup Our Equipment
Before we dive into the code let’s look at our tools under a microscope.
Electron uses Node.js as a runtime. If you don’t already have Node follow the installation instructions for your platform here.
We’ll also need ngrok installed to make our web server accessible from our local machine. Here is a great resource on setting up and using ngrok if you haven’t yet harnessed it’s magical powers.
Next we’ll need to make sure we have a Twilio account. If you need one you can sign up for a free account here.
Finally, in order to implement drag and drop image uploads we’ll need to use a service that will handle image uploading and hosting. I’ve chosen to use Ospry.io for this because it’s very easy to undertand and use. Sign up for a free account here.
Up and Running with IP Messaging
Before we get started with Electron let’s take a look at the starter app we’ll be using and get it running on its own.
The app has a simple Express server and a single client page. The server is responsible for serving static assets and providing an access token when requested by the client. The client uses the Twilio IP Messaging JavaScript SDK and jQuery to create a very basic chat room.
Electron Mac App
Create a new directory to work in called
electron-fun
and cd
into it. Clone the repo and follow the instructions in the README to get it running.Once you get the app up and running, poke around and familiarize yourself with how the application works and have a gander at the code in
public/index.js
. This file contains all of the logic for the interface and the Twilio IP Messaging JavaScript SDK and it’s where we’ll be implementing our new features.Getting Subatomic
With the web app set up, it’s now time to introduce Electron. Keep the starter app’s server running and open a new terminal.
cd
into the electron-fun
directory, create a new folder named awesome-chat-app
, and cd
into it.Electron Set App Name In Mac Bars
Let’s start off by initializing a new Node.js application with npm and installing the electron-prebuilt package with the following.