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 APIs (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 it run

npx cap open

4. Periodic Maintenance

Your Capacitor app needs periodic maintenance, such as updating dependencies and installing new plugins.

To update your app's dependencies, run

npx cap update

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 update @capacitor/cli
npm update @capacitor/core

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

npm update @capacitor/ios
npm update @capacitor/android
npm update @capacitor/electron


Back Next