Capacitor: Setup, Native Projects & Sync Workflow

Capacitor (built by the Ionic team) wraps a web app (HTML/CSS/JS) in a native iOS/Android shell, rendering it in a WebView while exposing native device APIs to JS via a plugin bridge -- a modernized successor to Cordova's approach, with native projects treated as real, editable source rather than fully hidden.

Setup & Native Projects

npm install @capacitor/core @capacitor/cli
npx cap init MyApp com.example.myapp

# Generates a real, editable native project -- not hidden away
npx cap add ios
npx cap add android

# Build your web app first, THEN sync the output into native projects
npm run build
npx cap sync   # = cap copy (web assets) + cap update (native plugin deps)

# Open the native IDE with the project pre-loaded
npx cap open ios       # launches Xcode
npx cap open android   # launches Android Studio

# Or build+deploy+launch directly from the CLI
npx cap run android
npx cap run ios

capacitor.config.ts

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

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'MyApp',
  webDir: 'dist',   // MUST match your web build's actual output folder --
                     // pointing at the wrong folder ships stale/empty content
  server: {
    // Live reload during development -- native shell loads from a
    // running dev server instead of the bundled static build
    url: 'http://192.168.1.10:5173',
    cleartext: true,
  },
};

export default config;

Debugging the WebView

• The app content is a real WebView -- standard remote debugging tools apply directly.

• iOS: Safari > Develop > [Device] > [App] opens the Web Inspector against the running native app.

• Android: chrome://inspect in desktop Chrome attaches to the WebView on a connected device/emulator.

• Full console, network tab, and DOM inspection -- exactly like debugging a mobile website.