cra-environment-variables.md

Customizing Environment Variables for Arbitrary Build Environments. This is possible by using env-cmd library.

1. .env.cmdrc

{
  "dev:website-a": {
    "REACT_APP_ENV": "development",
    "REACT_APP_WEBSITE": "website a"
  },
  "dev:website-b": {
    "REACT_APP_ENV": "development",
    "REACT_APP_WEBSITE": "website b"
  },
  "dev:website-c": {
    "REACT_APP_ENV": "development",
    "REACT_APP_WEBSITE": "website c"
  },
  "dev:website-d": {
    "REACT_APP_ENV": "development",
    "REACT_APP_WEBSITE": "website d"
  },
  "sit:website-a": {
    "REACT_APP_ENV": "sit",
    "REACT_APP_WEBSITE": "website a"
  },
  "sit:website-b": {
    "REACT_APP_ENV": "sit",
    "REACT_APP_WEBSITE": "website b"
  },
  "sit:website-c": {
    "REACT_APP_ENV": "sit",
    "REACT_APP_WEBSITE": "website c"
  },
  "sit:website-d": {
    "REACT_APP_ENV": "sit",
    "REACT_APP_WEBSITE": "website d"
  },
  "uat:website-a": {
    "REACT_APP_ENV": "uat",
    "REACT_APP_WEBSITE": "website a"
  },
  "uat:website-b": {
    "REACT_APP_ENV": "uat",
    "REACT_APP_WEBSITE": "website b"
  },
  "uat:website-c": {
    "REACT_APP_ENV": "uat",
    "REACT_APP_WEBSITE": "website c"
  },
  "uat:website-d": {
    "REACT_APP_ENV": "uat",
    "REACT_APP_WEBSITE": "website d"
  },
  "prod:website-a": {
    "REACT_APP_ENV": "production",
    "REACT_APP_WEBSITE": "website a"
  },
  "prod:website-b": {
    "REACT_APP_ENV": "production",
    "REACT_APP_WEBSITE": "website b"
  },
  "prod:website-c": {
    "REACT_APP_ENV": "production",
    "REACT_APP_WEBSITE": "website c"
  },
  "prod:website-d": {
    "REACT_APP_ENV": "production",
    "REACT_APP_WEBSITE": "website d"
  }
}

2. scripts of package.json

  "scripts": {
    "start": "react-scripts start",
    "start:dev-web-a": "env-cmd -e dev:website-a npm start",
    "start:dev-web-b": "env-cmd -e dev:website-b npm start",
    "start:dev-web-c": "env-cmd -e dev:website-c npm start",
    "start:dev-web-d": "env-cmd -e dev:website-d npm start",
    "build": "react-scripts build",
    "build:sit-web-a": "env-cmd -e sit:website-a npm run build",
    "build:sit-web-b": "env-cmd -e sit:website-b npm run build",
    "build:sit-web-c": "env-cmd -e sit:website-c npm run build",
    "build:sit-web-d": "env-cmd -e sit:website-d npm run build",
    "build:uat-web-a": "env-cmd -e uat:website-a npm run build",
    "build:uat-web-b": "env-cmd -e uat:website-b npm run build",
    "build:uat-web-c": "env-cmd -e uat:website-c npm run build",
    "build:uat-web-d": "env-cmd -e uat:website-d npm run build",
    "build:prod-web-a": "env-cmd -e prod:website-a npm run build",
    "build:prod-web-b": "env-cmd -e prod:website-b npm run build",
    "build:prod-web-c": "env-cmd -e prod:website-c npm run build",
    "build:prod-web-d": "env-cmd -e prod:website-d npm run build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },