Build a Desktop Application with Ionic 3 and Electron

In a previous post I walked you through the steps I followed when building a Hybrid Mobile App using version 3 of the Ionic Framework and then running it as a desktop application using Electron.

In this post, I'll walk you through the steps I followed when packaging that Hybrid Mobile App (Big Top) as a desktop application using electron-builder.

electron-builder

To quote electron-builder's README.md:

A complete solution to package and build a ready for distribution Electron app for macOS, Windows and Linux with “auto update” support out of the box.

We'll install electron-builder as a development dependency using npm:

npm install electron-builder --save-dev

We also need to install Electron as a development dependency:

npm install electron --save-dev

package.json

We need to update package.json as follows:

...

"scripts": {
  ...
  "pack": "electron-builder --dir",
  "dist": "electron-builder"
},

...

"build": {
  "appId": "org.robferguson.BigTop",
  "files": [
    "electron/main.js",
    "www/**/*"
  ],
  "mac": {
    "category": "productivity"
  }
}

...

Package your application

First we'll make sure our project is up to date:

ionic build --prod

Note: By default the build task produces dev builds (a build that does not include Ahead of Time (AoT) compilation or minification). To force a prod build you need to use the --prod command line flag.

Now we're ready to package the application:

npm run dist

You should see output like:

> BigTop@1.0.0 dist /Users/robferguson/workspace/Robinyo/big-top
> electron-builder

electron-builder 19.45.1
No native production dependencies
Packaging for darwin x64 using electron 1.7.9 to dist/mac
Building macOS zip
Building DMG

If everything works as expected electron-builder will create a /dist directory:

├── /big-top
    └── /dist
        ├── BigTop-1.0.0.dmg
    └── /electron
        ├── main.js
    └── /node_modules            - Packages managed by npm
    └── /resources               - Placeholder resources
    └── /src                     - Angular scripts
        ├── index.html
    └── /www                     - Ionic's 'dist' folder
    ├── package.json

Note: I've only included the directories and files discussed in this post.

If you double click on the installer:

big-top-dmg