Recommended, but not required.
cd my-app
git checkout -b cap-migration
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]
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
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
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
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
});
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/
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
Explore these resources to learn more about Capacitor
and make your Cordova migration easier.
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.
The next evolution in mobile development is here. Build stunning app experiences that run on any platform.
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
Modern hybrid app development is nothing like it used to be