Skip to main content

Add Git Commit Hash and Build Number to a Static React Website using Azure DevOps

While working on a React based static website recently, there was a need to see exactly what was deployed in the Dev/Test environments to reduce confusion amongst teams. I wanted to show something like this:


A quick look at the site's footer should show the Git Commit Hash and Build Number which was deployed and click through to actual commits and build results. Let's see how we achieved this using Azure DevOps.

Git Commit Hash

Azure DevOps exposes a variable called $(Build.SourceVersion) which contains the hash of the commit. So I defined a variable in the Build Pipeline using it.

Build Id and Build Number

Azure DevOps also exposes two release time variables $(Build.BuildId) and $(Build.BuildNumber) which can be used to define custom variables in the pipeline.

So we have a total of 3 variables defined:


Next we use these variables in our React App. I created 3 global variables in index.html and assigned a token value to them.

<script type="text/JavaScript">
      window.REACT_APP_BUILD_ID="#{REACT_APP_BUILD_ID}#";
      window.REACT_APP_BUILD_NUMBER="#{REACT_APP_BUILD_NUMBER}#";
      window.REACT_APP_GIT_HASH="#{REACT_APP_GIT_HASH}#";
</script>

These variables are used in App.js to create the footer. Notice the use of hard-coded links as I like to keep things simple.

<footer className="App-footer">
        <div>
          Deployed from commit{" "}
          <a
            href={
              "https://dev.azure.com/mayanktestharness/ReactBuild/_git/ReactBuild/commit/" +
              window.REACT_APP_GIT_HASH
            }
          >
            {shortHash}
          </a>{" "}
          via build{" "}
          <a
            href={
              "https://dev.azure.com/mayanktestharness/ReactBuild/_build/results?buildId=" +
              window.REACT_APP_BUILD_ID
            }
          >
            {window.REACT_APP_BUILD_NUMBER}
          </a>
          .
        </div>
</footer>

Next I used Azure DevOps Pipeline and excellent "Replace Tokens" task to replace the tokens. You may need to import this task in your Azure DevOps organization if you haven't used it before.

This is the complete YAML of my CI/CD pipeline.

# Node.js React Web App to Linux on Azure
# Build a Node.js React app and deploy it to Azure as a Linux web app.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
main

variables:

  # Azure Resource Manager connection created during pipeline creation
  azureSubscription'xxxxx'

  # Web app name
  webAppName'reactbuildblog'
  
  # Environment name
  environmentName'reactbuildblog'

  # Agent VM image name
  vmImageName'ubuntu-latest'

stages:
stageBuild
  displayNameBuild stage
  jobs:  
  - jobBuild
    displayNameBuild
    pool:
      vmImage$(vmImageName)

    steps:
    - taskNpm@1
      displayName'NPM Install'
      inputs:
        command'install'
    - taskNpm@1
      displayName'NPM Build'
      inputs:
        command'custom'
        customCommand'run build'
    - taskArchiveFiles@2
      displayName'Archive files'
      inputs:
        rootFolderOrFile'$(System.DefaultWorkingDirectory)/build'
        includeRootFolderfalse
        archiveTypezip
        archiveFile$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
        replaceExistingArchivetrue

    - upload$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
      artifactdrop

stageDeploy
  displayNameDeploy stage
  dependsOnBuild
  conditionsucceeded()
  jobs:
  - deploymentDeploy
    displayNameDeploy
    environment$(environmentName)
    pool
      vmImage$(vmImageName)
    strategy:
      runOnce:
        deploy:
          steps:            
          - taskExtractFiles@1
            displayName"Unzipping"
            inputs:
              archiveFilePatterns'$(Pipeline.Workspace)/drop/$(Build.BuildId).zip'
              destinationFolder'$(System.DefaultWorkingDirectory)/release'
              cleanDestinationFoldertrue
              overwriteExistingFilesfalse
          - taskreplacetokens@3
            displayName"Replacing Tokens"
            inputs:
              rootDirectory'$(System.DefaultWorkingDirectory)/release'
              targetFiles'index.html'
              encoding'auto'
              writeBOMtrue
              actionOnMissing'warn'
              keepTokenfalse
              tokenPrefix'#{'
              tokenSuffix'}#'
              useLegacyPatternfalse
              enableTelemetrytrue
          - taskAzureRmWebAppDeployment@4
            displayName"Deploying"
            inputs:
              ConnectionType'AzureRM'
              azureSubscription'MSDN Platforms (xxxxx)'
              appType'webApp'
              WebAppName'xxxx'
              packageForLinux'$(System.DefaultWorkingDirectory)/release'

That's it! You can now show your commit hash and build ids in your live static React website helping you test team to certify a particular build and reduce confusion.

Comments

Popular posts from this blog

Proud to be a Bihari?

After nearly an year, this December I had a chance to visit Bihar. My visits normally consist of resting in my home in Patna and occasional visits to my uncle's place. But this time it was different. I had to go to Gaya to attend my cousin sister's marriage ceremony. Stepping out of Patna made me question - Am I really proud to be a Bihari? Patna is like any other city in India, struggling with pollution, traffic jams, crime, etc. Being snuggled in my bed in Patna had made me forget the reality of what Bihar really is; after all its been nearly 10 years since I had traveled to any town outside of Patna in Bihar. So, the illusion was broken the moment my uncle's brand new Maruti A-Star moved out of outskirts of Patna, to what is supposedly the "National Highway". If you haven't guessed it already, its an apology of a road.

Centralized Configuration for .NET Core using Azure Cosmos DB and Narad

We are living in a micro services world. All these services are generally hosted in Docker container which are ephemeral. Moreover these service need to start themselves up, talk to each other, etc. All this needs configuration and there are many commercially available configuration providers like Spring Cloud Config Server, Consul etc. These are excellent tools which provide a lot more functionality than just storing configuration data. However all these have a weakness - they have a single point of failure - their storage mechanism be it a file system, database etc. There are ways to work around those but if you want a really simple place to store configuration values and at the same time make it highly available, with guaranteed global availability and millisecond reads, what can be a better tool than Azure Cosmos DB! So I set forth on this journey for ASP.NET Core projects to talk to Cosmos DB to retrieve their configuration data. For inspiration I looked at Steeltoe Con

The Art of Ogling

Me and my roommate were returning from a movie theater when I noticed a girl in a black dress and black goggles who seemed to be pretty. Maybe I looked for a second too long at her that I was chided by my roommate. "Dude, don't look at girls like that!!", he said out aloud, much to my embarrassment and his delight. This made me think and write about - How the hell do you look at girls? Let me set the ground rules before you read on. Don't despise men who stare at girls or think of them as perverts. They are doing a public service. This is how it works - Girls spend time, effort and money in buying makeup, clothes and other numerous accessories which make them look good. Have you ever thought why they go through so much trouble?