Configuring Cordova Plugins for Capacitor Apps Built with Appflow

One of the core design principles for Capacitor is giving users control over their native project source code. Therefore, configurations designated for a specific native type should be made within either ./android or ./iOS directories of the Capacitor project. This configuration process differs from Cordova which expects these configurations to be made within a plugin.xml file. Therefore, any Cordova plugin used in a Capacitor app will need to have the configurations within the plugin’s plugin.xml file mapped into the Capacitor native directories. 

When building a Capacitor app locally, this can be accomplished by adding the native platform to the Capacitor project and then modifying the Capacitor configuration file and the native resources to match what was defined in the plugin.xml files. For a thorough example of this process, we highly recommend reading John Morony of EliteIonic’s guide, Migrating Cordova Plugins to Capacitor (Android). 

However, building Capacitor apps within Appflow introduces an additional challenge to this process. Appflow has a build step that will run npx cap sync for the specified native type. 

So it is possible for Cordova configurations that were manually added to the native resources in the local repository to be overwritten by the sync command during the Appflow build process. To ensure that the Cordova configurations are preserved in Appflow, we recommend using Capacitor CLI Hooks to execute scripts to add these configurations after the sync command has been executed. Here we provide an example to utilize these hooks in the scenario described in the EliteIonic guide. 

Example

In the package.json file found in the Capacitor app’s root directory,  the CLI hook capacitor:sync:after is added to the scripts object which will execute a script called configCordovaPlugin.js. 

When the configCordovaPlugin.js script is executed after the npx cap sync command has been executed in the Appflow build, the script will replace the string.xml, AndroidManifest.xml, and info.plist files depending on the native type detected during the build process. 

configCordovaPlugin.js

fs = require('fs');

function overwriteFile(src, dest, fileName, platform) {
   try {
       var data = fs.readFileSync(src, 'utf8');
   } catch (err) {
       console.error(err);
   }
   try {
       fs.writeFileSync(dest, data);
       console.log(`${fileName} file written successfully to ${platform} project`);
   } catch (err) {
       console.error(err);
   }
}

let stringsFileSrc = "./cordovaConfig/strings.xml";
let stringsFileDest = "./android/app/src/main/res/values/strings.xml";
let manifestFileSrc = "./cordovaConfig/AndroidManifest.xml";
let manifestFileDest = "./android/app/src/main/AndroidManifest.xml";
let plistFileSrc = "./cordovaConfig/info.plist";
let plistFileDest = "./ios/App/App/info.plist";

if (process.env.CI_PLATFORM == "android") {
   console.log("Android build detected.");
   // Update strings.xml
   overwriteFile(stringsFileSrc, stringsFileDest, "strings.xml", "android");
   // Update AndroidManifest.xml
   overwriteFile(manifestFileSrc, manifestFileDest, "AndroidManifest.xml", "android");
} else {
   console.log("iOS build detected.");
   // Update info.plist
   overwriteFile(plistFileSrc, plistFileDest, "info.plist", "iOS");
}

The script will also generate messages in the Appflow build logs indicating if the files were copied successfully. 

Lastly, the replacement files referenced in the script are stored in the ./cordovaConfig directory found at the root of the Capacitor project: