Chapter 9 of 12 ~18 min read

Native Builds & IDE

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

Build Workflow Comparison

Cordova

# Everything via CLI — opaque
ionic cordova build android
ionic cordova build android --prod --release

# Run on device
ionic cordova run android --device

# Signing (via hook scripts or CLI flags)
cordova build android --release -- \
  --keystore=my.keystore \
  --storePassword=pass \
  --alias=mykey

# Generated platforms/ folder — re-created on build
# ❌ Can't easily edit native code directly

Capacitor

# Step 1: Build web
ionic build --prod

# Step 2: Sync to native
npx cap sync

# Step 3: Open native IDE
npx cap open android   # Android Studio
npx cap open ios       # Xcode

# Live reload (dev only)
ionic cap run android -l --external

# android/ and ios/ are permanent — commit to git!
# ✅ Edit build.gradle, Info.plist directly

Android Release Signing

android/app/build.gradle

// Edit directly — no CLI flags or hooks!
android {
    signingConfigs {
        release {
            storeFile file(System.getenv("KEYSTORE_PATH") ?: "my-release.keystore")
            storePassword System.getenv("KEYSTORE_PASS")
            keyAlias System.getenv("KEY_ALIAS")
            keyPassword System.getenv("KEY_PASS")
        }
    }
    buildTypes {
        release {
            signingConfig signingConfigs.release
            minifyEnabled true
            proguardFiles getDefaultProguardFile(
                'proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

Cap Sync Under the Hood

What npx cap sync does

cap copy: Copies your www/ build into android/app/src/main/assets/public/ and ios/App/App/public/
cap update: Installs and updates any Capacitor plugins that changed in package.json
Run it every time you: install a new plugin, change capacitor.config.ts, or want to push a new web build to native

Back

Next chapter

App Lifecycle