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 Vue 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 existing Ionic Vue Capacitor Full App

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]

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.

$ ionic build

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

// Add iOS platform
$ npx cap add ios

// Add android platform
$ npx cap add android

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

$ 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: wwwor 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