In the previous posts, we learned about creating a new application using taco-cli and building the iOS app using remote build. Now that the app is bootstrapped and ready for us to work on, its time to explore other CLI features which help us on our day-to-day development.

I am great fan of live reload stuffs in web/hybrid app development. That definitely boosts our productivity, waiting for the whole build process to complete to see that one line of change you made is really painful. How cool and fast it will be to see the change you make almost instantaneously? That’s where live reload helps. I got introduced to this feature as I started exploring the awesome Ionic framework. Since then, I always look forward to have live reload of any app/website I develop on. So, quite naturally as I explore the taco-cli I was looking for this very same feature and its been made super cool and more exciting, as with taco-cli you can enable live reload for the apps running on emulator and device as well. Yes, without undergoing the entire process of Cordova build, your HTML/JS/CSS changes will live reload in the emulator/device.

Live reloading on emulator

To enable live reloading, you just need to run the below command from the root folder of your taco app

taco emulate iOS —livereload

Notice the switch in the end `–livereload` that notifies the taco-cli to start the emulation in a live reload fashion. So what difference does it make from the usual emulation process? If you notice the output just after running the above command, you should see the below set of lines,

Setting up livereload …

[BS] Access URLs:

 ————————————-

       Local: http://localhost:3000

    External: http://10.93.113.59:3000

 ————————————-

          UI: http://localhost:3001

 UI External: http://10.93.113.59:3001

 ————————————-

[BS] Serving files from: /Users/z066157/SampleProjects/TacoCliSampels/firstTacoCliAPp

[BS] Watching files…

After these the usual Cordova emulation process will start and emulate your app on the iOS Simulator.  Upon saving the edited file, you should be seeing the below in your console, and app already reloaded in the emulator.

[BS] File changed: /Users/z066157/SampleProjects/TacoCliSampels/firstTacoCliAPp/www/scripts/index.js

To showcase it in action, I have created a short video where a very basic change in the JS file triggers live reload in the emulator and the device

Live reloading on device

To live reload the app in device, run the below command,

taco run iOS —device —livereload

In the above video, the change was done in the text “Live reload demo…” to read it as “Live reload demo from device…”

As you can see in both the videos, the moment app is launched in the emulator or device in live reload mode, it gets connected to the BrowserSync module which is responsible in performing the live reload. I did encounter issues while connecting to the browser sync in emulator for the first time, but re-running the command did the trick for me and got everything set

What files does it watch and how to add exclusions ?

By default, all the files present under the “www” folder will be watched for the changes. If you want to exclude any files, its as simple as adding them to the ignore switch while running the command. For e.g., the below command will ignore any changes in any css files within the “www” and its subfolders and it will not do any livereload

taco emulate ios --livereload --ignore=/**/*.css

Please note that, the path to be mentioned should be relative to the “www” folder, only then those files will be ignored!

How do I get this feature working for my existing hybrid app ?

Its very easy and simple to add this feature to your existing hybrid app (which wasn’t created using taco-cli) by just adding a “taco.json” at the root folder of your app. This file does the magic for the taco-cli to understand it as a taco app and exposes all the benefits of taco-cli’s to the existing application.

Advertisement