(226) 377-3114

Ionic + Angular + Electron

How to transform your Ionic Angular project into an Electron app.

Step #1: Start with existing Ionic Angular project

This posts assumes you have already created an Ionic Angular project.

$ ionic start myApp tabs --type=ionic-angular

Step #2: Add electron with npm

Don't forget to be inside your app directory.

$ cd myapp
$ npm install --save-dev electron@latest

Step #3: Add a new electron.js file in the root of your project

And add the code below into the file.

$ touch electron.js

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

let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true


  //uncomment next line to open dev tools

  mainWindow.on('closed', function () {
    mainWindow = null

app.on('ready', createWindow)

//if all windows closed, quit unless on apple / osx
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()

// if no windows when app clicked, create window (apple / osx)
app.on('activate', function () {
  if (mainWindow === null) createWindow()

Step #4: Edit package.json

We need to reference the newly created electron.js file.

  "name": "myapp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "main": "electron.js", //add this line
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "ng build --base-href ./ && electron ." //and this line

Step #5: Run Your App

That's it - now go back to the terminal to run your app.

$ npm run electron

Step #6: Add Electron Forge For Packaging

We need to add the electron forge package to package up the electron app for distribution on Linux / Mac / Windows

$ npm install --save-dev @electron-forge/cli
$ npm exec --package=@electron-forge/cli -c "electron-forge import"

We can now run make to build the app.

$ npm run make

To build for another architecture, you can specify either x64 or arm64 when building. Default is your current architecture.

Note the double --

$ npm run make -- --arch=x64

Step #7: Include a Link to your App Icon

Inside the config section of package.json.

  "config": {
    "forge": {
      "packagerConfig": {
        "icon": "path/to/your/logo.png"
      "makers": [
          //makers here

Step #8: Signing and Notarizing (Mac OS)

Your app works now but gives a scary warning to people trying to install it. To fix this you need to be a member of Apple's developer program ($99 USD per year) so you can sign and upload apps for notarization. Even if you will not be distributing through the app store.

Step #1: Create an App-Specific Password.

Log in at appleid.apple.com and create an app specific password.

It will be in the format abcd-efgh-ijkl-mnop


Step #2: Create a Certificate Signing Request

Open up Keychain Access -> Certificate Assistant -> Request a Certificate from a Certificate Authority

Leave the CA email address blank and save the file to disk.

Step #3: Log in and Create a Certificate

Log in to developer.apple.com and click on 'Certificates, IDs and Profiles'

Then create the proper type of ID for your project. Since I mainly distribute directly to clients I chose the 'Developer ID Application'. 

Now upload the CSR you created earlier.

Finally download the certificate and install it into your keychain by double clicking on it.

Step #4: Modify package.json to include the certificate details

Be sure to replace with your details, including the app password you generated earlier.

"config": {
    "forge": {
      "packagerConfig": {
        "osxSign": {
          "identity": "Developer ID Application: Scott van Heesch (ABC123456)",
          "hardened-runtime": true,
          "entitlements": "entitlements.plist",
          "entitlements-inherit": "entitlements.plist",
          "signature-flags": "library"
        "osxNotarize": {
          "appleId": "[email protected]",
          "appleIdPassword": "abcd-efgh-ijkl-mnop"
      "makers": [
		// your makers here

Step #5: Add entitlements.plist in the root of your project

Add the following code to it.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<!--only add these if you are using the camera and mic-->

Step #6: Run electron forge make command again.

You may see an error but it should continue on and finish successfully.


Step #7: Verify

Move to output directory and test it.


$ xcrun stapler validate 'Your App.app'

Let's work together.

Get in Touch
Copyright © ConvertLion.
Lets Connect!