Load different env variables with .env and create-react-app

Question

I need to load for each development/production server a different .env file.

Dev/Prod Server     | .env file
---------------------------------------------
localhost           | .env.development.local
development         | .env.development
qa                  | .env.qa
production          | .env.production

So, I tried to edit the package.json in this way

"start-js": "react-scripts start .env.development.local",
"start": " npm-run-all -p watch-css start-js",
"build:dev": "npm run build-css && react-scripts build .env.development",
"build:qa": "npm run build-css && react-scripts build .env.qa",
"build:pro": "npm run build-css && react-scripts build .env.production"

but if I execute a build:* command, the file loaded is always .env.production because the NODE_ENV is production. Is it possibile to load the others .env file with "build:* command?

Answer 1

I solved my question using react-app-env and renaming the .env file.

Dev/Prod Server     | .env file
---------------------------------------------
qa                  | qa.env

And the build:qa scripts, for example, became:

"build": "npm run build-css && react-scripts build",
"build:qa": "react-app-env --env-file=qa.env build"