Profiles in React

Question

I'm trying to figure out how to run a react application (created through create-react-app) with different profiles.

That is, suppose I have several environments (local, dev, prod) and I have a fetch that refers to the backend (which is deployed on another server).

The backend has its own address for each environment. I need to somehow set global variables for different launches.

For example, in Springboot this can be done via application-"profile".properties.

I run the application through npm install -g serve & serve -s build. How to do it?

Answer 1

When working with create-react-app, you can configure your app using environment variables.

It is explained in detail in the documentation here: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

All environment variables need to be prefixed with REACT_APP_.

You can define profiles with different environment variables using .env files.

For example, to set an API URL in production, create a file .env.production with the following contents:

REACT_APP_API_URL=https://my.beautiful.api/

…and as default (for local development), create a file .env:

REACT_APP_API_URL=http://localhost:3001/

• The environment variables from the .env.production file will be used when you build your project with npm run build
• The environment variables from the .env file will be used when you work on your project in local dev mode with npm start

Example for using the environment variable in your app's code:

fetch(process.env.REACT_APP_API_URL)
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
});