Author: tayyaba

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…

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…

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…

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…

File handling is a very important part of building a desktop application. Almost all desktop apps interact with files. We will create a form in our app that will take as input, a Name and an Email address. This form will be saved to a file and a list will be created that will show…

The User Interface of Electron apps is built using HTML, CSS and JS. So we can leverage all the available tools for front-end web development here as well. You can use the tools such as Angular, Backbone, React, Bootstrap, and Foundation, to build the apps. You can use Bower to manage these front-end dependencies. Install…

We have created a package.json file for our project. Now we will create our first desktop app using Electron. Create a new file called main.js. Enter the following code in it − Create another file, this time an HTML file called index.html. Enter the following code in it. Run this app using the following command − A new window…