Search code examples
azureazure-web-app-serviceazure-deployment-slots

React App different API URLs per environment using deployment slots

this is a question related to a CRA React app using Azure App Service and Deployment Slots.

We have a Backend API that is specific to each environment, so for "dev" we have a specific API, and for "testing" we have another, basically just different URLS depending on the environment we are in.

This has been solved so far by Pipelines. Building a pipeline from the "dev" branch in the React App, sets the REACT_APP_STAGE to "dev", and we can then check inside the react app which stage we are in, and therefore change the URLs to use.

The tricky part now though, is that we are planning on using deployment slots, which from my understanding, means that we can seamlessly change from Stage -> Prod, without rebuilding the project or using any pipelines. This means that the React App in both of these environments, will have the same REACT_APP_STAGE variable, but they need to be different.

Does anyone have any hints or clues on how to solve this issue regarding different URLS and deployment slots?

I appreciate the time!

Solution

  • https://learn.microsoft.com/en-us/azure/app-service/deploy-staging-slots

    Assuming REACT_APP_STAGE is an environment variable, and you want to have a different value for this variable depending on your slot.

    If you use the App Service settings, you can mark a configuration value as "sticky", so when you swap the slots, the target environment variables will not swap.

    To configure an app setting or connection string to stick to a specific slot (not swapped), go to the Configuration page for that slot. Add or edit a setting, and then select deployment slot setting. Selecting this check box tells App Service that the setting is not swappable.

    enter image description here

    https://learn.microsoft.com/en-us/azure/app-service/deploy-staging-slots