Getting ready

The recommended method is to use the ionic serve command line. It basically launches an HTTP server so you can open your app in a desktop browser.

How to do it…

That's it! There is no need to go into the /www folder or figure out which port to use. The command line will provide these options while the web server is running:

The most common option to use here is r to restart or q to quit when you are done.

There is an additional step to view the app with the correct device resolution:

Most developers would prefer to use this method to code as you can debug the app using Chrome Developer Tools. It works exactly like any web application. You can create breakpoints or output variables to the console.

How it works...

Note that ionic serve is actually watching everything under the /www folder except the JavaScript modules in the /lib folder. This makes sense because there is no need for the system to scan through every single file when the probability for it to change is very small. People don't code directly in the /lib folder but only update when there is a new version of Ionic. However, there is some flexibility to change this.

You can specify a watchPatterns property in the ionic.project file located in your project root to watch (or not watch) for specific changes:

{
  "name": "myApp",
  "app_id": "",
  "watchPatterns": [
    "www/**/*",
    "!www/css/**/*",
    "your_folder_here/**/*"  
  ]
}

While the web server is running, you can go back to the IDE and continue coding. For example, let's open the playlists.html file under /www/templates and change the first line to this:

<ion-view view-title="Updated Playlists">

Go back to the web browser where Ionic opened the new page; the app interface will change the title bar right away without requiring you to refresh the browser. This is a very nice feature when there is a lot of back and between code changes and allows checking on how it works or looks in the app instantly.