Create a new code branch.
Recommended, but not required.
cd my-app
git checkout -b cap-migrationCordova to Capacitor Migration
A modern development experience and 99% backward-compatibility with Cordova.
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]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
});import { Camera } from '@capacitor/camera';
const photo = await Camera.getPhoto({
quality: 100,
resultType: CameraResultType.Uri,
allowEditing: true,
saveToGallery: 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
npm init @capacitor/pluginMore Resources
Explore these resources to learn more about Capacitor
and make your Cordova migration easier.
