How to run a production build of my react app locally?

Question

My package.json has the following script:

"build": "sh -ac '. .env.${REACT_APP_ENV}; react-scripts build'"

When I run yarn build I get the following error:

sh: .env.: No such file or directory

The .env file is in the top level of my project directory as expected. Any ideas?

Answer 1

Copy or rename .env.foo to .env.foo.sh and add export at the beginning of each line, like this:

export REACT_APP_HEADER_COLOR="#f66"

Source this new shellscript instead of the old env file:

"sh -ac '. .env.${REACT_APP_ENV}.sh; react-scripts build'"

Now the variables will be successfully passed down to the build process, for it to use.

Why?

That is just how shells work. An environment variable loaded into the current shell (with source or . or assignment) is only passed down to the child, if it is exported:

$ FOO=foo
$ sh -c 'echo $FOO'

$ export FOO=foo
$ sh -c 'echo $FOO'
foo

Note that these one-line shortcuts also export automatically/implicitly:

$ BAR=bar sh -c 'echo $BAR'
bar
$ env BAR=baz sh -c 'echo $BAR'
baz

(I suspect this hidden behaviour is a frequent source of confusion.)