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 at runtime in packaged Electron applications. Sr.No Variable & Description 1 GOOGLE_API_KEYElectron includes a hardcoded API key for making requests to Google’s geocoding webservice. Because this API key is included in every version of Electron, it often exceeds its usage quota.To work around this, you can supply your own Google API key in the environment. Place the following code in your main process file, before opening any browser windows that will make geocoding requests −process.env.GOOGLE_API_KEY = ‘YOUR_KEY_HERE’ 2 ELECTRON_RUN_AS_NODEStarts the process as a normal Node.js process. 3 ELECTRON_FORCE_WINDOW_MENU_BAR (Linux Only)Do not use the global menu bar on Linux. Development Variables The following environment variables are intended primarily for development and debugging purposes. Sr.No Variable & Description 1 ELECTRON_ENABLE_LOGGINGPrints Chrome’s internal logging to the console. 2 ELECTRON_ENABLE_STACK_DUMPINGPrints the stack trace to the console when Electron crashes. 3 ELECTRON_DEFAULT_ERROR_MODEShows the Windows’s crash dialog when Electron crashes. To set any of these environment variables as true, set it in your console. For example, if you want to enable logging, then use the following commands − For Windows For Linux Note that you will need to set these environment variables every time you restart your computer. If you want to avoid doing so, add these lines to your .bashrc files.

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 multiple modifiers and key codes, combined by the + character. These accelerators are used to define keyboard shortcuts throughout our application. Let us consider an example and create a shortcut. For this, we will follow the dialog boxes example where we used the open dialog box for opening files. We will register a CommandOrControl+O shortcut to bring up the dialog box. Our main.js code will remain the same as before. So create a new main.js file and enter the following code in it − This code will pop open the open dialog box whenever our main process receives a ‘openFile’ message from a renderer process. Earlier this dialog box popped up whenever the app was run. Let us now limit it to open only when we press CommandOrControl+O. Now create a new index.html file with the following content − We registered a new shortcut and passed a callback that will be executed whenever we press this shortcut. We can deregister shortcuts as and when we do not require them. Now once the app is opened, we will get the message to open the file using the shortcut we just defined. These shortcuts can be made customizable by allowing the user to choose his own shortcuts for defined actions.

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 main.js file as follows − Now that we have set up our main process, let us create the HTML file that will be capturing this content. Create a file called index.html with the following content − The above program will generate the following output − You now have the stream from both your webcam and your microphone. You can send this stream over the network or save this in a format you like. Have a look at the MDN Documentation for capturing images to get the images from your webcam and store them. This was done using the HTML5 getUserMedia API. You can also capture the user desktop using the desktopCapturer module that comes with Electron. Let us now see an example of how to get the screen stream. Use the same main.js file as above and edit the index.html file to have the following content − We have used the desktopCapturer module to get the information about each open window. Now you can capture the events of a specific application or of the entire screen depending on the name you pass to the above if statement. This will stream only that which is happening on that screen to your app. You can refer to this StackOverflow question to understand the usage in detail.

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 webview doesn’t have same permissions as your web page. This keeps your app safe from the embedded content. All interactions between your app and the embedded page will be asynchronous. Let us consider an example to understand the embedding of an external webpage in our Electron app. We will embed the tutorialspoint website in our app on the right side. Create a new main.js file with the following content − Now that we have set up our main process, let us create the HTML file that will embed the tutorialspoint website. Create a file called index.html with the following content − Run the app using the following command − The above command will generate the following output − The webview tag can be used for other resources as well. The webview element has a list of events that it emits listed on the official docs. You can use these events to improve the functionality depending on the things that take place in the webview. Whenever you are embedding scripts or other resources from the Internet, it is advisable to use webview. This is recommended as it comes with great security benefits and does not hinder normal behaviour.

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 an app that has a button which will generate a notification every time we click on this button. Create a new main.js file and enter the following code in it − Let us now create our webpage and script that will trigger the notification. Create a new index.html file with the following code − The notify method allows us to pass it an objectwith information like the title, message, thumbnail, etc. which help us customize the notification. We can also set some event listeners on the notification. Now, run the app using the following command − When you click on the button that we created, you will see a native notification from your operating system as shown in the following screenshot − We have also handled the events wherein, the user clicks the notification or the notification times out. These methods help us make the app more interactive if its running in the background.

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 it. Have a png file ready to use for the system tray icon. After having set up a basic browser window, we will create a new index.html file with the following content − We created the tray using the Tray submodule. We then created a menu using a template and further attached the menu to our tray object. Run the application using the following command − $ electron ./main.js When you run the above command, check your system tray for the icon you used. I used a smiley face for my application. The above command will generate the following output −

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 in the renderer process, you need the remote module. We will come across this when we create a context menu. Now, let us create a new main.js file for the main process − We are building a menu from a template here. This means that we provide the menu as a JSON to the function and it will take care of the rest. Now we have to set this menu as the Application menu. Now create an empty HTML file called index.html and run this application using − On the normal position of application menus, you will see a menu based on the above template. We created this menu from the main process. Let us now create a context menu for our app. We will do this in our HTML file − We imported the Menu and MenuItem modules using the remote module; then, we created a menu and appended our menuitems to it one by one. Further, we prevented the default action of right-click in chromium and replaced it with our menu. The creation of menus in Electron is a very simple task. Now you can attach your event handlers to these items and handle the events according to your needs.

It is very important for any app to be a user-friendly one. As a result you should not create dialog boxes using alert() calls. Electron provides a pretty good interface to accomplish the task of creating dialog boxes. Let us have a look at it. Electron provides a dialog module that we can use for displaying native system dialogs for opening and saving files, alerting, etc. Let us directly jump into an example and create an app to display simple textfiles. Create a new main.js file and enter the following code in it − This code will pop open the open dialog box whenever our main process recieves a ‘openFile’ message from a renderer process. This message will redirect the file content back to the renderer process. Now, we will have to print the content. Now, create a new index.html file with the following content − Now whenever we run our app, a native open dialog box will pop up as shown in the following screenshot − Once we select a file to display, its contents will be displayed on the app window − This was just one of the four dialogs that Electron provides. They all have similar usage though. Once you learn how to do it using showOpenDialog, then you can use any of the other dialogs. The dialogs having the same functionality are −

Electron provides us with 2 IPC (Inter Process Communication) modules called ipcMain and ipcRenderer. The ipcMain module is used to communicate asynchronously from the main process to renderer processes. When used in the main process, the module handles asynchronous and synchronous messages sent from a renderer process (web page). The messages sent from a renderer will be emitted to this module. The ipcRenderer module is used to communicate asynchronously from a renderer process to the main process. It provides a few methods so you can send synchronous and asynchronous messages from the renderer process (web page) to the main process. You can also receive replies from the main process. We will create a main process and a renderer process that will send each other messages using the above modules. Create a new file called main_process.js with the following contents − Now create a new index.html file and add the following code in it. Run the app using the following command − The above command will generate the following output − It is recommended not to perform computation of heavy/ blocking tasks on the renderer process. Always use IPC to delegate these tasks to the main process. This helps in maintaining the pace of your application.

We used a node module, fs, in the previous chapter. We will now look at some other node modules that we can use with Electron. OS module Using the OS module, we can get a lot of information about the system our application is running on. Following are a few methods that help while the app is being created. These methods help us customize the apps according to the OS that they are running on. Sr.No Function & Description 1 os.userInfo([options])The os.userInfo() method returns information about the currently effective user. This information can be used to personalize the application for the user even without explicitly asking for information. 2 os.platform()The os.platform() method returns a string identifying the operating system platform. This can be used to customize the app according to the user OS. 3 os.homedir()The os.homedir() method returns the home directory of the current user as a string. Generally, configs of all users reside in the home directory of the user. So this can be used for the same purpose for our app. 4 os.arch()The os.arch() method returns a string identifying the operating system CPU architecture. This can be used when running on exotic architectures to adapt your application for that system. 5 os.EOLA string constant defining the operating system-specific end-ofline marker. This should be used whenever ending lines in files on the host OS. Using the same main.js file and the following HTML file, we can print these properties on the screen − Now run the app using the following command − The above command will generate the following output − Net Module The net module is used for network related work in the app. We can create both servers and socket connections using this module. Generally, the use of wrapper module from npm is recommended over the use of the net module for networking related tasks. The following tables lists down the most useful methods from the module − Sr.No Function & Description 1 net.createServer([options][, connectionListener])Creates a new TCP server. The connectionListener argument is automatically set as a listener for the ‘connection’ event. 2 net.createConnection(options[, connectionListener])A factory method, which returns a new ‘net.Socket’ and connects to the supplied address and port. 3 net.Server.listen(port[, host][, backlog][, callback])Begin accepting connections on the specified port and host. If the host is omitted, the server will accept connections directed to any IPv4 address. 4 net.Server.close([callback])Finally closed when all connections are ended and the server emits a ‘close’ event. 5 net.Socket.connect(port[, host][, connectListener])Opens the connection for a given socket. If port and host are given, then the socket will be opened as a TCP socket. The net module comes with a few other methods too. To get a more comprehensive list, see this. Now, let us create an electron app that uses the net module to create connections to the server. We will need to create a new file, server.js − Using the same main.js file, replace the HTML file with the following − Run the server using the following command − Run the application using the following command − The above command will generate the following output − Observe that we connect to the server automatically and automatically get disconnected too. We also have a few other node modules that we can be used directly on the front-end using Electron. The usage of these modules depends on the scenario you use them in.