Skip to content

Commit ca2dc2d

Browse files
mderazonrandycoulman
authored andcommittedMay 8, 2017
add a comment about NODE_ENV value set to 'production' during build step (facebook#1625)
* add a comment about NODE_ENV value set to 'production' during build step facebook#790 (comment) * Move words around
1 parent 601653d commit ca2dc2d

File tree

1 file changed

+8
-7
lines changed

1 file changed

+8
-7
lines changed
 

‎packages/react-scripts/template/README.md

+8-7
Original file line numberDiff line numberDiff line change
@@ -603,13 +603,12 @@ default you will have `NODE_ENV` defined for you, and any other environment vari
603603

604604
**The environment variables are embedded during the build time**. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime, just like [described here](#injecting-data-from-the-server-into-the-page). Alternatively you can rebuild the app on the server anytime you change them.
605605

606-
>Note: You must create custom environment variables beginning with `REACT_APP_`. Any other variables except `NODE_ENV` will be ignored to avoid accidentally [exposing a private key on the machine that could have the same name](https://github.com/facebookincubator/create-react-app/issues/865#issuecomment-252199527).
606+
>Note: You must create custom environment variables beginning with `REACT_APP_`. Any other variables except `NODE_ENV` will be ignored to avoid accidentally [exposing a private key on the machine that could have the same name](https://github.com/facebookincubator/create-react-app/issues/865#issuecomment-252199527). Changing any environment variables will require you to restart the development server if it is running.
607607
608608
These environment variables will be defined for you on `process.env`. For example, having an environment
609-
variable named `REACT_APP_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_SECRET_CODE`, in addition
610-
to `process.env.NODE_ENV`.
609+
variable named `REACT_APP_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_SECRET_CODE`.
611610

612-
>Note: Changing any environment variables will require you to restart the development server if it is running.
611+
There is also a special built-in environment variable called `NODE_ENV`. You can read it from `process.env.NODE_ENV`. When you run `npm start`, it is always equal to `'development'`, when you run `npm test` it is always equal to `'test'`, and when you run `npm run build` to make a production bundle, it is always equal to `'production'`. **You cannot override `NODE_ENV` manually.** This prevents developers from accidentally deploying a slow development build to production.
613612

614613
These environment variables can be useful for displaying information conditionally based on where the project is
615614
deployed or consuming sensitive data that lives outside of version control.
@@ -643,6 +642,10 @@ When you load the app in the browser and inspect the `<input>`, you will see its
643642
</div>
644643
```
645644

645+
The above form is looking for a variable called `REACT_APP_SECRET_CODE` from the environment. In order to consume this
646+
value, we need to have it defined in the environment. This can be done using two ways: either in your shell or in
647+
a `.env` file. Both of these ways are described in the next few sections.
648+
646649
Having access to the `NODE_ENV` is also useful for performing actions conditionally:
647650

648651
```js
@@ -651,9 +654,7 @@ if (process.env.NODE_ENV !== 'production') {
651654
}
652655
```
653656

654-
The above form is looking for a variable called `REACT_APP_SECRET_CODE` from the environment. In order to consume this
655-
value, we need to have it defined in the environment. This can be done using two ways: either in your shell or in
656-
a `.env` file.
657+
When you compile the app with `npm run build`, the minification step will strip out this condition, and the resulting bundle will be smaller.
657658

658659
### Referencing Environment Variables in the HTML
659660

0 commit comments

Comments
 (0)