Ionic 2/3 CLI Reference

Published on Dec 19, 2017

•

4 min read

•

IONIC

Originally Published at Hackernoon.com

The Ionic CLI is your go-to tool for developing Ionic apps.

Ionic CLI is a great tool when it comes to avoid writing a lot of boilerplate code. It generates pages, services, can run or emulate your Ionic application with and generate needed resources for the mobile application such as splash screen.

This is a quick reference into Ionic CLI.

Installing the CLI Tool

🔗

You can install it with npm:


$ npm install -g ionic

To check if it has installed correctly, in your terminal window, type:


$ ionic info

global packages:

    @ionic/cli-utils : 1.3.0
    Ionic CLI        : 3.3.0

System:

    Node       : v6.11.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.1 Build version 8B62
    ios-deploy : not installed
    ios-sim    : not installed

Starting a new App

🔗

To start with a new mobile application, Ionic framework provides different set of ready-to-use templates:


$ ionic start --list

tabs ............... ionic-angular A starting project with a simple tabbed interface
blank .............. ionic-angular A blank starter project
sidemenu ........... ionic-angular A starting project with
                    a side menu with navigation in the content area
super .............. ionic-angular A starting project
                    complete with pre-built pages,
                    providers and best practices
                    for Ionic development.
conference ......... ionic-angular A project that
                    demonstrates a realworld application
tutorial ........... ionic-angular A tutorial based
                      project that goes along with the
                      Ionic documentation
aws ................ ionic-angular AWS Mobile Hub Starter

For creating a new project:


$ ionic start my-new-app blank

With update to Ionic 3, no more adding tags such as _--v2_ after the template name in the above command. By default, Ionic app generated will be of version 2/3. To generate an Ionic app of version 1 (with good ol' Angularjs):


$ ionic start my-new-app blank --v1

Serving

🔗

Once you cd into your project’s directory, serve your app on your local machine with serve:


$ ionic serve

To serve on a different port:


$ ionic serve --port 9100

Use –-lab tag to see your app side by side on multiple platforms (such as iOS, Android and Windows Mobile):


$ ionic serve --lab

To serve without live reload:


$ ionic serve --nolivereload

Generating Providers and Pages

🔗

To generate a new page:


$ ionic  g page Page2

To generate a provider/service:


$ ionic g provider DataService

Know them all- List the available generators:


$ ionic g --list

Generating Resources

🔗

To generate the app icon and splash screen with resources:


$ ionic cordova resources

To generate just the app icon:


$ ionic cordova resources --icon

Or, just the splash screen:


$ ionic cordova resources --splash

Now, generate resources for a specific platform:


$ ionic cordova resources android

Add Ionic Plugins

🔗


$ ionic cordova plugin [action] [plugin]

# Example
$ ionic cordova plugin add cordova-plugin-x-socialsharing

Adding Platform

🔗

To add a target mobile platform for the app to use:


$ ionic cordova add android

App on an Emulator

🔗

To start an emulator:


$ ionic cordova emulate ios

Emulate with livereload:


$ ionic cordova emulate ios --livereload

Running Ionic App on a Connected Device

🔗

Let’s say, I have an iOS device connected, so to run the app on that device:


$ ionic cordova run ios --device

Production check:


$ ionic cordova run android --prod --release

Git Initialisation

🔗

Another advantage of using Ionic CLI tool is that it initialises a git repository when creating an Ionic project using the ionic start command from the terminal with an initial commit already. You can verify that by running:


$ git log --oneline --graph --decorate --color

# Output
* 029f86e (HEAD -> master) Initial commit

Share this article on X (Twitter)

Browse all posts

⬅️ Previous: Gatsby.js - How to set up and use the React Static Site Generator

Next: Passing Data Between Pages in an Ionic Application ➡️

Aman Mittal author

Buy me coffee

GitHub

X (Twitter)

I'm a software developer and a technical writer. On this blog, I write about my learnings in software development and technical writing.

Currently, working maintaining docs at 𝝠 Expo. Read more about me on the About page.