Using Capacitor with Ionic Framework
Installing
Capacitor can be installed directly into any new or existing Ionic app.
New Ionic Project
Capacitor is installed in new Ionic apps by default! All you have to do is start a new project:
ionic start
If you'd like a tutorial for building your first Ionic/Capacitor app, see this tutorial.
Existing Ionic Project
Install and initialize Capacitor with your app name and bundle ID:
ionic integrations enable capacitor
Ionic Framework makes use of the APIs in the following plugins:
For the best user experience, you should make sure these plugins are installed even if you don't import them in your app:
npm install @capacitor/app @capacitor/haptics @capacitor/keyboard @capacitor/status-bar
If your Ionic app uses Cordova, you will want to read the Migrating from Cordova to Capacitor guide as well.
Add Platforms
After Capacitor installed, you can add native platforms to your app:
ionic capacitor add
This will create a new directory in the root of your project for the native platform. This directory is a native project that should be considered a source artifact. Learn more about native project management.
Workflow
Build your Ionic App
Capacitor JavaScript libraries are bundled into your app, so the web asset build is no different after Capacitor is installed.
ionic build
This creates the web asset directory that Capacitor copies into native projects, configured via webDir in the Capacitor configuration.
Ionic CLI Capacitor Commands
The Ionic CLI has a variety of high-level commands that wrap the Capacitor CLI for convenience. See the documentation for each below. Help output is also available by using the --help flag after each command.