capacitor vs ionic code example

Example 1: ionic capacitor android

// if you didn't run before
ionic build
// then
npx cap add android
npx cap sync

Example 2: ionic capacitor platform web

if (Capacitor.platform !== 'web') {
	// TODO
}

Example 3: integrate capacitor with ionic

//New Ionic Project
ionic start myApp tabs --capacitor
cd myApp

//Existing Ionic Project
cd myApp
ionic integrations enable capacitor

//initialize Capacitor with your app information
//Note: npx is a new utility available in npm 5 or above that executes local binaries/scripts to avoid global installs.
npx cap init [appName] [appId]
//where appName is the name of your app, and appId is the domain identifier of your app (ex: com.example.app).
//Note: Use the native IDEs to change these properties after initial configuration.

//Build your Ionic App
//You must build your Ionic project at least once before adding any native platforms.
ionic build
//This creates the www folder that Capacitor has been automatically configured to use as the webDir in capacitor.config.json.

//Add Platforms
npx cap add ios
npx cap add android
//Both android and ios folders at the root of the project are created. These are entirely separate native project artifacts that should be considered part of your Ionic app (i.e., check them into source control, edit them in their own IDEs, etc.).

//Open IDE to build, run, and deploy
npx cap open ios
npx cap open android
//The native iOS and Android projects are opened in their standard IDEs (Xcode and Android Studio, respectively). Use the IDEs to run and deploy your app.

//Syncing your app with Capacitor
//Every time you perform a build (e.g. ionic build) that changes your web directory (default: www), you’ll need to copy those changes down to your native projects:
npx cap copy

Example 4: install capacitor ionic

npx cap init