1 Understand the Hybrid App Concept

A hybrid app is:

• Written in HTML, CSS, JavaScript (like a website).

• Runs inside a native container (Cordova/Capacitor) so it can access device APIs.

• Deployable to Android, iOS, and the web with the same codebase.

2 Install the Required Tools

Prerequisites:

• Node.js (https://nodejs.org) → Comes with npm (Node Package Manager).

• Git (https://git-scm.com/)

• Android Studio (for Android build) → Make sure to set ANDROID_HOME in environment variables.

• Xcode (Mac only, for iOS build).

• VS Code or your preferred editor.

Install Ionic CLI:

npm install -g @ionic/cli

3 Create a New Ionic App

Run:

ionic start myApp tabs

Options:

• myApp → Project name.

• tabs → Starter template (you can also choose blank, sidemenu, etc.).

Navigate into your app:

cd myApp

4 Choose Cordova or Capacitor

By default, Ionic uses Capacitor.
If you prefer Cordova:

ionic integrations enable cordova

5 Test in Browser

Run:

ionic serve

This launches the app in your browser with hot-reload.

6 Add Native Platform

For Capacitor:

ionic build
npx cap add android
npx cap add ios

For Cordova:

ionic cordova platform add android
ionic cordova platform add ios

7 Access Native Features

Install native plugins (e.g., Camera):

• Capacitor:

npm install @capacitor/camera
npx cap sync

• Cordova:

ionic cordova plugin add cordova-plugin-camera
npm install @awesome-cordova-plugins/camera

8 Run on Device or Emulator

• Capacitor:

npx cap open android
npx cap open ios

• Cordova:

ionic cordova run android
ionic cordova run ios

9 Build for Production

• Capacitor:

ionic build
npx cap copy
npx cap sync

• Cordova:

ionic cordova build android --prod --release

10 Publish

• Android: Sign APK/AAB and upload to Google Play Console.

• iOS: Archive in Xcode and submit via App Store Connect.

✅ Tip:
If you want web + mobile from the same project, Ionic with Capacitor is the most future-proof choice.
Cordova is older, but still works for many plugins.