How to turn an Angular App into a desktop app with Electron

Home / How to turn an Angular App into a desktop app with Electron

programming code

A while back I had to write an app to parse data from an old billing system to be used with a new banks credit card processing system via batch upload. Most of what I do is either on Linux systems and only need to be run directly by me, or are web applications of one form or another, so a standalone application for our billing department was something really new — well not really new, but something I haven’t done in a very, very long time and not with web technologies — and exciting.

At the time I was completely obsessed with Angular and wanted to use it for everything, so of course, I chose it to write the app and after some research, decided on ElectronJS to do the stand alone part of it.

Today we got notice from the bank that the format was going to be changing due to changes in how credit cards have to be handled, so I opened up the code to take a look and refresh my memory only to find that I had completely forgotten how everything worked with Electron. So I fired up a new Angular app and reverse engineered my own code, to record here for posterity.

Start an Angular project and install Electron.

$ ng new electron-app
$ cd electron-app
$ npm install --save electron
$ npm install -D electron-packager

Electron’s main configuration.

// main.js

const { app, BrowserWindow } = require('electron');

let win;

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 900, 
    height: 900,
    backgroundColor: '#ffffff',
    icon: `file://${__dirname}/dist/electron-app/assets/logo.png`


  // uncomment below to open the DevTools.
  // win.webContents.openDevTools()

  // Event when the window is closed.
  win.on('closed', function () {
    win = null;

// Create window on electron initialization
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On macOS specific close process
  if (process.platform !== 'darwin') {

app.on('activate', function () {
  // macOS specific close process
  if (win === null) {

Update files to use Electron

// package.json

  "name": "electron-app",
  "version": "0.1.0",
  "main": "main.js", // <-- ADD THIS
// package.json
  "scripts": {
    "electron": "electron .",                       // <-- ADD THIS
    "package": "electron-packager .",               // <-- ADD THIS
<!-- index.hmtl -->
<base href="./">

Build and run the application.

$ ng build
$ npm run electron

Build the final, distributable package.

$ ng build --production
$ npm run package

This will create a directory name like electron-app-win32-x64 (or similar depending on your platform), containing all the necessary files to run and an electron-app.exe

, ,

About Author

about author


Jack of all trades. I.T. edition. Programmer, Systems Administrator, DevOps and whatever else comes up.