My React app needs to call the backend
recommendation API to retrieve information from the Azure OpenAI service.
In this case, this is problematic because I can’t necessarily predict the backend URL & port of the
RecommendationApi (due to it being deployed on Azure Container Apps with the auto-generated domain). A real world application would have a custom domain and could configure different
.env files for each environment.
To make this work, I do two things.
For local development, I make a
.env file in the root directly of the front-end web app. I know the port # that will be used (since it is in the
My React app pulls this environment variable and uses it to set up the configuration.
For running in Azure, I need to bootstrap this file.
Next, I set up my React app to be run & served by NGINX. This gives me the ability have a script run before NGINX serves the files.
My Dockerfile includes the NGINX configuration & entrypoint.
Remember that my web app is served from Azure Container Apps. As part of deploying this infrastructure, I set an environment variable with the URL of the backend API. This will get read by the next step whenever the app is served.
entrypoint.sh Bash shell script pulls environment variables and writes them to a local
This file gets served with the request to Container Apps to get the app content.
Now the React app will read in these values and use them.