Configuring the React Frontend

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:

1. First, we are going to install a library called cross-env that will allow us to set environment variables. Let’s execute the following command in the Terminal: