Skip to content

Instantly share code, notes, and snippets.

@amandeepmittal
Created August 10, 2017 16:13
Show Gist options
  • Save amandeepmittal/b7f8facfcd16a5e10d1b67219d3757db to your computer and use it in GitHub Desktop.
Save amandeepmittal/b7f8facfcd16a5e10d1b67219d3757db to your computer and use it in GitHub Desktop.

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 boilerlpate 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:

https://gist.github.com/fec1948fddb8c5ce80353ce6c5ccbae6

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

https://gist.github.com/873eb984176bf026453b1896a3235527

Starting a new App

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

https://gist.github.com/fc3ff85554933c7935085488d49f9a57

For creating a new project:

https://gist.github.com/e24650203839d57f6b995b115a72ca84

With update to Ionic 3, no more adding tages 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):

https://gist.github.com/f69c11be0b1964f26193508b6f82a71b

Serving

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

https://gist.github.com/f195a940977ca571200207452bf727f9

To serve on a different port:

https://gist.github.com/77da56250a29001e595290d65aad771c

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

https://gist.github.com/acb7190dff1c80502284bd81b2e8132a

To serve without live reload:

https://gist.github.com/57735a85eb3389117fb86cd324991be6

Generating Providers and Pages

To generate a new page:

https://gist.github.com/40b1da7118fcdaeb94270c4cb00ba802

To generate a provider/service:

https://gist.github.com/e65ba1c90a53f4c6a17202d802a5558f

Know them all- List the available generators:

https://gist.github.com/0c05514d062f348df5c7aa17bcf5851b

Generating Resources

To generate the app icon and splash screen with resources:

https://gist.github.com/69ffb34c6a71549bde63d53704ac1f9d

Or, just the splash screen:

https://gist.github.com/740e4c296e4c5c218dc11238f2188c0d

Now, generate resources for a specific platform:

https://gist.github.com/faa19273da3e095fa5b9b37c1e9e7cdd

Adding Platform

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

https://gist.github.com/d959edf7b00535f3cb36683863dd1a79

App on an Emulator

To start an emulator:

https://gist.github.com/011ba4537f988dd127baf468cb8f5359

Emulate with livereload:

https://gist.github.com/47479216e79002108068e623bf15611d

Running Ionic App on a Connected Device

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

https://gist.github.com/06f681bf70eecc1d5ad19bf6d3e7d6a9

Producion check:

https://gist.github.com/cbfaed834002df4e12fa39e3e8dae0b9

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:

https://gist.github.com/727f715c91ae5b5817f87f4e0d1e8216

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment