Category: Electron

We have used the following resources to learn more about Electron. We have referred to these while creating this tutorial. The most important resource is the Electron documentation. The Documentation has extensive coverage of almost all features and quirks of the framework. They are alone enough to make your way through building an app. There are also…

Packaging and distributing apps is an integral part of the development process of a desktop application. Since Electron is a cross-platform desktop application development framework, packaging and distribution of apps for all the platforms should also be a seamless experience. The electron community has created a project, electron-packager that takes care of the same for us. It…

We have two processes that run our application – the main process and the renderer process. Since the renderer process is the one being executed in our browser window, we can use the Chrome Devtools to debug it. To open DevTools, use the shortcut “Ctrl+Shift+I” or the <F12> key. You can check out how to…

Environment Variables control application configuration and behavior without changing code. Certain Electron behaviors are controlled by environment variables because they are initialized earlier than the command line flags and the app’s code. There are two kinds of environment variables encoded in electron – Production variables and Development variables. Production Variables The following environment variables are intended for use…

We typically have memorized certain shortcuts for all the apps that we use on our PC daily. To make your applications feel intuitive and easily accessible to the user, you must allow the user to use shortcuts. We will use the globalShortcut module to define shortcuts in our app. Note that Accelerators are Strings that can contain…

Audio and video capturing are important characteristics if you are building apps for screen sharing, voice memos, etc. They are also useful if you require an application to capture the profile picture. We will be using the getUserMedia HTML5 API for capturing audio and video streams with Electron. Let us first set up our main process in…

The webview tag is used to embed the ‘guest’ content like web pages in your Electron app. This content is contained within the webview container. An embedded page within your app controls how this content will be displayed. The webview runs in a separate process than your app. To ensure security from malicious content, the…

Electron provides native notifications API only for MacOS. So we are not going to use that, instead we’ll be using a npm module called node-notifier. It allows us to notify users on Windows, MacOS and Linux. Install the node-notifier module in your app folder using the following command in that folder − Let us now create…

System tray is a menu outside of your application window. On MacOS and Ubuntu, it is located on the top right corner of your screen. On Windows it is on the bottom right corner. We can create menus for our application in system trays using Electron. Create a new main.js file and add the following code to…

The desktop apps come with two types of menus – the application menu(on the top bar) and a context menu(right-click menu). We will learn how to create both of these in this chapter. We will be using two modules – the Menu and the MenuItem modules. Note that the Menu and the MenuItem modules are only available in the main process. For using these modules…