Capacitor Workflow

The Capacitor workflow involves a few consistent tasks:

1. Develop and build your Web App

Capacitor turns your web app into a native binary for each platform. Thus, much of your work will consist of developing and then building a mobile-focused web app.

You will interact with the native platform underneath using Capacitor’s plugins (such as Camera), or by using existing Cordova plugins with Capacitor’s Cordova Compatibility.

As a final step, you will build your application using a command similar to:

npm run build

If you are using a framework, follow your framework’s build process. If, for example, you are using Ionic, this would be:

ionic build

2. Copy your Web Assets

When you are ready to run your app natively on a device or in a simulator, copy your built web assets using:

npx cap copy

3. Open your Native IDE

Capacitor uses the Native IDEs to build, simulate, and run your app. To open one, run:

npx cap open

4. Update the native project

In some cases, the Capacitor app needs to be updated, such as when installing new plugins.

To install new plugins (including Cordova ones), run:

npm install really-cool-plugin
npx cap update

5. Updating Capacitor

To check if there are any new updates to Capacitor itself, run npx cap doctor to print out the current installed dependencies as well view the latest available.

To update Capacitor Core and CLI:

npm install @capacitor/cli@latest
npm install @capacitor/core@latest

To update any or all of the platforms you are using:

npm install @capacitor/ios@latest
npm install @capacitor/android@latest

Note: If you don’t want to risk introducing breaking changes, use npm update @capacitor/package-name instead of @latest as update respects semantic versioning.