Adding namespaced environment variables to DefinePlugin under REACT_APP_ #342

eliperelman · 2016-08-03T11:38:35Z

This enables users to specify custom environment variables under a REACT_APP_* namespace. To verify it works, I ran the start script via:

REACT_APP_TITLE="Env-enabled React" npm start

And changed the <h2> in src/App.js:

<h2>Welcome to {process.env.REACT_APP_TITLE}</h2>

Which rendered:

ghost · 2016-08-03T11:38:45Z

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at [email protected]. Thanks!

eliperelman · 2016-08-03T11:39:21Z

This would resolve #102.

ghost · 2016-08-03T11:41:22Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

gaearon · 2016-08-03T12:31:15Z

config/env.js

+var REACT_APP = /^REACT_APP_/i;
+
+module.exports = Object
+ .keys(process.env)


Nit: we use two spaces for indenting these

gaearon · 2016-08-03T12:35:59Z

Looks great and I like the prefix choice. Happy to get this in after resolving minor style nitpicks. Thanks for contributing!

eliperelman · 2016-08-03T12:39:35Z

Gah, not sure how the 4 spaces got in there. I'll fix and push.

gaearon · 2016-08-03T13:19:07Z

config/env.js

+ env['process.env.' + key] = JSON.stringify(process.env[key]);
+ return env;
+ }, {
+ 'process.env.NODE_ENV': NODE_ENV


Do I understand correctly that this works in prod because we explicitly reset it as part of build script?

Correct. It is development by default, and it has been explicitly overridden in config.prod and the top of scripts/test.

gaearon · 2016-08-03T13:21:20Z

I would appreciate if you could also add a section on this to "how to" list in template/README.md.

It would need to have a disclaimer that this is a new feature since 0.3.0 (you can find similar disclaimers but searching for "0.2.0" in that file).

eliperelman · 2016-08-03T13:46:44Z

@gaearon https://github.com/eliperelman/create-react-app/blob/14b659760bcd464ad546cfbff48ca41875b6bffa/template/README.md#adding-custom-environment-variables

gaearon · 2016-08-03T13:51:42Z

template/README.md

@@ -404,6 +405,44 @@ Note that GitHub Pages doesn't support routers that use the HTML5 `pushState` hi

 Use the [Heroku Buildpack for create-react-app](https://github.com/mars/create-react-app-buildpack).

+### Adding Custom Environment Variables


Let’s either change this to Add or change all other heading to remove ing (I think that actually might be the way to go). You can do this in a separate PR if you’d like.

Let’s also move this section before Deploy, I’d like to keep it the last one.

eliperelman · 2016-08-03T15:30:38Z

Thanks for the feedback! Updates have been made.

alexzherdev · 2016-08-03T16:42:50Z

template/README.md

+set REACT_APP_SECRET_CODE=abcdef
+
+# Create an environment variable on macOS/Linux/Unix
+REACT_APP_SECRET_CODE=abcdef


I'm not a shell expert, but will this work without export? http:https://stackoverflow.com/a/1158231

Maybe we can just show two commands:

Windows

set REACT_APP_SECRET_CODE=abcdef&npm start

Bash (macOS, Linux)

REACT_APP_SECRET_CODE=abcdef npm start

(Also let’s keep the commands for different systems in separate blocks)

I probably won't use the words "Bash" since bash is becoming a thing on Windows. But yes, I'll separate the blocks.

@alexzherdev yes, just like @gaearon's snippet between us, it doesn't use export to set the variable. Export is used for permanence of variables, but as I mentioned that's outside the scope of this.

Wouldn’t Bash on windows work with Bash syntax? Just curious.

Yeah, I suppose that's right 😜

I'll think of something and see what everyone thinks.

gaearon · 2016-08-03T22:54:58Z

Thanks!

…PP_ (#342)

thg303 · 2016-10-26T02:34:51Z

Does not work for setting "port" in version "0.5.0", instead of setting port this way, user has to create a .env file and set the port there like:
PORT=80

gaearon · 2017-02-24T18:10:31Z

Does not work for setting "port" in version "0.5.0", instead of setting port this way, user has to create a .env file and set the port there like:

The feature in this PR is only for custom variables. There are a few built-in ones documented here, and they don't need the prefix.