I have inherited some code for a website that is hosted on Azure. The code is written in TypeScript using the React framework. It is deployed to a Docker registry on Azure and a Web App then loads the Docker image and runs it.
The code uses msal-react
for authentication. One of the values needed for Msal is the redirect URL (i.e., the base URL of the website), which is hardcoded as a const
in one of the files. Whenever I want to modify the code and test it locally, I have to edit that file and change the value of redirectUri
from its original value to http://localhost
and then I have remember to undo that change before merging my code into the git branch and running the deployment pipeline.
I wonder if there is a way for me to avoid this. What I thought of was to store the base URL as an environment variable on the Web App itself (by editing its settings on Azure portal), and adding a logic in my code that checks if the environment variable is available, using that as the value for redirectUri
and using http://localhost
otherwise.
How can read the environment variable in the node.js web app code?
2
Answers
You can achieve this by adding a new application setting (example name) REACT_APP_REDIRECT_URI and set its value to the production redirect URL.
Then, modify your react code to check for the variable and use it if available.
Of course, ensure that you have a
.env
file in your root dir, with the variable:When you then build & deploy your project, it’ll use the environment variable defined in your Azure Web App settings, and in local development, it’ll use the
.env
file’s value.UPDATE:
Typically, environment variables defined in Azure web app should be passed to the Docker container already. So, I would first of all check that everywhere, the env variable has the same and correct name
VITE_REACT_APP_REDIRECT_URI
.Check and ensure your Docker container has access to env variables. E.g., with Azure Cloud Shell:
If needed, you can modify the
DockerFile
, adding:Note that the primary configuration should be managed through Azure Web App settings, and this should just be for testing.
The way I solve this is roughly as follows:
fetch()
) when your application loads.The problem you have is that your React application builds when the docker container is created. So any dynamic (.env) values get baked into this build, and you don’t want that. There are no environment variables in a browser.
So running a small script that builds a small config file cirmumvents this elegantly. If you really hate making an extra request, you could also embed the configuration in your
index.html
file somewhere.If your docker container isn’t just nginx with static files, but something like Node there’s other options.