Introducing: Flexible runtime environment config

[andrewmclagan]

https://github.com/andrewmclagan/react-env

Frameworks such as Next allow for some nice defaults such as .env.local, .env.production, .env. This has the limitation where you may want to run your app in different environments such as "staging, integration, qa" but still build a "production" app with NODE_ENV=production. With react-env this is possible:

# .env.staging
REACT_APP_API_HOST="api.staging.com"
# .env.production
REACT_APP_API_HOST="api.staging.com"
# .env.qa
REACT_APP_API_HOST="api.staging.com"
# .env.integration
REACT_APP_API_HOST="api.staging.com"
# .env.local
REACT_APP_API_HOST="api.example.dev"
# .env
REACT_APP_API_HOST="localhost"

for staging you would simply set APP_ENV=staging where you run your app:

{
  ...
  "scripts": {
    "start": "react-env --env APP_ENV -- next start" // where .env.${APP_ENV}
  }
  ...
}

Thus REACT_APP_API_HOST=api.staging.com in your staging environment.