Local DevApp: Mix `ionic cordova run --livereload` with ideas from the Ionic DevApp

In the Ionic DevApp Feedback Mega-thread - #109 by Tommertom @Tommertom had an idea:

I would love some sort of command like

ionic devapp cordova run android

that would build me an app that uses the plugins in my project and uses an url to to another ionic serve for the content in order to do wifi livereload.

So a bit of customisation possible, and a bit of Ionic magic. And only need to rebuild once I meddle with the plugins.

I love that idea:

Interesting, so more or less a ionic cordova run --livereload that uses an app from ionic serve instead of what was built into it… That would mean it would have to include code to “receive” the running ionic serve instances instead of the real www.

Hmm, that should be doable with a little local scripting. Only thing missing is the code of the DevApp that displays the instances (and all workarounds so it can “just” display these then - but I am not sure if there are any).

Want to create a new topic for this “Local DevApp: Mix ionic cordova run --livereload with ideas from the Ionic DevApp” thing you just invented? I think we should talk about it some more @Tommertom.

Edit: I remembered that someone created a project on Github with a “build your own DevApp with your own plugins”. I am pretty sure one could reuse that code…

So much, that I created this topic myself. Let’s see if this goes somewhere.

Haha, turns out it was… @Tommertom!

1 Like

So my thinking how this could work:
ionic cordova run --livereload builds the app and sets the URL to the serve running locally.
@Tommertom’s idea was to not do that as it requires this process to run, but to give the user the option to select a running separate ionic serve instance.
To make this work the app has to be build with the page that can display these instances, instead of the actual www.
The solution could be some command line tool that replaces www, then runs the build and installs it, then replaces www with the original files again. As we are talking about a native app, we even only have to replace the files inside platforms/ios|android with a set of files that can show the running ionic serve instances.

What do you think @Tommertom?

(One could even imagine that the process copies over config.xml as a data file to both the pseudo devapp and the real app one is developing, so the pseudo dev app can check if the native build still has all the necessary plugins in the correct version or if you need to replace the native app with a new one.)

People asking: What is the big advantage, I am fine with the plugins of the DevApp? The reason is that this app can be debuggable - which means you can learn a lot more about crashes and problems in the app. iOS AppStore apps can’t be.

This would make my life much easier. The process of actually making it happen is a bit over my head in the sense that I hadn’t considered this idea until 2 minutes ago, but I’ll think on it. If I come up with any good ideas, you’ll be the 2nd to know.
Jason

1 Like

I think: let’s try to make it!

I never really used --livereload. It actually failed miserably on my PC. And I wouldnt want to use it, as I rather have wifi connection. And if you have seen one of the latest blogs from @joshmorony, you can see the advantage of wifi, as it allows you to test on multiple devices at the same time. A --livereload with cable won’t easily support.

As to the scripting, I think you may bump into the same issue as I did with the altDevApp: how to redirect navigation, without losing Cordova connection? Ionic serve does not serve cordova.js and cordova_plugins.js, so you need to inject it in the navigated view.

I tried navigation.location and InAppBrowser injection, but didn’t work. Next try: using iFrames (not recommended practice though). The last resort would be to build a plugin that does all the plugin injection stuff, aka, the Plugin That Rules Them All… But that would require some small but intelligent java/xcode developing which I am not keen on doing…

What I am hoping is that the Ionic Team is willing to share a bit how they do this trick in DevApp/Ionic View. Probably with some local saving and serving…but which files. And how to do the redirect.

All features you need to build in a CLI version too. And then we can consider doing PR on the CLI, I guess.

Any dev suggestions?

Regards

Tom

@Tommertom posted this in the other thread:

The community figuring out its own devapp - and indeed that is what I tried earlier (and posted in the forum). And it seemed to work on the vibration plugin. But not with another simple plugin (Device), due to absence of cordova.js etc. Seems that a navigation redirect kills the cordova connection. So I would love to hear suggestions on how to fix this. I tried InAppBrowser injection and possibly look into other features… Suggestion in the other thread please!

Makes sense, as there is no cordova.js when you use ionic serve. So somehow the Ionic DevApp has to work around that.

Unfortunately you can’t just debug the devapp as it comes from the store and check out if there is a cordova.js and where it comes from…

Phonegap has a “developer app”, that does similar things and whose code is on Github: GitHub - phonegap/phonegap-app-developer: PhoneGap Developer App Maybe we can learn from that?

Nice example

In this app

does all the magic, which requires a zipped bundle. So next step: what does it bundle… and can ionic serve generate this.

Tom

Would be nice to see ionic serve work with the phonegap developer app. Then it will be easy to move both ways: create boilerplate devapp and features in ionic serve to support it (like providing a appzip just as phonegap serve does)

Anyone care to try with me?

Which works!! Got a simple Ionic page served to phonegap dev app (on iOs).

Just had to zip the www folder and place it under www/__api__/appzip (no zip extension)

And there is no cordova stuff packed inside

So next step: how to make ionic serve generate a zip file in __api__/appzip or __api__/update (when updating)

Then we have the boilerplate altDevApp ready.

Maybe add a flag:

ionic serve -z

to create the zip files :slight_smile: ?

Tom

Ok, then the Phonegap Developer is using something like Ionic Deploy or CodePush internally - which might be another interesting thing to look at to understand how one can replace files, but keep cordova.js in place.

This also points to an alternative solution to “hijacking” the build process: a Cordova plugin that somehow replaces the actual app with the “pseudo devapp” code.

Dunno…got to check the source code of the ContentSync java

But I reckon there is some features in webview also to ensures an update

After all, if you use whitelist plugin and navigate the content to the url, the webview updates itself automagically already…

We are getting close… :slight_smile:

I can post phonegap build logs for both ipa and apk if you feel it would would be helpful

Also, one of the creators of Ionic owes me a favor, so if you have a specific question you would like me to ask him, let me know. Just make it count!

Can you actually build the phonegap developer app from the github repo? I am trying and it runs from my android tablet but does not connect to a sample phonegap app running phonegap serve

Not connecting while chrome on the tablet does connect

Sorry for the delay in getting back to you. Crazy weekend. I actually have had the DESKTOP version of pg serve for ages as well as a of build account. I haven’t used the cli or github.

I meant copies of package logs, in hindsight. When you package ipa and apk through the site, a detailed log is created. Unsure if that would be of any help in this instance now that I think about it.

That 1 question for Ionic is still on the table though. If there’s something you guys just can not figure, but think the Ionic team would definitely know I can ask.

You and Sujan have knowledge sets that are far more advanced than mine in regard to this endeavor, so I apologize if / when my terminology and understanding of the concepts involved are a bit off.

At this point, I think I can only offer the use of that 1 favor. After that, I’m out of favors. But I’d be happy to use it to help you 2 make progress on this!

Hi

@jaydz: thx for the message. We’ll see where we end.

As to my own efforts, I see that adding stuff to ionic-cli and ionic-app-scripts is a bit beyond my appetite (and no guarantee any PR is granted into the master). I did experiment and managed to generate zip files for the contentsync plugin to use while serving in ionic serve, but absolutely not worthy to use in a PR.

So, next step is to see if I can use the contentsync code to create my own plugin to load cordova assets on web assets served from a remote host. In theory this should be doable. Let’s see if my skills (and time) are sufficient :slight_smile:

Regards

Tom

1 Like

Yeeha! Probably got my alternative to DevApp going… Just needed that plugin to inject cordova.js after a load of a remote location.

And it seems to work with flashlight and device plugin.

Fancying stuff up and then publish the diyDevApp boilerplate for anyone to make their own DevApp with their own wishlist of plugins…

And of course, I hope this time it continues to work!

2 Likes