The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

We are happy to announce that the Ionic CLI has been updated with some great new features.

LiveReload All The Things

One of the best features of the CLI is the LiveReload server that gets started when you run ionic serve. This allows you to develop your app in the browser and have it update instantly when changes are made to any development files.

With this in mind, we added the ability to have LiveReload run when you’re testing on a device! The LiveReload functionality is similar to Ionic Serve, but instead of developing and debugging an app using a standard browser, the compiled hybrid app itself is watching for any changes to its files and reloading the app when needed. This reduces the requirement to constantly rebuild the app for small changes. Do note, however, that LiveReload only works for devices that support web sockets.

Not only can you run LiveReload, you can also access console logs from the device and server logs showing which files the device is requesting. This lets you build your app quickly in the browser, then debug it on an actual device or emulator (Genymotion works, too). How do you start it? You can pass a few flags, in any combination, in your run/emulate commands:

$ ionic  [run|emulate] <platform> [options]

    [--livereload|-l] .... Live Reload app dev files from the device
    [--consolelogs|-c] ... Print app console logs to Ionic CLI
    [--serverlogs|-s] .... Print dev server logs to Ionic CLI

Ionic App LiveReload Command Examples:

$ ionic emulate ios --livereload --consolelogs --serverlogs

$ ionic run android -l -c -s

Codepen Starter Templates

Ionic loves Codepen! In fact, we really love Codepen; just check out our Codepen page. It’s the perfect place to share code and play with ideas and concepts in a sandbox. It also provides an ideal environment in which to demonstrate issues that you may find during your development. Until now, taking Codepen demos and moving them into an Ionic project was a bit of a mess. You’d start a new project, copy all the assets from Codepen into their appropriate locations, remove the inline template, go back and make sure you caught that lone semicolon you forgot the first time…

Thankfully, those days are gone! Now, you have the ability to start a project based on a Codepen demo. The new feature is dead simple; all you need is a Codepen URL, and you’re good to go.

$ ionic start myapp http://codepen.io/ionic/pen/hqcju

The command will run its normal process, scaffolding out the project and installing the correct plugins, but it will also include the code from the Codepen. All the JavaScript and CSS will be parsed into their own respective files, and any inline templates will be made into html template files and saved into the templates directory.

Update to the latest Ionic CLI

With these new features, you can go from testing in Codepen to testing on a device! Update your CLI to get these new features: npm update -g ionic, and be sure to check out the CLI’s documentation. In addition to the documentation, the ionic --help command has been improved to include even more information about each task and its available options.

We’re always looking to improve the CLI to help make developing Ionic apps even easier, so please feel free to submit any ideas and feature requests to our Ionic CLI repo. Thanks!

  • http://xeoncross.com Xeoncross

    How do you access the cordova object in javascript when using ionic serve? Or do you have to `ionic build browser` every single time you want to see your changes?

  • http://www.gaurav.mobi Gaurav Chandra

    I used the whitelist plugin and after that the emulators, android and ios, stopped refreshing. Earlier they were able to. I have allowed everything as white list but still.

    • Gérald PLUSQUELLEC

      use in index.html

      • http://www.gaurav.mobi Gaurav Chandra

        I had to remove this tag every time i did serve as the port was changing. when I build the app, then I add this meta.

  • Amit Singh

    I add some code on ionic.project.JS update very fine .But css not update

  • Markus Reich

    I tried it with ionic run android –livereload, but then I got problems with cordova camera plugin => Not allowed to load local resource: file:///storage/emulated/0/Android/data/

  • Vinod Shintre

    hmm seems like latest CLI 1.7.13 does not emit logs on ionic run android -l -c command
    anyone facing this issue

    • Flint

      Thank you very much

  • Mark Rupert

    I am trying to use the live reload. The app comes up but my API POSTs are not working. I added the following to my PHP API: header(“Access-Control-Allow-Origin: ‘*'”);

    But I am getting this error:
    XMLHttpRequest cannot load https://domain.com/app/api.php. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://192.168.1.105:8100’ is therefore not allowed access.