CODEWITHSUNDEEP
reactjstypescriptazureazure-devopsdevops
diplodorkus
diplodorkus

Reputation: 180

How to set a variable dependent on its release stage in DevOps?

Is there a way I can easily change a variable within a React app dependent on its current stage in an Azure DevOps release pipeline? As an example, say I have three stages set up (dev/QA/production) and I want a client ID within the app's auth config to be swapped out for each environment. How can I "detect" which environment is currently being used in order to select the appropriate ID? I'd prefer to only need to run a single build task and use a single artifact for each pipeline stage, rather than rebuilding at each stage (if at all possible).

Upvotes: 1

Views: 145

Answers (2)

Harryblueberry
Harryblueberry

Reputation: 1

First off, I'd expect that your application is deployed to different hosts/CNAMEs depending on environment.

If you don't want to provide some sort of environment identifier at the time of deploy/build which is baked into your code, then inspecting the URL could be one approach. Downside of this is you are now hard coding URL patterns into your scripts and mapping those to environments. You decide on the trade-offs.

Second, I agree with Lucas' answer that you'll need an external source for configurations you can pull from at runtime.

If you live in the M$ ecosystem I am not sure what's available but from from other stacks I can recommend spring cloud config or configrd.io which can both externalize, serve and provide additional config management features.

Upvotes: 0

floriangosse
floriangosse

Reputation: 1123

If you don't want to bundle for each stage separately you’ll need a server providing the values you want to make available to the client.

This can be done by rendering the HTML on server side. Here’s a short example template:

<script>
  window.valueToExpose = <%= JSON.stringify(value) %>;
</script>

The expression <%= JSON.stringify(value) %> will be executed by your server’s template engine. (Expression can look different based on your template engine)

The sever generated HTML can look like that with value = "Hello World":

<script>
  window.valueToExpose = "Hello World";
</script>

In you React application you can access window.valueToExpose.

Upvotes: 1

Related Questions