Ionic - how-to: livereload on iOS and android

Hi, i have seen som discussion about people have problems getting livereload to work and wanted to share how i made it work.
This setup is for a windows pc where you are coding and a mac that are running iOS simulator. I am running the simulator in VMWare but should work on a real mac too. I havent tried on a device yet, but i guess this should work on device too with the correct network setup (i have tested on emulators for ios and android).

First let start out making the Viewer app on the mac. This have to be done only once and can be used to test all your projects. Only time you have to rebuild this is when you are adding new plugins.

All these steps are done on the Mac

1. Create a new starter app with ionic
The template doesnt matter because all code are loaded from ionic serve on the host.

ionic start AppViewer blank --v2 --ts

2. Add this lines to config.xmlin your project

<content src="http://192.168.1.1/index.html"/>
<access origin="*"/>
<allow-navigation href="*"/>

You have to replace 192.168.1.1 with the ip of your machine where ionic serve will run - in this case the windows pc.

3. Add all the plugins you think you are going to use while testing. You can always add more later and just rebuild the viewer app.

Then run your app in emulator:
ionic run ios --target="iPhone-5s"
Target is the emulator you want the app installed on. You can install on multipe and just switch between them on the mac when needed. You can even run sveral simulators at the same time with different iPhone/iPad sim.

To make the viewer app for android just do:
ionic run android

Now the viewer app is ready. It wont work yet because the server are not set up yet.

So lets start making the developing environment ready for our viewer app.

All these steps are done on the Windows computer

1. Create your ionic project as usual, add plugins etc
ionic start MyRoxApp blank --v2 --ts ionic platform add ios ionic plugin add cordova-plugin-camera ionic plugin add ...

We are almost there :slight_smile:

2. Make console.log work
To be able to catch the console.log you have to add this code in the head section of your index.html in your www folder:

<script>
    // Injected Ionic CLI Console Logger
    (function() {
    var methods = "assert clear count debug dir dirxml error exception group groupCollapsed groupEnd info log markTimeline profile profileEnd table time timeEnd timeStamp trace warn".split(" ");
    var console = (window.console=window.console || {});
    var logCount = 0;
    window.onerror = function(msg, url, line) {
        if(msg && url) console.error(msg, url, (line ? "Line: " + line : ""));
    };
    function sendConsoleLog(method, args) {
        try {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/__ionic-cli/console", true);
        xhr.send(JSON.stringify({ index: logCount, method: method, ts: Date.now(), args: args }));
        logCount++;
        } catch(e){}
    }
    for(var x=0; x<methods.length; x++) {
        (function(m){
        var orgConsole = console[m];
        console[m] = function() {
            try {
            sendConsoleLog(m, Array.prototype.slice.call(arguments));
            if(orgConsole) orgConsole.apply(console, arguments);
            } catch(e){}
        };
        })(methods[x]);
    }
    }());
</script>

3. Make cordova and plugins available
Copy the following from the viewer app’s platforms/ios/platform_www on the mac:
cordova_plugins.js, cordova.js + the two folders cordova-js-src and plugins and paste them into your www folder on the developement machine.

Thats it. Now you can do this ionic serve on your developement machine:
ionic serve -a -b -s -c -l --platform ios --nocordovamock

Then start the viewer app on your mac (or device). It should now load your project and automatically update when you save any changes.

When you are ready to publish your app you have to remove the cordova_plugins.js, cordova.js + the two folders cordova-js-src and plugins in your www folder before the final build.

I am kinda new to ionic and i know this is probably not the best way to do it. Still it works for me and are helping my developement and testing a lot.

4 Likes

On version beta.32 with params:

<content src="index.html"/>
<allow-navigation href="*"/>

works pretty good.

PS Mac

First straight answer I’ve seen on getting livereload to work with IOS. Thanks, and great job!

Apparently, since your post, things has been made more easy. I just ran :

ionic run android -l

and it worked !!

7 Likes

@nilebma Thanks, indeed ionic run android -l works

This unfortunately does not hold for the v3 cli anymore. Anyone got an idea how to do it there?

I’m using ionic cordova run android -l and it works perfectly.
Did you add cordova to the command? It’s new in CLI v3

2 Likes

Your suggestion (ionic cordova run android -l) works perfectly with --type ionic2 apps, but not with --type ionic1 apps. Any ideas as to how to get an ionic1 app to work with live reload? I’ve tried creating a brand new app from template ($ionic start new-v1-app tabs --type ionic1), but can’t get live reload working.

1 Like

Facing the same Issue with Ionic1 app. Any updates yet?

Hello. I got it working. My issue was that my device wasn’t on the same network as the computer. Once I corrected that, live upload worked, even in ionic1.

It works even when running a v1 app in the v3 cli ($ionic start myApp tabs --type ionic1, for example).

$ ionic cordova run android -l --device


Here’s the text of the prompts I got:
[WARN] Multiple network interfaces detected!
You will be prompted to select an external-facing IP for the livereload server that your device or emulator has access to.
You may also use the --address option to skip this prompt.

? Please select which IP to use: (Use arrow keys)
? Please select which IP to use: 10.0.0.2
[INFO] Starting server: --livereload --l --address=0.0.0.0 --port=8100 --p=8100 --livereload-port=35729 --r=35729 --iscordovaserve --nobrowser - Ctrl+C to cancel
[INFO] Development server running
Local: http://localhost:8100
External: http://10.0.0.2:8100

Also works from the beginning on ionic V2 and decent real time database.

Have fun with ionic,

really thanks is so amazing the livereload in ionic!

1 Like

NICE!!! This FINALLY worked for me…however I think its simply just Step #3 is the critical one to getting cordova.js into the project. Prior to this step, just doing ionic cordova run android -l would not load the cordova.js file - so any object referencing window.plugins or window.cordova would error out.