Category: Electron
-
System Dialogs
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…
-
Inter Process Communication
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…
-
Native Node Libraries
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
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…
-
Building UIs
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…
-
Hello World
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…
-
How Electron Works
Electron takes a main file defined in your package.json file and executes it. This main file creates application windows which contain rendered web pages and interaction with the native GUI (graphical user interface) of your Operating System. As you start an application using Electron, a main process is created. This main process is responsible for interacting with the native…
-
Installation
To get started with developing using the Electron, you need to have Node and npm(node package manager) installed. If you do not already have these, head over to Node setup to install node on your local system. Confirm that node and npm are installed by running the following commands in your terminal. The above command will generate…
-
Overview
Why Electron? Electron enables you to create desktop applications with pure JavaScript by providing a runtime with rich native (operating system) APIs. This does not mean Electron is a JavaScript binding to graphical user interface (GUI) libraries. Instead, Electron uses web pages as its GUI, so you can also see it as a minimal Chromium…