Ionic 3 Prod Build With Version Number

Question

I use the following command when building an ionic project for desktop

ionic cordova build browser --prod

Which results in the following file being generated

build/main.js

However I would like to be able to add a version number to the generated file automatically as part of the build process. So would end up with something like

build/main.js?version=1.00

as to avoid needing to clear the browser cache after every prod build.

Is there a flag for this, or is it something I must do manually?

Any advice would be great!

EDIT:

My solution is on GitHub for anyone interested!

https://github.com/RichardM99/ionic-3-version-build-file-hook

Answer 1

I wrote blog long time ago

In my build pipeline i have command to set version

version "$(app.versionPrefix)$(Build.BuildNumber)"

$(app.versionPrefix) - is a prefix version such as 0.1.

$(Build.BuildNumber) - is build version

Then I have environment file

export const environment = {
    apiUrl: 'https://....',
    production: true,
    version: '0.0.57'                                     
}

Then i have js script to update version in environment and config.xml

var replace = require('replace-in-file');
var package = require("./package.json");
var buildVersion = package.version;
const options = {
    files: ['config.xml'],
    from: /" version="([0-9]*.[0-9]*.[0-9]*)"/g,
    to: "\" version=\""+ buildVersion + "\"",
    allowEmptyPaths: false,
};

const optionsEnv = {
     files: ['src/environments/environment.prod.ts'],
    from: /version: '(.*)'/g,
    to: "version: '"+ buildVersion + "' ",
    allowEmptyPaths: false,
};

try {
    let changedFiles = replace.sync(options);
    if (changedFiles == 0) {
        throw "Please make sure that file '" + options.files + "' has \"version: ''\"";
    }
    changedFiles = replace.sync(optionsEnv);
    if (changedFiles == 0) {
        throw "Please make sure that file '" + optionsEnv.files + "' has \"version: ''\"";
    }
    console.log('Build version set: "' + options.to + '"');
}
catch (error) {
    console.error('Error occurred:', error);
    throw error
}

NOTE: you need to install plugin replace-in-file

Then in build pipe line I am running this script

node ./replace.build.js

In your case if you need only for browser you can tune script.

Answer 2

Here's some advice - You can create a cordova hook.

Hooks are scripts that you want to be executed at different stages of the build process. In your case, you are looking at a script which renames the main.js file after the build event is finished, or in other words a 'after_build' type hook.

The script will usually be a Node.js file, although you can have other types of scripts executed as well.

One more thing. Since you want to get around cache, you wont be renaming the file itself. What you will want to do is rather replace the reference to "main.js" in you "index.html" to include a random or maybe your actual version number.

I have pointed you in a direction, but won't spoonfeed. Look up documentation on cordova hooks. They are super simple if you understand Javascript/Node

Something like this should get the job done:

var index_orig = fs.readFileSync(path-to-index.html, 'utf8');
var index_new = index_orig.replace("main.js", "main.js?version="+version_num);
fs.writeFileSync(path-to-index.html, index_new, 'utf8');

If you want the actual build number, you can read your config.xml and parse it to get it's value.

Hope it helps.