There are two ways to start using Capacitor - adding Capacitor to an existing frontend project (recommended), or starting a fresh project. Since we have a front-end project ready in the form of Ionic React Capacitor Full App, we'll go with the first option.
Make sure you have all the required dependencies installed for the platforms you will be building for, as per Initial Setup. Most importantly, make sure you update CocoaPods using
pod repo update before starting a new project, if you plan on building for iOS using a Mac.
Go to your project root and attach Capacitor with the project using
$ ionic integrations enable capacitor
You will also want to initialize your project with Capacitor. This sets the App name and App ID for the project. App Id becomes the package name in Android and bundle ID in iOS
$ npx cap init [appName] [appId]
appName is the name of your app, and
appId is the domain identifier of your app (ex:
After this command, your settings will be saved in
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
capacitor.config.json. Sometimes, this folder is named
build instead of
www . In such case, go to
capacitor.config.json and change your
// Add iOS platform$ npx cap add ios// Add android platform$ 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.).
$ 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.
Every time you perform a build (e.g.
ionic build) that changes your web directory (default:
build), you'll need to copy those changes down to your native projects using
$ npx cap copy
If you have installed a new plugin or package, you'll have to run this command to copy everything in the platforms (no need to run
npx cap copy in this case)
$ npx cap sync