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 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 Capacitor Full App Starter
Go to your project root and attach Capacitor with the project using
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
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.
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
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
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
or build
), you'll need to copy those changes down to your native projects using
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)
Last updated