Here is the link to the blog post where this is referenced and here is the link to the GitHub repo.
React is a Single Page App (SPA) framework. This means that all of the HTML, CSS & JavaScript are downloaded to the user’s browser and executed from there. This means that there is no server-side rendering.
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 tye.yaml file).
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.
My entrypoint.sh Bash shell script pulls environment variables and writes them to a local env-config.js file.
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.