Configuring Settings In Javascript In Azure Web App / Built In Azure Devops

Say I have a js (plain, vanilla non-node js) file, that includes a setting at the top like this: const API_ENDPOINT = 'https://somedomain-dev.azurewebsites.net/api/v1/'; When runn

Solution 1:

Transform the file during the build/release process in Azure Devops.

You can use PowerShell scripts to change files. Please add a PowerShell task in your build or release pipeline. Here is my sample:

- task: PowerShell@2
  inputs:
    targetType: 'inline'
    script: |
      $filePath = 'test.js'
      $tempFilePath = "test1.js"
      $find = 'https://somedomain-dev.azurewebsites.net/api/v1/'
      $replace = 'https://somedomain-prod.azurewebsites.net/api/v1/'
      
      (Get-Content -Path $filePath) -replace $find, $replace | Add-Content -Path $tempFilePath
      
      Remove-Item -Path $filePath
      Move-Item -Path $tempFilePath -Destination $filePath

You can also try to use extensions in marketplace such as "File Creator". It can create a new file and replace the old one.

Solution 2:

We personally use something like this: https://marketplace.visualstudio.com/items?itemName=qetza.replacetokens

Then you would tokenize the value:

const API_ENDPOINT = '#{API_ENDPOINT}#';

And use the task in AzureDevops before the deployment:

#YAML file-task:a8515ec8-7254-4ffd-912c-86772e2b5962@3displayName:'Replace Tokens in ARM parameters'inputs:rootDirectory:'$(Pipeline.Workspace)/drop'targetFiles:'**/fileToReplace.json'encoding:'auto'writeBOM:truekeepToken:falsetokenPrefix:'#{'tokenSuffix:'}#'enableTelemetry:falseactionOnMissing:'continue'verbosity:detailed

You would need to import variables into the pipeline. There are multiple ways to do that depending if you use classic pipelines or yamls. If you for example have seperate Key Vaults for your Test and Prod Environment you could store those values there and use:

#YAML file-task:AzureKeyVault@1displayName:GetKeyVaultvariablesinputs:azureSubscription:'${{ parameters.KV_APP_NAME }}'KeyVaultName:'$(vg.keyVaultName)'

This task reads the values from the KV into the Pipelines as variables that you can use then in the deployment. In your case, you would have a stage named Test/Dev and have there the KV read task and also the same task in Prod to read from a different KV with the other value. You could also use Azure DevOps libraries or in classic pipelines environment variables that are most often declared per stage.

Both the above tasks can also be used in the classic pipelines.

Overall for this to work you should design the deployment pipelines in a way, that every environment has its own stage and the configuration values can be replaced per environment like so:

Documentation for classic pipelines:

Documentation for yaml pipelines variables