The Electron Framework

Electron is an Open-Source Framework that allows you to build Cross-Platform Desktop Applications with Web Technologies (HTML, CSS, and JavaScript).

You have access to native components, plus the ability to configure automatic updates, crash reporting, debugging and profiling.

It uses NodeJS and Chromium to run the application. Therefore, web development skills are completely transferable to an Electron application.

All you need is a little HTML, CSS and JavaScript to get started.

Electron was originally built for Githubs’ Atom Editor

Electron Architecture

In Electron, there are two main processes: The main process and the renderer process. The GUI is created by the main process and involves the creation of web pages through the multi-processing capabilities of Chromium.

Each Chromium Web Process runs its’ own renderer process. The renderer instances, created as BrowserWindow instances, are isolated and only concerned with its own web page.

Native Resources can be handled through the NodeJS API which, unlike in web applications, is accessible to the application to create lower-level operation system interactions. You can call Native GUI API’s through communication with the main process using ipcRenderer and ipcMain to send and receive messages.

What Electron Forge Offers

Electron-Forge is a complete tool that handles the creation of distributables designed to work with multiple systems, in addition to installing and publishing to a server.

Plugins

Electron Forge’s plugins allow extensibility of the core Electron Forge functionality.

Plugin’s such as the Webpack Plugin plugin-webpack , allows the use of webpack to build the application, with the option to enable hot-reloading and advanced bundle configuration.

There is also the plugin-auto-unpack-natives plugin, which will automatically add native modules in the node_modules . This reduces disk consumption and loading times on users’ machines.

You can even write your own plugins

Templates

Electron Forge’s Templates allow you to integrate existing web technologies such as the Webpack template (which uses the webpack plugin) and the TypeScript template, which provides you with a basic project configuration in TypeScript. The TypeScript template provides you with the required tsconfig.json file to transpile TypeScript files into JavaScript.

The TypeScript-Webpack Plugin typescript-webpack combines the webpack template (using the webpack plugin) with the typescript template (using the typescript plugin).

This is the template that we will use.

Makers

Electron Forge’s Makers Tool takes your packaged application and generates platform-specific distributables such as .dmg (macOS) and .exe (Windows).

Each Maker can have a platform-specific maker config, specifying which platforms to run for.

Publishers

Electron Forge Publishers take the artifacts that you create with a Maker, then send to an update server (to use as updates) or to a service (such as an S3 Bucket) for distribution. You can configure Publishers with platform specific instructions.

The Publishers default to publish to ALL platforms so you don’t have to specify a platform if you want the default behaviour.

Let’s Start Building 🚀

Prerequisites

Must have NodeJS & TypeScript installed.

installed. Must have a package manager, such as npm or yarn, installed.

installed. I’ll be using Node version 10.15.3 .

Install Electron & TypeScript Globally

$ npm i typescript electron -g

Let’s create a project

We will be using the typescript-webpack template to give us the necessary files to start using TypeScript and Webpack together.

$ npx create-electron-app electron-demo --template=typescript-webpack

If all goes well

If this does not succeed, make sure you have installed everything in prerequisites.

The generated files

The baseline project has now been created using the template.

As you can see from the project structure, the essential files have been automatically created with the typescript + webpack template.

There are separate configuration files for the main and renderer process: webpack.main.config.js and webpack.renderer.config.js respectively.

The TypeScript files that have been included in the tsconfig.json file.

This file will handle transpiling TypeScript into JavaScript during the build process, and tslint.json is used for linting TypeScript code for errors & recommendations using tslint.

The template will also generate the types .d file, making use of the @electron-forge/plugin-typescript package to use types (TypeScript).