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

• 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:

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’m 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.