CODEWITHSUNDEEP
javascriptazure-devopsazure-web-app-service
Kjensen
Kjensen

Reputation: 12384

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 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:

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

What is a way to accomplish this?

Upvotes: 0

Views: 556

Answers (2)

Walter
Walter

Reputation: 3058

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.

Upvotes: 1

Repcak
Repcak

Reputation: 1006

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: enter image description here

Documentation for classic pipelines:

Documentation for yaml pipelines variables

Upvotes: 1

Related Questions