Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

Document multiple build environments via `env-cmd`

Created by: trungdq88

The term "development environment", "test environment" and "production environment" is used differently across the contexts and sometimes cause confusion for users.

  • create-react-app defines the environment name by the state of app code build: "development" means the code is not minified and run in live reload mode on local machines, "test" means the code is executing in unit test process, "production" means the code is minified and optimized with source map. I'll call this "development build", "test build" and "production build".

  • Mean while, in large portion of the software industry, these terms are used differently:

image

In the diagram above, I'll call them deploy environment, each deploy environment is a set of all the services that linked and worked with each other in an isolated place (servers/VPN).

"Frontend" is where create-react-app lives, and this all run "production build" of the app, which means the code is minified and optimized.

The problem

Regarding this document: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables

  • NODE_ENV always resolves to production when built with yarn build, even if we try to run NODE_ENV=staging yarn build.
  • There is no effective way to define different environment variables for each deploy environments. This is a real need.
  • There is no or very little benefit to define different environment variables for development build and production build, most of the time it is the same.

What I have been doing to resolve this

  • Put all the environment variables in source code and use domain name to identify the deployment environment the app is running. This reveals environment variables of all deployment environments, not so good.
  • or
  • Having different package.json scripts to build for different deployment environments: yarn build-staging, yarn build-production,... In the script, it creates .env file according the deployment environment and build. Ex: mv env/staging.env ./.env && yarn build.
  • or
  • On each deployment environment I setup a mini server that hosts an API endpoint and return environment variables for that deployment environment. (ex: https://staging-my-app.com/env)

Better way?

What is the best practice here? Have anyone of you run into this problem? How did you do it? Should create-react-app do something about this? Please share, thanks!