How to use this template
Building App on device
Learn how to build the app on device using Capacitor
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.
Before you start
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.Attaching Capacitor to Ionic React Capacitor Full App
Go to your project root and attach Capacitor with the project using
1
$ ionic integrations enable capacitor
Copied!
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
1
$ npx cap init [appName] [appId]
Copied!
where
appName is the name of your app, and appId is the domain identifier of your app (ex: com.example.app).After this command, your settings will be saved in
capacitor.config.json Once the App Name and AppId are set, these can be changed through Native IDEs i.e. Android Studio and Xcode
Build your Ionic App
You must build your Ionic project at least once before adding any native platforms.
1
$ ionic build
Copied!
This creates the
www folder that Capacitor has been automatically configured to use as the webDir in capacitor.config.json. Sometimes, this folder is named build instead of www . In such case, go to capacitor.config.json and change your webDir to build Add Platforms
1
// Add iOS platform
2
$ npx cap add ios
3
4
// Add android platform
5
$ npx cap add android
Copied!
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
1
$ npx cap open ios
2
$ npx cap open android
Copied!
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: wwwor build), you'll need to copy those changes down to your native projects using1
$ npx cap copy
Copied!
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)1
$ npx cap sync
Copied!
Last modified 2yr ago