String replace during build

Ionic Framework ionic-v3
1

im trying to do a string replace inorder to place by git version in somewhere, so I can display it along with my version code (which i get from the ionic-native AppVersion).

currently i have writting a hook which i run in the before_prepare (in the config.xml)
<hook src="scripts/before_prepare_increment_build_number.js" type="before_prepare"/>
this is running correctly after the ionic scripts runs. and in my www/build/main.js the replacement is done correctly.

however, when i do ionic build android or ionic run android
the platforms/android/assets/www/build/main.js still has the original string.

I was under the assumption that when building the www folder was copied to the platform assets folder in order to build it.

should i target that file directly with my string replacement (the main.js in the platforms)

or is there a better way to do this ?

this is the script i wrote to replace the string

var fs = require('fs');
var git = require('git-rev')
 
fs.readFile('www/build/main.js', 'utf8', function(err, data) {
  if(err) {
    return console.log(err);
  }

  var file = data;

    git.short(function (str) {
      console.log('short', str)

      var result = file.replace(/{{GITVERSIONSTRING}}/g, str);

      fs.writeFile('www/build/main.js', result, function(err) {
        if(err) {
          return console.log(err);
        }
        
        console.log('Build number successfully incremented');
      });
    })    
});
2

so i think ive worked out that the copy script that comes with the ionic-scripts that runs when you do a build copies files to the platforms as they are completed by the transpile task that also runs. so my changing it afterwards has no affect as it has already been copied accross.

so i could either target my script to do the string replacements on the platform/android/assets/www/build/main.js aswell as the www/build/main.js

or i need to somehow get a hook that runs before the scripts start.
ive tried all of the cordova hooks and they all seem to run after the ionic-scripts runs.

is there a way to hook in beforehand? or should i add my script to a npm script that will force it to run beforehand.

3

Is anyone able to point me in the right direction to be able to get something like this working?
Should I override one of the ionic-app-scripts or maybe run my script before the build happens all the time via npm run and making it run the ionic stuff afterwards.

4

This is the solution that I ended up using.

scripts/before_prepare_increment_build_number.js

var fs = require('fs');
var git = require('git-rev-sync')
 
console.log('Incrementing Build Number');


var file = fs.readFileSync('www/build/main.js', 'utf8');

var str = git.short();

console.log('short', str)

var result = file.replace(/{{GITVERSIONSTRING}}/g, str);

fs.writeFileSync('www/build/main.js', result);

console.log('Incrementing Build Number Completed');

config.xml

<hook src="scripts/before_prepare_increment_build_number.js" type="before_prepare"/>

I needed to ensure that everything was happening synchronously otherwise the built in scripts would start copying before the strings had been replaced.

Currently its targeting the whole main.js that is generated by the default ionic-app-scripts so all comparisons and replacements can be added as required.
This solution uses the built in cordova hook before_prepare

Another solution that can be used to make it a bit more efficient is targeting the individual files as required and adding the script before the build/serve scripts in the package.json and have npm control and manage it.

1 Like