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

Get Started

By · Reviewed & last updated · Part of Ionic Tutorial

Scaffold an Ionic app with the official CLI, run it in the browser and on devices, and ship to app stores.

Ionic — getting started

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

# Choose a framework flavour on init:
ionic start my-app blank --type=angular        # or react, vue

cd my-app

# ===== 2. Run =====
ionic serve
# Opens at http://localhost:8100 with live reload.

# ===== 3. The structure (Angular flavour) =====
# src/app/home/home.page.html
# src/app/home/home.page.ts
# src/app/app.module.ts
# capacitor.config.ts          // native config

# Edit home.page.html:
<ion-app>
  <ion-header><ion-toolbar><ion-title>Hello</ion-title></ion-toolbar></ion-header>
  <ion-content class="ion-padding">
    <ion-card>
      <ion-card-header><ion-card-title>Welcome</ion-card-title></ion-card-header>
      <ion-card-content>Clicks: {{ count }}</ion-card-content>
    </ion-card>
    <ion-button (click)="count = count + 1">+1</ion-button>
  </ion-content>
</ion-app>

# ===== 4. Add native (Capacitor) =====
ionic build
npx cap add ios
npx cap add android
npx cap sync

# Open in native IDEs:
npx cap open ios       # macOS only
npx cap open android

# ===== 5. Use a Capacitor plugin =====
npm install @capacitor/camera
npx cap sync

# Code:
import { Camera, CameraResultType } from '@capacitor/camera';
const photo = await Camera.getPhoto({ resultType: CameraResultType.Uri });

# ===== 6. PWA out of the box =====
ionic build --prod
# Output in www/ — deploy anywhere static. Service worker + manifest already configured.

# ===== 7. Release builds =====
# iOS: archive via Xcode -> distribute to App Store Connect
# Android: ionic capacitor build android --prod -> open Android Studio, build AAB

# ===== 8. Useful CLI =====
ionic generate page settings          # scaffold pages
ionic generate component task-card    # scaffold components
ionic g service auth                  # services
ionic config get                      # see project config
ionic info                            # versions + env

# ===== Patterns to internalise =====
# - Use Ionic components; do not roll plain divs for things ion-* covers
# - Capacitor plugins for native; native code only when necessary
# - Test on a REAL device early; browser preview lies about gestures
# - PWA + app store + web from one codebase

# ===== Pitfalls =====
# - Forgetting npx cap sync after installing a plugin (native side not wired)
# - Mixing Bootstrap / Tailwind CSS with Ionic CSS variables -> drift
# - Long lists without ion-virtual-scroll on cheap Android devices
# - Production builds via 'ionic serve' (it is a dev server!)

Why it matters

Ionic CLI + Capacitor is the fastest hybrid mobile loop. Pick a framework flavour, scaffold, run in browser, add iOS / Android targets, sync. Capacitor plugins bridge native APIs from JS — and the same codebase ships to web as a PWA.

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

Example

Example
npm install -g @ionic/cli
ionic start myApp blank --type=react
cd myApp
ionic serve
Try it Yourself »

Exercise

Start a new Ionic app (blank, React).

ionic myApp blank --type=react

Discussion

Loading…