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.

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

You'll need to set up your environment variables in order to run your applications and develop locally.

Things not to do

Checking in files like your .env or secrets file to git and GitHub is a major security flaw, and there are some secrets and keys you'll use in Labs that will be flagged automatically by bots scanning for such incidents. If you check in secrets to version control during Labs, expect to have to work with your engineering manager to scrub them from your git history!

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.

Why? Because this makes your application confusing to deploy and manage. Having an extra layer of environment settings doubles the chances that something will go wrong. Keep it simple!

Plus, you almost never want your application to behave differently depending on which environment it's in. If it does, how will you be sure that it'll behave properly in production?

PreviousWhat is JSON Web Token?NextGit Rebase:

Last updated 3 years ago

Was this helpful?

Environment Variables

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

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

You'll need to set up your environment variables in order to run your applications and develop locally.

For more information about security and protecting your secrets,

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;
  }
})();

Why? Because this makes your application confusing to deploy and manage. Having an extra layer of environment settings doubles the chances that something will go wrong. Keep it simple!

Plus, you almost never want your application to behave differently depending on which environment it's in. If it does, how will you be sure that it'll behave properly in production?