Ionic CLI Guide

Install the Ionic CLI

npm install -g ionic

Update Ionic lib

ionic lib update

bower update

Starting an Ionic App

 ionic start -a [appName] [path] - t [template(tabs|sidemenu|blank)]

Testing in a Browser

ionic serve [options]

ionic serve --lab (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. )

Specifying an IP Address to use

ionic serve --address 68.54.96.105

Adding a platform target

ionic platform ios android

Building your app

ionic build ios

Live Reload App During Development (beta)

The run or emulate command will deploy the app to the specified platform devices/emulators. You can also run live reload on the specified platform device by adding the --livereload option. The live reload 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. However, any changes to plugins will still require a full rebuild. For live reload to work, the dev machine and device must be on the same local network, and the device must support web sockets.

With live reload enabled, an app's console logs can also be printed to the terminal/command prompt by including the --consolelogs or -coption. Additionally, the development server's request logs can be printed out using --serverlogs or -s options.

Command-line flags/options for run and emulate

[--livereload|-l] .......  Live Reload app dev files from the device (beta)
[--consolelogs|-c] ......  Print app console logs to Ionic CLI (live reload req.)
[--serverlogs|-s] .......  Print dev server logs to Ionic CLI (live reload req.)
[--port|-p] .............  Dev server HTTP port (8100 default, live reload req.)
[--livereload-port|-i] ..  Live Reload port (35729 default, live reload req.)
[--debug|--release]

Emulating your app

Deploys the Ionic app on specified platform emulator. This is simply an alias for run --emulator.

ionic emulate ios [options]

Running your app

Deploys the Ionic app on specified platform devices. If a device is not found it'll then deploy to an emulator/simulator.

ionic run ios [options]

Icon and Splash Screen Image Generation

Automatically generate icons and splash screens from source images to create each size needed for each platform, in addition to copying each resized and cropped image into each platform's resources directory. Source images can either be a png, psd Photoshop or ai Illustratorfile. Images are generated using Ionic's image resizing and cropping server, instead of requiring special libraries and plugins to be installed locally.

Since each platform has different image requirements, it's best to make a source image for the largest size needed, and let the CLI do all the resizing, cropping and copying for you. Newly generated images will be placed in the resources directory at the root of the Cordova project. Additionally, the CLI will update and add the correct  configs to the project's config.xml file.

During the build process, Cordova (v3.6 or later) will look through the project's config.xml file and copy the newly created resource images to the platform's specific resource folder. For example, Android's resource folder can be found in platforms/android/res, and iOS usesplatforms/ios/APP_NAME/Resources.

Icon Source Image

Save an icon.png, icon.psd or icon.ai file within the resources directory at the root of the Cordova project. The icon image's minimum dimensions should be 192x192 px, and should have no rounded corners. Note that each platform will apply it's own mask and effects to the icons. For example, iOS will automatically apply it's custom rounded corners, so the source file should not already come with rounded corners. ThisPhotoshop icon template provides the recommended size and guidelines of the artwork's safe zone.

$ ionic resources --icon

• Photoshop Icon Template

Splash Screen Source Image

Save a splash.png, splash.psd or splash.ai file within the resources directory at the root of the Cordova project. Splash screen dimensions vary for each platform, device and orientation, so a square source image is required the generate each of various sizes. The source image's minimum dimensions should be 2208x2208 px, and its artwork should be centered within the square, knowing that each generated image will be center cropped into landscape and portrait images. The splash screen's artwork should roughly fit within a center square (1200x1200 px). This Photoshop splash screen template provides the recommended size and guidelines of the artwork's safe zone. Additionally, when theOrientation preference config is set to either landscape or portrait mode, then only the necessary images will be generated.

$ ionic resources --splash

• Photoshop Splash Screen Template

Generating Icons and Splash Screens

To generate both icons and splash screens, follow the instructions above and run:

$ ionic resources

Platform Specific Resource Images

One source image can be used to generate images for each platform by placing the file within the resources directory, such asresources/icon.png. To use different source images for individual platforms, place the source image in the respective platform's directory. For example, to use a different icon for Android, it should follow this path: resources/android/icon.png, and a different image for iOS would use this path: resources/ios/icon.png.

Reference: http://ionicframework.com/docs/cli