In this article I’ll show you how to create your first desktop application using Electron Framework.
A bit of theory. Initially, Electron was designed for Atom editor by GitHub, Inc., while now it is used by major companies such as Microsoft, Facebook, Slack and Docker.
Electron Framework identifies two types of processes:
- The Main Process: The input point of application; the file that will be executed every time the application is started. Normally, this file declares various windows of the app and if necessary it can define the global event listeners via IPC module.
- The Renderer Process: The controller for application window, each window creates its own renderer process.
Now, let’s move to practice. First, you need to install electron module:
Here is the standard structure of Electron applications:
Package.json contains information about the project such as name, version, dependencies etc. Its structure is the same as that of Node modules. Here is a typical example of it:
The script which is defined as the main will be executed when the application starts, working in the main process. If the main field is available, Electron tries to run index.js. For more information about the structure of package.json can be found in the npm documentation.
Main.js usually creates the application’s main window and manages system events. A typical example of it is:
Finally, here goes index.html. It is a page to be displayed in the application window:
To run the application, command npm start is used.
The use of Electron development of cross-platform applications becomes simple and enjoyable.