Cordova to Capacitor Migration

A modern development experience and 99% backward-compatibility with Cordova.

01

Create a new code branch.

Recommended, but not required.

cd my-app
git checkout -b cap-migration
02

Install Capacitor.

Create the Capacitor app using the Cordova app's name and id found in `config.xml`.

npm install @capacitor/cli @capacitor/core
npx cap init [name] [id]
03

Build the Web App.

The compiled web assets will be copied into each Capacitor native platform during the next step.

# Most web apps
npm run build
# Ionic app
ionic build
04

Install the native platforms you want to target.

Apple logoAndroid logo

Capacitor native projects exist in their own top-level folders and should be considered part of your app (check them into source control). Any existing Cordova plugins are automatically installed into each native project. 🎉

npx cap add android
npx cap add ios
05

Recreate Splash Screens and Icons.

Reuse the existing splash screen/icon images, located in the top-level `resources` folder of your Cordova project, using the `cordova-res` tool. Images are copied into each native project.

npm install -g cordova-res
cordova-res ios --skip-config --copy
cordova-res android --skip-config --copy
06

Audit existing Cordova plugins.

Review all of Capacitor's core and community plugins. You may be able to switch to the Capacitor-equivalent Cordova plugin, such as the Camera.

Remove unneeded ones to improve performance and reduce app size.

import { Camera } from '@ionic-native/camera/ngx';
constructor(private camera: Camera) {}
const photo = await this.camera.getPicture({
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
allowEdit: true,
saveToPhotoAlbum: true
});
import { Camera } from '@capacitor/camera';
const photo = await Camera.getPhoto({
quality: 100,
resultType: CameraResultType.Uri,
allowEditing: true,
saveToGallery: true
});
07

Remove Cordova from your project.

After successful migration testing, Cordova can be removed from the project.

# Remove a Cordova plugin
npm uninstall cordova-plugin-name
npx cap sync
# Delete Cordova folders and files
rm config.xml
rm -R platforms/
rm -R plugins/
08

Continue your Capacitor Journey.

This is only the beginning. Learn more about using Cordova plugins in a Capacitor project, check out the Capacitor development workflow, or create your own native plugin.

# Install a Cordova plugin
npm install cordova-plugin-name
npx cap sync
# Create a custom plugin
npm init @capacitor/plugin