Getting The Build ID using Azure Devops and React

#azure #react

So in todays Article, I will show you guys how to get the Build ID from Azure Devops using React.

Some pre-requisites:

Replace Tokens

Firstly, I will assume you already have an azure pipeline to build a React project. After adding in the Replace Token into your pipeline, you can create a .ts file. I named mine environment.prod.ts in my React Project. In the .ts file I wrote the following:

export const environment = {
    production: true,
    VERSION: "#{Build.BuildId}#"
    };

I then Created a version.js file:

import React from 'react';
import { environment } from './environment.prod';




export const Version = () => {
    return (
        <a>{environment.VERSION}</a>
    );
}

Its simple as that. You are done with the React side of things. Next what you can do is configure the replace Token in your pipeline. The YAML below is how i configured mine:

steps:
- task: qetza.replacetokens.replacetokens-task.replacetokens@3
  displayName: 'Replace tokens in **/environment.prod.ts'
  inputs:
    targetFiles: '**/environment.prod.ts'

And you are done. You can now use your version.js component where you need it!