How to increment the version number of an Ionic 3 project? - ionic-framework

Question

Is there a quick and easy way to increment the version number of an Ionic 3 project without having to manually edit each file where the version number appears?
I am thinking of config.xml, package.json, src/index.html and every other place inside the project where the version number appears.
Say I want to increment the version number from 2.3.4 to 2.3.5 after I've made some updates to the code. I would love to have something like
$ ionic run version-increment [major][middle][minor]
which would edit all the files at once.
Is there a plugin or a magic trick that could do that for me?

Answer 1

Ideally you should tie version updates to your build process. This way when you initiate build process you auto-increment version of your app.
You could do it this way in Ionic 4:
Step 1: Update ionic.config.json to feature a pre-build hook:
{
"name": "morphistic-app",
"type": "angular",
"id": "b8d9b232",
"integrations": {
"cordova": {}
},
"hooks": {
"build:before": "./config/build-before.js"
}
}
Step 2: Create build-before.js and add the following:
const fs = require('fs');
module.exports = (ctx) => {
if (ctx.build && ctx.build.configuration && ctx.build.configuration === "production") {
console.log("production build: performing version bump...");
// update package.json:
let packageJSON = JSON.parse(fs.readFileSync('package.json', 'utf-8').toString());
let versionArray = packageJSON.version.split(".");
versionArray[2] = (parseInt(versionArray[2])+1).toString();
packageJSON.version = versionArray.join(".");
fs.writeFileSync('package.json', JSON.stringify(packageJSON, null, "\t"), 'utf-8');
console.log("package.json app version updated");
let prodEnvData = fs.readFileSync(`src/environments/environment.prod.ts`, 'utf-8');
prodEnvData = prodEnvData.replace(/CURRENT_VERSION: ".*"/, `CURRENT_VERSION: "${packageJSON.version}"`);
fs.writeFileSync('src/environments/environment.prod.ts', prodEnvData, 'utf-8');
console.log("environments.prod.ts app version updated");
let devEnvData = fs.readFileSync(`src/environments/environment.dev.ts`, 'utf-8');
devEnvData = devEnvData.replace(/CURRENT_VERSION: ".*"/, `CURRENT_VERSION: "${packageJSON.version}"`);
fs.writeFileSync('src/environments/environment.dev.ts', devEnvData, 'utf-8');
console.log("environments.dev.ts app version updated");
let localEnvData = fs.readFileSync(`src/environments/environment.local.ts`, 'utf-8');
localEnvData = localEnvData.replace(/CURRENT_VERSION: ".*"/, `CURRENT_VERSION: "${packageJSON.version}"`);
fs.writeFileSync('src/environments/environment.local.ts', localEnvData, 'utf-8');
console.log("environments.local.ts app version updated");
let defaultEnvData = fs.readFileSync(`src/environments/environment.ts`, 'utf-8');
defaultEnvData = defaultEnvData.replace(/CURRENT_VERSION: ".*"/, `CURRENT_VERSION: "${packageJSON.version}"`);
fs.writeFileSync('src/environments/environment.ts', defaultEnvData, 'utf-8');
console.log("environments.ts app version updated");
let configXmlData = fs.readFileSync('config.xml', 'utf-8');
configXmlData = configXmlData.replace(/id="com.yourapp.ionic" version=".*"/, `id="com.yourapp.ionic" version="${packageJSON.version}"`);
fs.writeFileSync('config.xml', configXmlData,'utf-8');
console.log("config.xml app version updated");
};
};
The code above also handles environment file changes, you can skip that if it is not your goal.
if you need to update any html file - see above example with config.xml
Also the code above assumes your version is a semver compatible schema aka "n.n.n"
Alternatively in ionic 3 you could do:
Step 1: update your 'scripts' property inside package.json to point at your built step script:
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve --non-interactive",
"ionic:serve:before": "cross-env MY_ENV='dev' node ./config/env.config.js",
"ionic:build:before": "cross-env MY_ENV='prod' node ./config/env.config.js",
}
Please note I am using cross-env library to ensure environment variable can be available in the context of the script below:
Step 2: create env.config.js file:
var fs = require('fs');
function readWriteSync() {
let env = process.env.MY_ENV || 'dev';
console.log("updating configuration for: ", env);
// read env data:
let envData = fs.readFileSync(`config/environment.${env}.ts`, 'utf-8');
// read data from package.json:
let packageJSON = JSON.parse(fs.readFileSync('package.json', 'utf-8').toString());
let version;
if (env === "prod") {
let versionArray = packageJSON.version.split(".");
versionArray[2] = (parseInt(versionArray[2])+1).toString();
packageJSON.version = versionArray.join(".");
// write to package.json:
fs.writeFileSync('package.json', JSON.stringify(packageJSON, null, "\t"), 'utf-8');
};
version = packageJSON.version;
// replace env data:
envData = envData.replace(/CURRENT_VERSION: ".*"/, `CURRENT_VERSION: "${version}"`);
// write env data
fs.writeFileSync('src/environments/environment.ts', envData, 'utf-8');
// update config.xml:
let configXmlData = fs.readFileSync('config.xml', 'utf-8');
configXmlData = configXmlData.replace(/id="com.yourapp.ionic" version=".*"/, `id="com.yourapp.ionic" version="${version}"`);
fs.writeFileSync('config.xml', configXmlData,'utf-8');
};
readWriteSync();

Answer 2

I have a big Ionic/ Cordova Project and the only Place where you really need to have the version number is the config.xml. You should make your App to work with the number only there and then the manually change is not a big deal.