Cordova: Use environment variables in config.xml

Question

I believe exposing API secret key should be avoided. How can I use environment variable as a parameter in config.xml per a different environment during build time?

For example,

<preference name="TwitterConsumerKey" value="$TWITTER_KEY" />
<preference name="TwitterConsumerSecret" value="$TWITTER_SECRET" />

Assumption: TWITTER_KEY and TWITTER_SECRET should be placed in dev and prod environment files with different values.

I'm currently using a custom webpack configuration like below.

const chalk = require("chalk");
const fs = require('fs');
const path = require('path');
const useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

let env = process.env.IONIC_ENV;

useDefaultConfig.prod.resolve.alias = {
  "@projectName/env": path.resolve(environmentPath('prod'))
};

useDefaultConfig.dev.resolve.alias = {
  "@projectName/env": path.resolve(environmentPath('dev')),
};

if (env !== 'prod' && env !== 'dev') {
  // Default to dev config
  useDefaultConfig[env] = useDefaultConfig.dev;
  useDefaultConfig[env].resolve.alias = {
    "@projectName/env": path.resolve(environmentPath(env))
  };
}

function environmentPath(env) {
  var filePath = './src/environments/environment' + (env === 'prod' ? '' : '.' + env) + '.ts';
  if (!fs.existsSync(filePath)) {
    console.log(chalk.red('\n' + filePath + ' does not exist!'));
  } else {
    return filePath;
  }
}

module.exports = function () {
  return useDefaultConfig;
};

What kind of things should I include in my custom configuration to make things happen?

EDIT

environment.ts

export const environment = {
  mode: 'Production',
  production: true,
  firebase: {
    apiKey: "SOME KEY",
    authDomain: "prod.firebaseapp.com",
    databaseURL: "https://prod.firebaseio.com",
    projectId: "prod",
    storageBucket: "prod.appspot.com",
    messagingSenderId: "SOME ID"
  },

  // I'd like to use these key values in config.xml during build time
  TWITTER_KEY: "SOME KEY", 
  TWITTER_SECRET: "SOME SECRET KEY"
};

environment.dev.ts

export const environment = {
  mode: 'Development',
  production: false,
  firebase: {
     apiKey: "SOME KEY",
     authDomain: "dev.firebaseapp.com",
     databaseURL: "https://dev.firebaseio.com",
     projectId: "dev",
     storageBucket: "dev.appspot.com",
     messagingSenderId: "SOME ID"
  },

  // Use these key values as well
  TWITTER_KEY: "SOME KEY", 
  TWITTER_SECRET: "SOME SECRET KEY"
};

For instance, ionic cordova build ios --dev will be using environment.dev.ts variables. On the other hand, ionic cordova build ios --prod will be using environment.ts variables.

Answer 1

I solved things like this simply by loading and parsing the config.xml (or whatever I needed, like .git/HEAD resp. ./git/refs/heads/* to get a latest commit hash) programmatically; considering your environment.{dev,prod}.ts it could be (inside your webpack config):

// just get the environment files:
const devEnvironment = require('/path/to/environment.dev.ts').environment;
const prodEnvironment = require('/path/to/environment.prod.ts').environment;

//...

const envConfig = env === 'prod' ? prodEnvironment : devEnvironment;

var twitterKey;
var twitterSecret;
// load the config.xml
var configXmlFile = fs.readFileSync(path.join(__dirname, './config.xml'));
// get it's rows
var configRows = configXmlFile.toString().split(/\n/);
// traverse the rows
configRows.forEach(function (row) {
    // check if the row do have what we're looking for
    if (row.indexOf('TwitterConsumerKey') !== -1) {
        // get the environment variable name
        var twitterKeyVarName = row.replace(/.*value="\$([^"]*)".*/, '$1');
        // get the variable value - environment file variant
        twitterKey = envConfig[twitterKeyVarName];
    }
    else if (row.indexOf('TwitterConsumerSecret') !== -1) {
        var twitterSecretVarName = row.replace(/.*value="\$([^"]*)".*/, '$1');
        twitterSecret = envConfig[twitterSecretVarName];
    }
});

Could probably be written in a more elegant way but that's the idea.