iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Ionic CLI

By · Reviewed & last updated · Part of Ionic Tutorial

Ionic CLI: scaffold, generate, run, build, deploy. The shell verbs that drive day-to-day Ionic development.

Ionic — CLI tour

EXAMPLE
# ===== Install =====
npm install -g @ionic/cli
ionic --version

# ===== Create a project =====
ionic start my-app blank --type=angular        # or react, vue
ionic start shop tabs --type=react --capacitor

# Templates: blank, tabs, sidemenu, my-first-app
# Types: angular, react, vue

# ===== Daily commands =====
ionic serve                       # browser dev server (live reload)
ionic serve --lab                 # iOS + Android preview side-by-side
ionic build                       # production web build
ionic info                        # versions / env

# ===== Generators (Angular-flavoured projects) =====
ionic generate page settings
ionic generate component task-card
ionic generate service auth
ionic generate guard auth
ionic g pipe truncate

# ===== Capacitor commands (native) =====
ionic build
npx cap add ios                   # add native iOS project
npx cap add android               # add native Android project
npx cap sync                      # copy web assets + plugin config to native
npx cap copy                      # only copy web assets (faster)
npx cap update                    # update Capacitor dependencies
npx cap open ios                  # open in Xcode
npx cap open android              # open in Android Studio
npx cap run ios                   # build + run on iOS
npx cap run android               # build + run on Android

# ===== Live reload on a device =====
ionic capacitor run ios --livereload --external
ionic capacitor run android --livereload --external

# ===== Config =====
ionic config get                  # show full config
ionic config set name MyApp
ionic config set ionic.daemon false

# ===== Login + telemetry =====
ionic login                       # Ionic Cloud / Appflow
ionic logout
ionic signup
ionic telemetry off               # disable usage telemetry

# ===== Appflow (cloud build + OTA) =====
ionic deploy add                  # add to Appflow
ionic deploy build
ionic deploy manifest             # generate live update manifest

# Or use EAS / Bitrise / GitHub Actions for native builds; Appflow is optional.

# ===== Build for prod =====
ionic build --prod
npx cap sync
npx cap open android      # archive AAB via Android Studio
npx cap open ios          # archive IPA via Xcode

# ===== Common pitfalls in CLI use =====
# - Editing ios/ or android/ files but not running 'npx cap sync' -> changes lost
# - Forgetting 'npx cap sync' after npm install of a Capacitor plugin
# - Using 'ionic serve' for production (it's a dev server)
# - Mixing Cordova plugins with Capacitor without checking compatibility

# ===== Patterns to internalise =====
# - ionic generate for boilerplate; never copy-paste pages
# - npx cap sync after EVERY plugin install
# - --livereload on a real device for fast UX iteration
# - Pin Ionic + Capacitor versions in package.json

Why it matters

The Ionic CLI gives you scaffold, generate, run, build, deploy. Pair it with Capacitor commands (add / sync / copy / run / open). Most day-to-day work is a tight loop of edit -> serve -> sync -> open native; treat sync as non-skippable and the native side stays in step.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
ionic start  myApp tabs --type=angular
ionic serve
ionic build
ionic capacitor add ios
ionic capacitor sync
ionic capacitor open ios
Try it Yourself »

Exercise

Launch the dev server.

ionic

Discussion

Loading…