Best Way to Convert Angular 10 to Desktop App Using ElectronJS

In this tutorial, we will see what is the Best Way to Convert Angular 10 to Desktop App Using ElectronJS. Other than the PWA (Progressive Web App) we can also convert the angular app to an actual desktop app using the ElectronJS library.

Angular 10 to Desktop App Using ElectronJS

Using Electron we can easily build desktop apps, but also for all platforms such as macOS, Linux, and Windows with basic technologies like (HTML, CSS, and JavaScript).

Behind the scenes (How it works?)

ElectronJS uses Chromium for the UI rendering and Node.js for accessing the filesystem. Electron creates a desktop shell for a web application, we can use any kind of front-end JavaScript framework to develop desktop apps.
And our compiled version of angular will be Pure HTML, CSS and, JavaScript.

So in this article, we will create a basic angular application and will convert the compiled version of angular to a desktop application using ElectronJS

Installation

The first thing will make sure we have angular CLI installed globally.

npm i -g @angular/cli

The next Thing would be doing is creating an angular app and install the ElectronJS as dev dependencies.

# Create New App
ng new electron-app

# Go To That Folder
cd electron-app/

# Install ElectronJS
npm i -D electron@latest

Setting Up Electron Entry File

The next thing will do is create a main.js file in the root directory of our project. This file will be the main entry point for our Electron app and will contain the main API for the desktop app.

const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");

let win;
function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });
  // load the dist folder from Angular
  win.loadURL(
    url.format({
      pathname: path.join(__dirname, '/dist/index.html'), // compiled verion of our app
      protocol: "file:",
      slashes: true
    })
  );
  // The following is optional and will open the DevTools:
  // win.webContents.openDevTools()
  win.on("closed", () => {
    win = null;
  });
}
app.on("ready", createWindow);
// on macOS, closing the window doesn't quit the app
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

The next thing that will do is update the package.json file so that it can look for our Electron File as the main entry point.

{
  "name": "electron-app",
  "version": "0.0.1",
  "main": "main.js",
  ...
}

Also, we will add a new NPM script which will first create a build and then launch the desktop application from the dist folder.

{
  "scripts": {
   "electron": "ng build --base-href ./ && electron .",
   ...
  }
 ...
}

And finally, from the angular.json let reset the build directory as we have set /dist/index.html in our main.js file.

...,
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist",

Note:
In case you’re using a version of Angular prior to v6, you’ll instead want to make the change in your project’s angular-cli.json under an outDir key.

Launching the App 🚀

We can start the app using the electron npm script we have created.

npm run electron

And you can see a window appear with the Angular application contained within!