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
    }
  })

  mainWindow.loadFile(__dirname+'/www/index.html');

  //uncomment next line to open dev tools
  //mainWindow.webContents.openDevTools()   

  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.

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

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">
  <dict>
    <key>com.apple.security.cs.allow-jit</key>
    <true/>
    <key>com.apple.security.cs.debugger</key>
    <true/>
  </dict>
</plist>
<!--only add these if you are using the camera and mic-->
<key>com.apple.security.device.audio-input</key>
<true/>
<key>com.apple.security.device.camera</key>
<true/>

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'