Cordova to Capacitor Migration
A modern development experience and 99% backward-compatibility with Cordova.
Get StartedCreate a new code branch.
Recommended, but not required.
cd my-app
git checkout -b cap-migrationInstall 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]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 buildInstall the native platforms you want to target.
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 iosRecreate 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 --copyAudit 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
});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/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:generateMore Resources
Explore these resources to learn more about Capacitor
and make your Cordova migration easier.
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
The next evolution in mobile development is here. Build stunning app experiences that run on any platform.
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
Thanks to Capacitor, I’ve fallen in love with mobile development again
The Modern Hybrid App Developer
Modern hybrid app development is nothing like it used to be
