Is Azure App Configuration suitable for different React environment app settings?

Question

My question is similar to this one regarding how to set up different React environment variables/app settings during deployments to different environments in Azure Devops.

These are (hopefully) my requirements

• Single build pipeline triggered by different branches that creates a React app artifact
• ARM template in a release pipeline that creates/updates an environment (e.g. test, prod)
• React App is deployed in the same release pipeline
• React application has the correct app settings for that newly created environment (e.g. API_URL for 'test')

I would like to do all this without hard coding any apps settings in my build .yaml or as build pipeline variables. The reason is if my environment hasn't yet been created by the release pipeline, how would I know what settings to inject when building the react app in the preceding build pipeline?

Is Azure App Configuration a good fit for this?

I figured I could do something like...

• Create the Azure App Configuration
• Setup a React app to use the App Configuration javascript client library to retrieve app settings
• Inject the App Configuration connection string and environment type (e.g. test) during the build of the react app. (The environment type will be used as an app configuration label)
• Use the Azure CLI to push new settings to the App Configuration during the creation/update of the ARM template in the release pipeline based on the label for that environment.
• Once deployed the running app should have access to all the app settings for that environment/label.

Does this sound possible? A good idea?

I feel like this should work in theory. It doesn't matter whether the ARM template for example creates API_URL = https://test.azurewebsites.net or https://prod.azurewebsites.net, because the connection string and label of 'test' or 'prod' was passed into the react app during build, it will always have the correct values at runtime. A few downsides are the App Configuration connection string will need to be exposed as a build pipeline variable, it will need to have been created first, and I would need to implement logic in my react app to switch between loading app settings locally and from the client library

Many thanks,

Answer 1

An artifact (the build output) should be independent from your stage. You should always use the same artifact for any stage.

The most common way is to provide a server side-response with the client app configuration as json. Load the json on react init and inject your configuration. There is no other way to have.

Both, the client app and the config server app can run in the same app container. You can achive this behavior both with Azure App Service and Azure Static Sites.