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

Question

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

> client@0.1.0 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?

Per [react docs](https://create-react-app.dev/docs/adding-custom-environment-variables/) "You cannot override NODE_ENV manually." — DCTID, Jun 26 '20 at 02:20

tanmay · Accepted Answer · 2020-07-02T06:47:38.690

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.

Hi, Thanks for this answer. Previously I had been storing the "REACT_APP_PROXY" in .env.development, .env.test, or .env.production as I was told ".env" files are traditionally where these kinds of variables are stored. Is it possible to use that in any way? I kind of like having all my environment variables in one place as opposed to loading some in config.js and others in the .env files but if that's not possible your solution looks very easy to implement. — Dave, Jul 01 '20 at 21:00
That env-command was exactly what I was looking for. Thanks! — Dave, Jul 02 '20 at 15:38

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

1 Answers1

Update

Original answer