See how Capacitor fits into the entire Ionic Ecosystem ->
Capacitor is part of the Ionic Ecosystem ->

Cordova to Capacitor Migration

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

Get Started
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.

AppleAndroid

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.

Cordova Camera
Capacitor Camera
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
});
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
npx @capacitor/cli plugin:generate

More Resources

Explore these resources to learn more about Capacitor
and make your Cordova migration easier.

Cordova vs Capacitor
Article
capacitorcordovacomparison

Cordova vs Capacitor

For developers and teams evaluating new approaches to app development, this guide provides an overview of Capacitor and how it stacks up against Cordova as the preferred foundation for hybrid mobile apps.

Capacitor 2.0: Mobile apps & PWAs from one codebase
Webinar
capacitornativePWAs

Capacitor 2.0: Mobile apps & PWAs from one codebase

The next evolution in mobile development is here. Build stunning app experiences that run on any platform.

PhoneGap Build Migration Guide
Blog
cordovadevopsappflow

PhoneGap Build Migration Guide

Check out our new guide covering how to transfer your PhoneGap Build-based application to Appflow, a mobile DevOps service from the Ionic team that works across any Cordova, Capacitor, or Ionic app.

Thanks to Capacitor, I’ve fallen in love with mobile development again
Blog
capacitorcordovanative

Thanks to Capacitor, I’ve fallen in love with mobile development again

Thanks to Capacitor, I’ve fallen in love with mobile development again

The Modern Hybrid App Developer
Blog
capacitormobilenative

The Modern Hybrid App Developer

Modern hybrid app development is nothing like it used to be