Using Capacitor with Ionic
Install Capacitor into an Ionic project
Capacitor is easily installed directly into any Ionic project (1.0-4.x+).
New Ionic Project
ionic start myApp tabs --capacitor
Existing Ionic Project
ionic integrations enable capacitor
Initialize Capacitor with your app information
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]
appName is the name of your app, and
appId is the domain identifier of your app (ex:
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.
This creates the
www folder that Capacitor has been automatically configured to use as the
npx cap add ios
npx cap add android
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
Using Cordova and Ionic Native Plugins
Cordova and Ionic Native plugins are supported in Capacitor. See the Using Cordova Plugins guide for more information.
Want to start using Capacitor in an Ionic app immediately? Check out this guide.