Capacitor

How to use Capacitor to deploy your apps?

The Capacitor workflow involves a few consistent tasks:

• ​Develop and build your Web App​

• ​Copy your Web Assets​

• ​Open your Native IDE​

• ​Periodic Maintenance​

iOS Platform

This app has an iOS folder which contains the iOS native app. Read how to build this app for iOS.

Android Platform

This app has an Android folder which contains the Android native app. Read how to build this app for Android.

How to build the project with Capacitor?

Follow the steps from the Capacitor Workflow.

1. Develop and build your Web 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.

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.).

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

See how to do this in the following video.

How to remove Capacitor and use Cordova?

• Delete ios, android and .gradle folders

• Delete capacitor.config.json

• Run: ionic integrations disable capacitor

• Run: ionic cordova platform add ios

• Run: ionic cordova platform add android

You will have to change the Capacitor plugins for Ionic Native plugins.

Install Ionic Native by running:

npm install @ionic-native/core @ionic-native/status-bar @ionic-native/splash-screen --save

Go to app.component.tsand do the following:

Remove:

import { Plugins } from '@capacitor/core';
const { SplashScreen } = Plugins;

Add:

import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Platform } from '@ionic/angular';

Change the initializeApp() method for the following code:

initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

Add the following parameters to the constructor:

  constructor(..., 
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar)

Now go to app.module.ts and add the following:

import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

Then add them as providers of the module:

  providers: [
    StatusBar,
    SplashScreen,
    ...
  ],

Now if you run ionic serve everything should work fine.

Now you can safely remove the Capacitor dependencies from your package.json.

npm uninstall --save @capacitor/android
npm uninstall --save @capacitor/cli
npm uninstall --save @capacitor/core
npm uninstall --save @capacitor/ios