Chapter 2 of 12 ~12 min read

Project Setup & CLI

Side-by-side Cordova vs Capacitor — practical migration with working code.

CLI Commands — Side by Side

Cordova CLI

# Create project
ionic start myApp blank --type=angular --cordova

# Add platform
cordova platform add android
cordova platform add ios

# Build
cordova build android
cordova run android --device

# Add plugin
cordova plugin add cordova-plugin-camera

# Emulate
cordova emulate android

Capacitor CLI

# Create project
ionic start myApp blank --type=angular

# Add platform (once)
npx cap add android
npx cap add ios

# Sync web → native after changes
npx cap sync

# Open in native IDE
npx cap open android   # Android Studio
npx cap open ios       # Xcode

# Live reload on device
ionic cap run android -l --external

config.xml → capacitor.config.ts

Cordova — config.xml

<?xml version="1.0"?>
<widget id="com.example.myapp" version="1.0.0">
  <name>My App</name>
  <description>My Cordova App</description>
  <author email="dev@example.com">Dev</author>
  <content src="index.html"/>
  <preference name="StatusBarOverlaysWebView" value="false"/>
  <preference name="ScrollEnabled" value="false"/>
  <plugin name="cordova-plugin-camera" spec="^7.0.0"/>
  <engine name="android" spec="^12.0.0"/>
</widget>

Capacitor — capacitor.config.ts

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'My App',
  webDir: 'www',  // or 'dist', 'build'
  plugins: {
    SplashScreen: {
      launchShowDuration: 3000,
      backgroundColor: '#ffffff',
    },
    StatusBar: {
      style: 'dark',
    },
  },
};

export default config;

Native project folder structure

my-app/
├── android/          ← permanent native Android project (commit to git!)
├── ios/              ← permanent native iOS project (commit to git!)
├── src/              ← your web code
├── www/              ← built web output (gitignore this)
└── capacitor.config.ts

Unlike Cordova's regenerated platforms/, these are permanent. You edit AndroidManifest.xml, build.gradle, and Info.plist directly.

The npx cap sync Workflow

Daily workflow

# 1. Build your web app
ionic build   # outputs to www/

# 2. Sync web assets + installed plugins to native projects
npx cap sync  # = cap copy + cap update

# 3. Open native IDE (only needed for native code changes)
npx cap open android

# OR — hot reload during development:
ionic cap run android -l --external
# Live-reloads JS changes without re-syncing!

Back

Next chapter

Plugins & APIs