Following on from my previous post I wanted to add my build number to my Angular App so I can instantly see which build is deployed into each environment. You can of course take any of the build variables but I was only interested in the build number at this stage. This would allow me to see which change set and file modifications were deployed as part of that build should anything go wrong.
As this post relies on steps that are documented in the my last 3 posts, I recommend you go back and read through in order to understand the configuration we have so far.
Part 1: Use NPM and gulp build tasks to support Continuous Integration with VSTS and Azure for an AngularJS app
Part 2: Deploy an Angular App to Azure App Services (Web App) with VSTS Continuous Integration Builds
Part 3: Using gulp tasks in Visual Studio Team Services to configure constants for an AngularJS app
Part 4: Injecting Build Variables into an Angular App with VSTS Continuous Integration Builds (this post)
Our updated build task relies on an NPM package called gulp-replace. From a shell window or command prompt let’s add this package to our project.
Passing parameters to our gulp task
In order to be able to pass build parameters to our our gulp task we need to configure our gulpfile.js to parse these parameters. Believe it or not, we already added and configured this in part 1 of this series (linked above). A gulp package called minimist will take our input parameters and and assign them into an variable for us. Below is an excerpt from the gulpfile.js from part 1 that extracts our parameters so we can use these within our build tasks.
Adding a constants placeholder for our build number
Next up we need to modify our constants.json file to add a placeholder for our build number.
Add the following to the appSettings section:
The fully updated constants.json file is shown below:
Updating our build task
We now need to update the build task in our gulpfile.js file. This will replace the token we added to our constants file above with our build number that will be passed as part of the VSTS build process.
At the top of gulpfile.js add the following with the other require statements
Next we have to update the actual build tasks themselves. Remember we have two gulp build tasks in our gulpfile.js; one for our dev environment and one for the production environment. The following change should be applied to both of them. Before the following line in the build tasks:
add the following
Our gulpfile.js should now look like this
Update the VSTS build task
The last step is to update the build definition in Visual Studio Team Services so we can pass the build number into our gulp task.
Edit the build definition and highlight the gulp task. In the arguments section append the parameter for our build number. The entire line should now look like the following
Now within your Angular App you can call the constant appSettings.buildVersion where ever you want to display your build number.
That’s it, thanks for reading.