Embed Ionic 2 App in Electron for Desktop Application


#1

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!


#2

Looks like nobody has tried this…


#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?


Ionic, Electron and IPC
#4

Hi Shepard,

Were you able to package your ionic-electron app using electron-builder perchance? I’ve tried but have been unsuccessful :pensive: 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!


#5

Hi Sedusa,

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


#6

Hi Shepard,

Thanks for the super quick reply :slight_smile:

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?


#7

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.


#8

Thanks. I’ll check out the repo.


#9

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:

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


#10

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