Injecting Build Variables into an Angular App with VSTS Continuous Integration Builds

Introduction

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)

Configuring NPM

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:

Our build task will replace the {version} token and add our build number to the resulting javascript file.
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.

Advertisements
Tagged with: , , ,
Posted in Azure, Visual Studio Team Services
3 comments on “Injecting Build Variables into an Angular App with VSTS Continuous Integration Builds
  1. […] Part 1: Use NPM and gulp build tasks to support Continuous Integration with VSTS and Azure for an AngularJS app. (this post) 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 […]

  2. […] 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 (this post) 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 […]

  3. […] 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 (this post) Part 4: Injecting Build Variables into an Angular App with VSTS Continuous Integration Builds […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: