Embed Ionic 2 App in Electron for Desktop Application

Ionic Framework ionic-v3
3

I was able to use Ionic2 in Electron.

First I got the quick start so I could use the files in it.
git clone https://github.com/electron/electron-quick-start

Then I started a new Ionic2 app:
ionic start myapp sidemenu --v2

Then I edited the package.json to include:
“main”: “main.js”,
“scripts”: {
“clean”: “ionic-app-scripts clean”,
“build”: “ionic-app-scripts build”,
“ionic:build”: “ionic-app-scripts build”,
“ionic:serve”: “ionic-app-scripts serve”,
“start”: “electron .”
}

"devDependencies": {
"@ionic/app-scripts": "0.0.47",
"typescript": "2.0.9",
"electron": "^1.4.1"
  },

Then I copied the main.js and renderer.js from the Electron quick start folder and pasted into the new Ionic2 folder.

Then in the main.js I changed the pathname to:
path.join(__dirname, ‘www/index.html’),

The ran ionic serve - this creates the contents of the www folder including the index.
Then open a new terminal and ran:
npm install && npm start

While this worked for me and I had a desktop app running with my Ionic2 app inside, I have not yet been able to get the ipc communications working from the Ionic side to the main process running in Electron.

If anyone knows how to get that working - I would love to hear about it.
@gauz09: You mentioned you had angular2 working… did you try ipc?

2 Likes