Set custom headers based on different envs

Question

I want to set custom headers of "id", "env", and "name" based on envs in my application, they all have different values for different envs. I am having trouble figuring out the most effective way to make it work based on my code logic.

Here is how I define the env:

let host = "xxxxxxxx";

function getHost() {
  var env = getEnv();

  env = env ? env : process.env.REACT_APP_ENV;

  switch (env) {
    case "stage":
      host = 
       "xxxxxxxxxxxxxxxxxxx";
      break;
    case "prod":
      host = 
        "xxxxxxxxxxxxxxxxx";
      break;
    case "local":
      host = "xxxxxxxxxxxxxx";
      break;
    case "dev":
      default:
        host = "xxxxxxxxxxxxxxxxxxx";
      break;
  }
  return host;
}

export const HOST = getHost();

Here is pretty much how every "headers" is set in my app, as you can see there are only some values so far:

export function fetchRefresh(token) {
  return (dispatch) => {
    return fetch(API_ROOT + "/xxxxxxx/xxx/xxxxxx", {
      method: "POST",
      headers: {
        authorization: `Bearer ${token}`,
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: token,
    })
    .then()
    // the rest
  }
}

I thought about doing something like this, and adding HEADERS to headers: {} in my code, but it will only make the 3 custom headers I want to add a single object, they should all be separate values not object:

function getHeaders() {
  var env = getEnv();

  env = env ? env : process.env.REACT_APP_ENV;

  switch (env) {
    case "stage":
      return {
        "ID": "xxxxxxxxxxxxxx",
        "ENV": "xxxxxxxxxxxx",
        "NAME": "xxxxxxxx",
      }
    case "prod":
      return {
        "ID": "xxxxxxxxxxxxxx",
        "ENV": "xxxxxxxxxxxx",
        "NAME": "xxxxxxxx",
      }
    case "local":
      return {
        "ID": "xxxxxxxxxxxxxx",
        "ENV": "xxxxxxxxxxxx",
        "NAME": "xxxxxxxx",
      }
    case "dev":
      return {
        "ID": "xxxxxxxxxxxxxx",
        "ENV": "xxxxxxxxxxxx",
        "NAME": "xxxxxxxx",
      }
  }
}

export const HEADERS = getHeaders();

Can you please help? Thank you

Answer 1

Do you mean retriving environmental variables? You can set your own by working with the 'dotenv' package, which is very commonly used.

https://www.npmjs.com/package/dotenv

You can set your environment variables in .env file like this:

MY_SECRET="new-secret-string"
KEY=VALUE

Which can be processed by

// This will read variables from .env file
require('dotenv').config();

console.log(process.env.MY_SECRET)

Answer 2

You'll want to do the following. First, install https://www.npmjs.com/package/env-cmd

Next, you can specify the .env to be used depending upon your environment as so. The below code allows you to specify configuration declaratively rather than imperatively (which is what you attempted to do). Even though you are adding one more dependency, you are getting a more resilient way of doing things. Now, when you say process.env.REACT_APP_ID process.env.REACT_APP_ENV process.env.REACT_APP_NAME, then depending on env the correct values will be transparently picked up.

"scripts": {
    "start": "env-cmd -f env_anotherenv.env react-scripts start",
    "start_vscode": "env-cmd -f env_vscode.env react-scripts start",
    "build_staging": "env-cmd -f env_staging.env react-scripts build --profile",
    "build_production": "env-cmd -f env_production.env react-scripts build --profile"
}

Example of env_production.env will be

REACT_APP_ID = someid
REACT_APP_ENV = someenv
REACT_APP_NAME = somename