Quick Reference – Ionic CLI Commands

In this post we will see some common Ionic CLI commands for Ionic app development.

Install Ionic CLI globally

Install Ionic CLI globally with npm.

npm install -g @ionic/cli

Ionic help

Get Ionic help.

ionic --help
ionic <command> --help
ionic <command> <subcommand> --help

Create a new Ionic Project

ionic start <name> <template> [options]

This command will create a new Ionic project.

Examples

ionic start

ionic start myapp

ionic start myapp tabs --type=angular

Build Ionic Project

ionic build [options]

ionic build will generate web assets for the Ionic project.

Examples

ionic build
ionic build --prod
ionic build --watch

Add Capacitor platform(s) to Ionic project

ionic capacitor add <platform>

ionic capacitor add will add Android or iOS Capacitor platform to the Ionic project.

Examples

Add Android

ionic capacitor add android

Add Ios

ionic capacitor add ios

Ionic Build for Android or iOS

ionic capacitor build <platform> [options]

ionic capacitor build will do the following:

  • Perform ionic build
  • Copy web assets into specified native platform.
  • Open IDE for native project, Xcode for iOS, Android Studio for Android.

Following command will ask user to select platform Android or iOS.

ionic capacitor build

Build for android

ionic capacitor build android

Build for iOS

ionic capacitor build ios

Open project in Android Studio

ionic capacitor open android

Copy web assets to native platforms

ionic capacitor copy [<platform>] [options]

ionic capacitor copy will do the following:

  • Perform ionic build, which compile web assets.
  • Copy web assets to Capacitor native platform(s).
  • This command will not open the IDE for respective platform.

Open IDE for a given native platform

ionic capacitor open <platform> [options]

This command will open the IDE for native project (Xcode for iOS, Android Studio for iOS).

Run Ionic project for platform

ionic capacitor run <platform> [options]

ionic capacitor run will do the following:

  • Build the ionic project.
  • Run the project in emulator (tested for Android).

Build and Copy project and then update native platform 

ionic capacitor sync [<platform>] [options]

ionic capacitor sync will do the following:

  • Perform ionic build, which will generate web assets.
  • Copy web assets to Capacitor native platform(s).
  • Update Capacitor native platform(s) and dependecies.
  • Install and discovered Capacitor or Cordova plugins.

Examples:

For android

ionic capacitor sync android

For iOS

ionic capacitor sync ios

Update Capacitor native platforms, install Capacitor/Cordova plugins

ionic capacitor update [<platform>] [options]

ionic capacitor update will do the following:

  • Update Capacitor native platform(s) and dependencies.
  • Install any discovered Capacitor or Cordova plugins.

Generate Icons for Capacitor project

cordova-res <platform> --skip-config --copy

Reference npm package

https://www.npmjs.com/package/cordova-res

Expected project structure

resources/
├── icon.png
└── splash.png
config.xml
  • resources/icon.(png|jpg) must be at least 1024×1024px
  • resources/splash.(png|jpg) must be at least 2732×2732px
  • config.xml is optional. If present, the generated images are registered accordingly

Conclusion

In this tutorial we learned what are the common commands for Ionic project development.

Leave a comment