ElectronJS and AngularJS under the hood

6 min readMar 5, 2021

Electron is an open source cross-platform-desktop-application-development framework which uses Javascript and is maintained and developed by GitHub. It puts together the Chromium V8 engine and NodeJS environment to reuse Javascript code on multiple Operating Systems. Chromium provides high compatibility with all kinds of web applications based on web technologies like NodeJS, ReactJS, AngularJS etc.

How does an Electron application work?

The entry point of an Electron application is the main file (usually main.js) referred to in package.json, which uses the browserWindow API of Electron to add a new browser window, where the bundled html file is rendered.

What is the “browserWindow”?

The browserWindow is the Chromium window, similar to the Chrome web browser window. It provides a GUI to interact with the Operating System and can load files.
An electron app consists of one main process and can have several renderer processes.

What is the “main process”?

The main process is responsible for interaction with the Operating system, handling browserWindow instances, and managing/controlling all renderer processes.

What is the “renderer process”?

A renderer process is a child process where a single browserWindow runs. Whenever a new browser window instance is created, Electron spawns a new process thread in the operating system, which is known as the electron renderer process.
The renderer process cannot directly interact with the Operating system. However, it can request the main process to do so, with the help of Inter-Process Communication (ipc).

How is the “inter process communication” implemented?

The inter process communication can be implemented by using the ipcMain and ipcRenderer modules of the electron api, or the remote module.

What are “ipcMain” and “ipcRenderer”?

ipcMain module is used to emit messages(synchronous or asynchronous) from the main process to the renderer processes, and handle message requests sent from the renderer process to the main process. Similarly, the renderer process uses the ipcRenderer module to emit and receive messages from the main process.

What is the “remote module”?

The remote module allows a renderer process to invoke GUI related methods which can only be used by the main process.

ELECTRON STRUCTURE

The main process manages and controls all renderer processes. Each renderer process handles one browserWindow. When a browserWindow instance is destroyed, the renderer process handling it is also destroyed.

How does an Angular-Electron application work?

An Angular-Electron application uses Angular as the front-end framework with NodeJS support and runs inside an Electron chromium web browser.

What happens when you use “ng build — prod && electron .”?

The angular application is bundled and runs inside the Electron Chromium window.

“.” represents → Electron runs in the root directory

“ng build — prod” represents → Angular build.

How does an Angular application work?

The angular.json/angular-cli.json file contains all the paths, configurations and information required by the angular webpack builder to build the Angular project.
The “options” object in the angular.json file and the webpack configuration in the tsconfig.json file have a reference to the main file(main.ts) which is the entry point for the angular application.
The main file bootstraps a main Module (usually called AppModule) by default, which tells the builder to bootstrap the application. Further, the AppModule bootstraps the main Component (usually called AppComponent). The AppComponent interacts with the bundled HTML file and serves it with application data.

(Main.ts → AppModule → AppComponent → HTML file)

Once all modules, components, html files are configured and known to Angular, the index.html file is called(inside “src” folder). The compiler dynamically adds all the javascript files at the end of the index.html file. Once all of these components are known, the html file calls the root component i.e app-root (component selector for AppComponent). The root component is defined in app.components.ts which targets app.component.html.

How does “electron .” work?

The “.” represents that Electron is running in the root directory.

Once the index.html file is ready, Electron renders this compiled index.html file (as mentioned in the main.js loadURL() function).

Packaging an Electron application

Once the application is up and running, it needs to be packaged and rebranded for distribution. These packages are platform specific and use distinct file types for the purpose. So there is a need to create different packages for different platforms. For instance, there should be a specific package for Windows, one for Linux and another for MacOS. This can be done efficiently by a number of third party tools available:

Electron packager — Node.js library to efficiently package applications into OS-specific bundles.
Electron builder — Node.js library to package applications with multiple support features like auto updates, two package.json structure support, code signing, Proton Native etc.
Electron forge — Complete build tool for Electron applications. Uses Electron packager under the hood.

Creating application packages with Electron packager

Electron runs and packages bundles for Windows, MacOs, Linux. Follow the given steps to create electron project bundles with Electron-packager:

Add the following scripts to package.json:

“package-mac”: “electron-packager . — overwrite — platform=darwin — arch=x64 — icon=assets/icons/mac/icon.icns — prune=true — out=release-builds”,
“package-win”: “electron-packager . electron-tutorial-app — overwrite — asar=true — platform=win32 — arch=ia32 — icon=assets/icons/win/icon.ico — prune=true — out=release-builds — version-string.CompanyName=CE — version-string.FileDescription=CE — version-string.ProductName=\”Electron Tutorial App\””,
“package-linux”: “electron-packager . electron-tutorial-app — overwrite — asar=true — platform=linux — arch=x64 — icon=assets/icons/png/1024x1024.png — prune=true — out=release-builds”

Optional: Replace “electron-tutorial-app” (in package-win and package-linux) with the name you want for the packaged application name and ProductName with the name of your application in package-win.

Add application icons in a new folder assets/icons-> mac ( .icns file for mac), assets/icons-> png (.png file for linux), assets/icons-> win (.ico file for windows)
Now you can run the following commands in the terminal according to the os package you want:

npm run package-mac
npm run package-win
npm run package-linux

Creating Installers for packaged application

Once the Electron application is packaged, installers for different operating systems are needed for distributing the packaged application on local systems. Npm provides packages to create installers for Windows, MacOS and Linux. Several tools are available for the same.