Setup Ionic 2 with Electron (TypeScript, Angular2)

Recently i faced the challenge to create a cross platform application for desktop, mobile and browser. Since Angular 2 Material is not yet ready but a Angular 1 to Angular 2 migration would be a pain in the ass I decided to go with Ionic 2 as scaffold for all devices. And then, when Angular 2 Material is ready it should replace Ionic 2 on Desktop and in Browser.

1.) The set up with was surprisingly easy. First of all make sure to have ionic 2 installed.

1

ionic -v

2.) To kickstart the Ionic 2 project. TypeScript is not required, but recommended, although you can do anything shown here with JavaScript as well.

1	ionic start ionic2-electron tutorial --v2 --ts

3.) Browse to your app and install electron.

1 2	cd ionic2-electron npm install electron-prebuilt --save-dev

4.) Now go to your package.json file and add the required scripts for electron to start in dev mode with auto reload and in dist without.

1 2 3 4 5

"scripts": { "electron": "electron .", "electron dist": "electron ." }, "main": "electron.js"

5.) So your full package.json should look like this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

{   "dependencies": {     "angular2": "2.0.0-beta.15",     "es6-shim": "^0.35.0",     "ionic-angular": "2.0.0-beta.6",     "ionic-native": "^1.1.0",     "ionicons": "3.0.0-alpha.3",     "pouchdb": "^5.3.2",     "reflect-metadata": "0.1.2",     "rxjs": "5.0.0-beta.2",     "zone.js": "^0.6.11"   },   "devDependencies": {     "del": "2.2.0",     "electron-prebuilt": "^0.37.7",     "gulp": "3.9.1",     "gulp-watch": "4.3.5",     "ionic-gulp-browserify-typescript": "^1.0.0",     "ionic-gulp-fonts-copy": "^1.0.0",     "ionic-gulp-html-copy": "^1.0.0",     "ionic-gulp-sass-build": "^1.0.0",     "ionic-gulp-scripts-copy": "^1.0.1",     "run-sequence": "1.1.5"   },   "name": "client",   "description": "client: An Ionic project",   "cordovaPlugins": [     "cordova-plugin-device",     "cordova-plugin-console",     "cordova-plugin-whitelist",     "cordova-plugin-splashscreen",     "cordova-plugin-statusbar",     "ionic-plugin-keyboard"   ],   "cordovaPlatforms": [     "android"   ],   "scripts": {     "electron": "electron .",     "electron dist": "electron ."   },   "main": "electron.js" }

6.) Next step is to create the in “main” mentioned electron.js script. This script is basically the setup for your electron app.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

'use strict'; const electron = require('electron'); // Module to control application life. const {app} = electron; // Module to create native browser window. const {BrowserWindow} = electron;   let win;   function createWindow() {     // Create the browser window.     win = new BrowserWindow({width: 800, height: 600});       var url = 'http://localhost:8100';     var Args = process.argv.slice(2);     Args.forEach(function (val) {         if (val === "dist") {             url = 'file://' + __dirname + '/www/index.html'         }     });       // and load the index.html of the app.     win.loadURL(url);       // Open the DevTools.     win.webContents.openDevTools();       // Emitted when the window is closed.     win.on('closed', () => {         // Dereference the window object, usually you would store windows         // in an array if your app supports multi windows, this is the time         // when you should delete the corresponding element.         win = null;     }); }   // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.on('ready', createWindow);   // Quit when all windows are closed. app.on('window-all-closed', () => {     // On OS X it is common for applications and their menu bar     // to stay active until the user quits explicitly with Cmd + Q     if (process.platform !== 'darwin') {         app.quit();     } });   app.on('activate', () => {     // On OS X it's common to re-create a window in the app when the     // dock icon is clicked and there are no other windows open.     if (win === null) {         createWindow();     } });

7.) Your project structure will now look like this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

. ├── app ├── config.xml ├── electron.js ├── gulpfile.js ├── hooks ├── ionic.config.js ├── ionic.config.json ├── node_modules ├── package.json ├── platforms ├── plugins ├── resources ├── tsconfig.json ├── typings ├── typings.json └── www

8.) Thats it! Now you can fire it up:

1 2 3 4 5 6 7 8

# start ionic and electron with autoreload, ionic serve # open another terminal window for the npm run command! npm run-script electron   # use electron in dist ionic build browser npm run-script electron dist

Ionic 2 running in Electron

Run Ionic 2 in Electron always in Windows Design

By default Ionic 2 runs in Material Design if no special platform is detected (e.g. when running in browser. But also when running on Linux Electron!). So you might want your electron App to run with Windows Theme on all platforms. The simplest way to do so is to add a Ionic Config Parameter to the URL. They have to be prefixed with “Ionic” and the fist letter is always uppercase. See the given example below of the modified electron.js.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

... function createWindow() {     // Create the browser window.     win = new BrowserWindow({width: 800, height: 600});       var url = 'http://localhost:8100?ionicMode=wp';     var Args = process.argv.slice(2);     Args.forEach(function (val) {         if (val === "dist") {             url = 'file://' + __dirname + '/www/index.html?ionicMode=wp'         }     });       // and load the index.html of the app.     win.loadURL(url);       // Open the DevTools.     win.webContents.openDevTools();       // Emitted when the window is closed.     win.on('closed', () => {         // Dereference the window object, usually you would store windows         // in an array if your app supports multi windows, this is the time         // when you should delete the corresponding element.         win = null;     }); } ...