Advertisements

Useful Ionic CLI Commands

Advertisements

The Ionic command-line interface (CLI) is the go-to tool for developing Ionic apps. Here we will see some useful ionic cli commands which helps us in developing app in Ionic. For example, commands for installing ionic globally, run app, build app etc.

Useful Ionic CLI Commands

Install Ionic CLI

The Ionic CLI can be installed globally with npm:

npm install -g @ionic/cli

Remove Previous Ionic CLI

npm uninstall -g ionic
npm install -g @ionic/cli

And when installation completes then under your system’s username directory you will see the ~/.ionic directory which is a global Ionic CLI configuration directory.

Create Ionic App

Create an Ionic app using one of the pre-made app templates, or a blank one to start fresh. The command below will asks project name, template.

ionic start

Ionic Help Command

It lists all the available commands for ionic.

ionic --help

Check Ionic CLI Version

ionic --version

Ionic config set

Under project’s directory Ionic has configuration file ionic.config.json. We can update the property or key of this file using the below command. Here ‘name’ is a property in this file, –force is used to overwrite existing value.

ionic config set name newAppName --force

Ionic Live Reload

Ionic live reload is used to test app in browser(as a web view) or in native device(android or ios).

ionic serve --lab

For Capacitor

ionic capacitor run ios
ionic capacitor run android

For Cordova

ionic cordova run android
ionic cordova run ios

Ionic build

It creates the www directory and builds web assets and prepares app for any platform(android, ios) targets.

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

Create Ionic Splash Screen and Icons

Inside resources directory add your splash.png(2732×2732px) and icon.png(1024×1024px) files then automatically create icon and splash screen resources for your android or ios platforms.

npm install -g cordova-res
Ionic add a native platform

For capacitor

ionic capacitor add android
ionic capacitor add ios

For cordova

ionic cordova add android
ionic cordova add ios

Ionic Build For Platforms

Build an Ionic project for a given platform.

For Capacitor

ionic capacitor build
ionic capacitor build android
ionic capacitor build ios

ionic capacitor build --prod
ionic capacitor build android --prod
ionic capacitor build ios --prod

For Cordova

ionic cordova build
ionic cordova build android
ionic cordova build ios

ionic cordova build --prod --release
ionic cordova build android --prod --release
ionic cordova build ios --prod --release

Ionic copy web assets

Copy web assets to native platforms

For Capacitor

ionic capacitor copy android
ionic capacitor copy ios

ionic capacitor copy android --prod
ionic capacitor copy ios --prod

For Cordova

ionic cordova prepare ios --prod
ionic cordova prepare android --prod

ionic cordova prepare
ionic cordova prepare ios
ionic cordova prepare android

Ionic Open IDE

Open the IDE for a given native platform project like android studio or XCode

ionic capacitor open android
ionic capacitor open ios

Ionic sync

Sync (copy + update) an Ionic project, run this command when if made changes in your code.

ionic capacitor sync android
ionic capacitor sync ios

ionic capacitor sync android --prod
ionic capacitor sync ios --prod

Ionic update

Update Capacitor native platform(s) and dependencies, install any discovered Capacitor or Cordova plugins

ionic capacitor update android
ionic capacitor update ios

Ionic Information

It lists all the information related to ionic project, cordova or capacitor plugins, platforms information, node or npm version, ionic cli information.

ionic info

Install Ionic Plugins

Capacitor Plugins

npm install @capacitor/plugin-name, For example, actionsheet plugin

npm install @capacitor/action-sheet
npx cap sync

Cordova Plugins

ionic cordova plugin add plugin-name, For example, actionsheet plugin

ionic cordova plugin add cordova-plugin-actionsheet
npm install @awesome-cordova-plugins/action-sheet

Recommended

Ionic Create Color Variables

List of Ionic UI Components

Create ActionSheet in Ionic 3

Ionic 5 E-Commerce Template

How to add animations in ionic application?

For more Ionic Tutorials visit Ionic page.

If you like this, share this.

Follow us on FacebookTwitterTumblrLinkedInYouTube.