April 25, 2016

Setup Ionic 2 with Electron (TypeScript, Angular2)

20 Comments

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.

ionic -v

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.

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

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

3.) Browse to your app and install electron.

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

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.

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

"scripts": {

"electron": "electron .",

"electron dist": "electron ."

"main": "electron.js"

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

{
  "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"
}

{

"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.

'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', () =&gt; {
        // 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', () =&gt; {
    // 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', () =&gt; {
    // 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();
    }
});

'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:

.
├── 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

├── 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:

# 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

# 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

Ionic2-and-Electron 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.

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

...

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;

});

}

...

Call a method on @Input() change

Setup NativeScript and Angular 2

Refactorable reactive forms in angular

theCodeCampus
Developer at thecodecampus </>

Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.

Follow me on LinkedIn

20 responses to “Setup Ionic 2 with Electron (TypeScript, Angular2)”

Sebastian says:

24.07.2016 at 22:25

Hi,

thanks for sharing this example!
I tried to follow your instructions but I’m not able to run “npm run-script electron” successfully. I get the following error: https://postimg.org/image/717cf4hip/
I guess you are not running windows, but maybe you still have an idea what’s going wrong here?

Thanks 🙂

Reply
Can Kattwinkel says:

25.07.2016 at 08:35

I’m not too familiar with Electron on Windows but why is the error from MS JScript?

What happens when you run “electron” from the commandline? Maybe you need it global

Reply
Sebastian says:

26.07.2016 at 22:37

After starting from scratch it is working now, but I have no idea why :/

Reply
Stefan says:

04.08.2016 at 18:01

looks nice. However: (1) using rendererprocess with browserify in ionic app and (2) more horrible using typescript with electron. so so painful 🙁

Reply
Dave says:

22.08.2016 at 22:23

@Stefan Just use typings (npm i -g tsd)

Reply
Jürgen Wahlmann says:

06.09.2016 at 09:30

When running the electron command (by script or directly on the Windows Command Line), it just opens electron.js in notepad++.

Do I need to change the default app for *.js files to something else?

Reply
Can Kattwinkel says:

06.09.2016 at 09:35

Hello Jürgen,

what command are you firing exactly? npm run electron in the project folder should do open a electron window showing your app.

Reply
- Jürgen Wahlmann says:
  
  06.09.2016 at 11:09
  
  Hi Can,
  
  i used “electron .” and “npm run-script electron”. T
  
  The issue was with “electron.js”, which overloaded electron.exe on the command line while me being in the app’s main directory. Once I changed it to main.js like in the electron starter example it worked.
  
  So to improve this blog I suggest not mixing up electron binary and JS file names, at least with Windows.
  
  Best regards,
  Jürgen
  
  Reply
Christophe K. says:

08.09.2016 at 23:16

That’s an amazing tutorial that shows how simple electron integrates your project.
Thanks for sharing that!

(I confirm the ‘electron’ file/binary confusing Windows platform).

Christophe K.

Reply
Luca says:

14.10.2016 at 11:14

Hi. Nice tutorial.
Can you help with the packaging of the app using electron-package or electron-build? I gave it a try but could not come out with a working app. 🙂

Reply
- Sam says:
  
  28.03.2017 at 19:21
  
  Hi Luca,
  
  Did you ever get a response about how to use electron-builder in this example? I’m stuck at this point as well.
  
  Thanks.
  
  Reply
Gauzy says:

21.12.2016 at 05:15

Hi Can,

Being absolutely new to both Ionic 2 and Electron I am glad I stumbled upon your tutorial.

Very very helpful and nicely organized, step-by-step tutorial to get up and running with embedding Ionic 2 in Electron.

I am not sure if you are still following up with this blog. Just checking if you have any suggestion for me to get past my issue after following your steps to the ‘T’! 🙂

In my case, “ionic serve” works fine…it opens up the Ionic 2 app in a browser window. But when I run “npm run-script electron” or “electron .” command it is opening up the Electron window for Desktop application but does not render the Ionic app in it. It does show the HTML Title correctly in the title bar of Desktop application window so looks like it’s a problem with rendering the content. Not sure where and what to look for.

Any help will be greatly appreciated!

Reply
- Can Kattwinkel says:
  
  22.12.2016 at 15:39
  
  Hello Gauzy,
  
  have you checked for errors in console of Electron? In order to do so, use Ctrl+Shift+I or F12.
  
  Reply
Olli says:

24.02.2017 at 15:29

hi can,

it worked fine for me. Thanks a lot! i only had to replace the > String with > in the electron.js

kindly
Olli

Reply
rut says:

02.03.2017 at 13:31

Thanks for the good blog.
I have two question:

1. Following to your blog, it look like that if I have exist ionic-2-app, I can also install electron and it will work Did I understand you well?

2. You wrote:
“And then, when Angular 2 Material is ready it should replace Ionic 2 on Desktop and in Browser”.

Is it so necessary?
My customer want me to continue use the same project, and only build new html and css pages, and cause electron to load them whan I on desktop.
I must use Ionic if I want to do that because my logic pages (typescript) are base on Ionic.
Is it possible to ue Ionic-2 for desktop-site also?

Reply
Sarath says:

03.04.2017 at 16:40

Hi,

I am trying to run the application using windows machine.I tried to follow your instructions but I’m not able to run “npm run-script electron” successfully. I get the “Microsoft script compilation Error” from ms script.

Please suggest what will fix this problem.

Reply
hai nguyen says:

12.05.2017 at 16:19

Hi Sarath,

You should rename ‘electron.js’ to ‘main.js’ or other name

and update ‘package.json’ with new name of ‘main’ property.

Because when we run ‘electron .’, Windows will try to execute the ‘electron.js’…

Reply
Oliver says:

03.08.2017 at 16:30

Hi Guys,
i am new as well to this topic.

Followed the tutorial and at the end there is a JS-error. Tried to rename the electron.js file to main.js, but did not help.

This is the error msg:
Uncaught Exception:
/Users/oliver/Development/IonicProjects/ionic2-electron/main.js:29
win.on(‘closed’, () => {
^^
ReferenceError: Invalid left-hand side in assignment
at Object.exports.runInThisContext (vm.js:78:16)
at Module._compile (module.js:543:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at loadApplicationPackage (/Users/oliver/Development/IonicProjects/ionic2-electron/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:283:12)
at Object. (/Users/oliver/Development/IonicProjects/ionic2-electron/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:325:5)
at Object. (/Users/oliver/Development/IonicProjects/ionic2-electron/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:361:3)
at Module._compile (module.js:571:32)

Reply
- kasper says:
  
  20.08.2017 at 17:44
  
  It’s hard to tell what the issue is without more context, but you should check the syntax near line 29 of your main.js file… Also, make sure that the thing to the right of the equal sign is a greater-than sign (i.e. =>) and not the HTML code for it (%gt;)
  
  Reply
Ingressos Foz says:

12.05.2023 at 18:59

Hello how you doing?!

I would like to say thank you very much for your work and keep sharing the best content, take care!

Greetings from old west

James

Reply

Setup Ionic 2 with Electron (TypeScript, Angular2)

Run Ionic 2 in Electron always in Windows Design

Related Posts

20 responses to “Setup Ionic 2 with Electron (TypeScript, Angular2)”

Leave a Reply Cancel reply