ionic tutorial - Testing in a Browser in Ionicframework - ionic framework - ionic 2 - ionic creator - ionic development

$ ionic serve [options]

For chrome browser you can inspect devices (AVD or Mobiles), type following command in address bar of chrome browser.

chrome://inspect/#devices  

By default, LiveReload will watch for changes in your www/ directory, excluding www/lib/. 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/js/*",
    "!www/css/**/*"
  ]
}

For a reference on glob pattern syntax, check out globbing patterns on the Grunt website.

$ ionic setup sass

will add a watchPatterns propery with the default values to your ionic.project file that you can then edit, in addition to the gulpStartupTasks property as described in the Sass documentation.

Ionic Lab is a feature on top of ionic serve that makes it easy to test your app in a phone frame and with iOS and Android platforms side-by-side. To use it, just run

$ ionic serve --lab

Read the full release announcement for all the details!

Say you want to specify what address your browser will connect to, say for testing or external users. Specify the address with the --address argument.

$ ionic serve --address 68.54.96.105

The serve command can add some proxies to the http server. These proxies are useful if you are developing in the browser and you need to make calls to an external API. With this feature you can proxy request to the external api through the ionic http server preventing the No 'Access-Control-Allow-Origin' header is present on the requested resource error. In the ionic.project file you can add a property with an array of proxies you want to add. The proxies are object with two properties:

{
  "name": "appname",
  "email": "",
  "app_id": "",
  "proxies": [
    {
      "path": "/v1",
      "proxyUrl": "https://api.instagram.com/v1"
    }
  ]
}

Using the above configuration, you can now make requests to your local server at http://localhost:8100/v1 to have it proxy out requests to https://api.instagram.com/v1

angular.module('starter.controllers', [])
.constant('InstagramApiUrl', '')
// .constant('InstagramApiUrl','https://api.instagram.com')
//In production, make this the real URL

.controller('FeedCtrl', function($scope, $http, InstagramApiUrl) {

  $scope.feed = null;

  $http.get(InstagramApiUrl + '/v1/media/search?client_id=1&lat=48&lng=2.294351').then(function(data) {
    console.log('data ' , data)
    $scope.feed = data;
  })

})

See also this gist for more help

[--consolelogs|-c] ......  Print app console logs to Ionic CLI
[--serverlogs|-s] .......  Print dev server logs to Ionic CLI
[--port|-p] .............  Dev server HTTP port (8100 default)
[--livereload-port|-i] ..  Live Reload port (35729 default)
[--nobrowser|-b] ........  Disable launching a browser
[--nolivereload|-r] .....  Do not start live reload
[--noproxy|-x] ..........  Do not add proxies