Embed Ionic 2 App in Electron for Desktop Application

[gauz09]

Hi,

I am completely new to Ionic 2, heard about it just a week ago. So I read around on Ionic and created a few sample apps also by following some online videos. It is indeed a great way to cut the efforts of developing multi-platform application(s) by at least half.

Then I heard about Electron and was able to embed some Angular 2 applications into Electron to get a Desktop version of those applications. Works great!

Next I wanted to try embedding an Ionic 2 app into Electron. I am sure I am not doing some setting somewhere right. I mean I get the main HTML I have for Ionic but it only shows the Title of the HTML in my Electron Desktop application window title bar. It doesn’t load the actual Ionic 2 app. The ionic app doesn’t really have much just a few different components are getting displayed. I also tried it with simple default Ionic 2 app that gets created with the command “ionic start myionic2app --v2”, this also did not work.

I would highly appreciate if somebody can please guide me in the right direction or give some pointers on how to do this.

Here is the project structure of my app:

Sorry it doesn’t let me upload the package.json file (or I don’t know how to do it perhaps) so uploading an image of its contents:

Thank you all in advance for this much needed help!

[gauz09]

Looks like nobody has tried this…

[shepard]

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?

[sedusa]

Hi Shepard,

Were you able to package your ionic-electron app using electron-builder perchance? I’ve tried but have been unsuccessful I’m able to build my app on my mac but once I click on the app icon only the electron app runs giving me a blank screen.
I do notice that if I run $ > ionic serve before I clicked on the app icon everything seems to run fine.

Any help would be greatly appreciated.

P.S. I did come across a post that had a workaround to the problem you had (haven’t tested it out myself). Here’s the link - https://medium.freecodecamp.com/building-an-electron-application-with-create-react-app-97945861647c#.ze6c9qin1

Thanks a tonne!

[shepard]

Hi Sedusa,

This post has a repository from wtoa that worked for me.
Ionic, Electron and IPC

[sedusa]

Hi Shepard,

Thanks for the super quick reply

Yeah I did see that repository. I guess I have a different question.

Were you able to package your ionic-electron app to create a desktop app?

[shepard]

Yes. I did not go far with it yet but it did work.
I’m able to access my files right now but I think that repo was a good start. Sorry cannot confirm right now.

[sedusa]

Thanks. I’ll check out the repo.

[beck24]

I tried this a couple of weeks ago and had it working. Still not quite as streamlined as I’d like it but certainly working and 95% of the way there:

Ionic 2 + Electron

When I find time to finish it up to something more polished I will, but that should be pretty easy to follow (I wrote it moreso as notes for myself to follow again later).

[robinyo]

See: https://robferguson.org/blog/2017/11/09/build-a-desktop-application-with-ionic-3-and-electron/

[mohit6210]

Thanks Rob for the tutorial. I had my application built for desktop following your tutorial but the icon coming is the default electron icon. Will you be able to help and guide how to update my application icon instead of default icon in the package.