Configuring the React Frontend
Learn how to configure the React frontend to interact with different backend APIs for development, staging, and production environments. Explore setting environment variables using cross-env, modifying build scripts, updating backend URLs, and preparing the app for Azure deployment with URL rewrite rules and environment-specific rendering.
We'll cover the following...
In this section, we are going to turn our attention to the frontend and make changes so that it will work in the Azure staging and production environments, as well as in development. We are going to change our frontend so that it makes requests to the correct backend APIs in staging and production. At the moment, the REST API has a hardcoded path set to the localhost. We are going to make use of environment variables as we did in our backend, to differentiate between the different environments.
Configure the frontend for staging and production
Let’s open our frontend project in Visual Studio Code and carry out the following steps: ...