Why is my npm build for test picking up production properties?

I want to wire up two production-style builds in my React 16.13 project. One for the test environment and another for the production. I have configured the below scripts ...

  "scripts": {
    "start": "react-scripts start",
    "build": "NODE_ENV=development react-scripts build",
    "build:test": "NODE_ENV=test react-scripts build",
    "build:prod": "NODE_ENV=production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

I have these two .env files defined ...

localhost:client davea$ cat .env.test 
REACT_APP_PROXY=http://lab.mydomain.com

davea$ cat .env.production 
REACT_APP_PROXY=http://prod.mydomain.com

I run my build for test as follows ...

localhost:client davea$ npm run build:test

> [email protected] build:test /Users/davea/Documents/workspace/chicommons/maps/client
> NODE_ENV=test react-scripts build

Creating an optimized production build...
Compiled with warnings.

./src/containers/FormContainer.jsx
  Line 112:31:  Unnecessary escape character: \[  no-useless-escape

./src/components/Flash/index.js
  Line 26:45:  Expected dot to be on same line as property  dot-location

./src/components/CoopTypes.jsx
  Line 52:9:  Do not mutate state directly. Use setState()  react/no-direct-mutation-state

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  92.83 KB  build/static/js/2.05641348.chunk.js
  22.47 KB  build/static/css/2.af3c1da9.chunk.css
  4.07 KB   build/static/js/main.367658f7.chunk.js
  1.26 KB   build/static/css/main.dcf9a285.chunk.css
  774 B     build/static/js/runtime-main.8c40394c.js

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  bit.ly/CRA-deploy

However, after when I scan "build/static/js/main.367658f7.chunk.js" (the built file) it only has references to my production property, "prod.mydomain.com" and not the test property, "lab.mydomain.com". What else do I need to do to get my test properties incorporated into my build?

Solution

Update

How can we still use .env files?

We could use something like env-cmd. It will help us execute commands use the env file that we provide. We can have it installed locally or globally.

So, the following remain as is.

localhost:client davea$ cat .env.test 
REACT_APP_PROXY=http://lab.mydomain.com

davea$ cat .env.production 
REACT_APP_PROXY=http://prod.mydomain.com

Now, the build commands can be (assuming global env-cmd)

"build:test": "env-cmd -f .env.test react-scripts build",
"build:prod": "env-cmd -f .env.production react-scripts build",

For local env-cmd, you could do something like ./node-modules/.bin/env-cmd -f .env.test as mentioned in their README file.

Original answer

From react-docs, (As DCTID also stated in the comment)

You cannot override NODE_ENV manually.

But, since we want two different values of the variable, we can use a custom variable instead of NODE_ENV? As per docs, it has to be prefixed with REACT_APP_. Let's say we decide to use REACT_APP_ENVIRONMENT.

We could set the same on build commands, for example:

"build:test": "REACT_APP_ENVIRONMENT=test react-scripts build",
"build:prod": "REACT_APP_ENVIRONMENT=production react-scripts build",

and, use it in the following manner:

// File: config.js
export const REACT_APP_PROXY = process.env.REACT_APP_ENVIRONMENT === 'production' ? 
  'prod.mydomain.com' : 'lab.mydomain.com';

Hope that helps! I use it this way in my apps, so if you have any more questions, I'd be happy to help.