Configuring settings in javascript in Azure Web App / built in Azure DevOps

Question

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 running in production, I need this value instead:

const API_ENDPOINT = 'https://somedomain-prod.azurewebsites.net/api/v1/';

I can think of two approaches, but don't know if any of them would work and how:

Configure this in Azure Web App => Configuration. This would be best as all config would be centralized.
Transform the file during the build/release process in Azure Devops. (not sure how)

What is a way to accomplish this?

Walter · Accepted Answer · 2020-10-23 04:13:39Z

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.

edited Oct 23, 2020 at 4:13

answered Oct 23, 2020 at 4:07

Walter

3,0881 gold badge10 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Repcak · Accepted Answer · 2020-10-22 12:40:15Z

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@3
  displayName: 'Replace Tokens in ARM parameters'
  inputs:
    rootDirectory: '$(Pipeline.Workspace)/drop'
    targetFiles: '**/fileToReplace.json'
    encoding: 'auto'
    writeBOM: true
    keepToken: false
    tokenPrefix: '#{'
    tokenSuffix: '}#'
    enableTelemetry: false
    actionOnMissing: '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@1
  displayName: Get KeyVault variables
  inputs:
    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

Collectives™ on Stack Overflow

Configuring settings in javascript in Azure Web App / built in Azure DevOps

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related