Building Cross-platform Desktop Apps with Electron

with No Comments

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 allows you to create cross-platform applications using HTML, CSS and JavaScript. It includes Node.js, which is oriented to the desktop, but not to the web server and the Chromium browser, which is controlled by the engine V8. Electron uses web pages as an interface for interaction with the user that allows you to design any of the UI-elements.

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:

your-app/

├── package.json

├── main.js

└── index.html

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.

Leave a Reply