Environment Variables

Environment Variables

Environment variables are used to configure your application to run in a specific environment. These environments are generally local development (your laptop), production (a hosted server), and other hosted servers related to non-production environments.

There should be a single set of environment variables for your application, with each environment simply defining different values for those variables.

https://www.lucidchart.com/publicSegments/view/9df797cf-e1fb-4ff4-9d82-b2136344f405/image.png

One set of environment variables, different values for each environment.

For more information about security and protecting your secrets, please see our entry in the Labs Guides.

Things not to do

Anti-pattern #1

Having your application try to figure out which environment variables to use depending on the value of another environment variable.

import axios from "axios";

axios.defaults.baseURL = (function() {
  switch (process.env.REACT_APP_ENV) {
    case "development":
      return process.env.REACT_APP_LOCAL_HOST;
    case "staging":
      return process.env.REACT_APP_STAGING_URL;
    case "production":
      return process.env.REACT_APP_PRODUCTION_URL;
    default:
      return process.env.REACT_APP_LOCAL_HOST;
  }
})();

There should only be one variable for the base URL, something like REACT_APP_AXIOS_BASE_URL. The value of this environment variable will be set to a value that depends on the environment where the app is running.

The environment variable REACT_APP_ENV probably shouldn't exist, as in general, the app doesn't need to know what environment it's running in, it just needs to know the values of the variables it requires to run.

Last updated

Was this helpful?