From cbdb63b5600a40676e65416e57c8a94ef59c5d6d Mon Sep 17 00:00:00 2001 From: Michael Date: Thu, 23 Feb 2017 16:57:29 +0200 Subject: [PATCH 1/2] add a comment about NODE_ENV value set to 'production' during build step https://github.com/facebookincubator/create-react-app/issues/790#issuecomment-281986264 --- packages/react-scripts/template/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index f44cd23dd59..124100b3a90 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -604,6 +604,7 @@ default you will have `NODE_ENV` defined for you, and any other environment vari **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. >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). +> Also note that during build for deployment (`npm run build`), `NODE_ENV` will be hard-set to `'production'`. These environment variables will be defined for you on `process.env`. For example, having an environment variable named `REACT_APP_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_SECRET_CODE`, in addition From 64463fe15a4aed98fc8a5169261ec4c661859901 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 24 Feb 2017 16:17:00 +0000 Subject: [PATCH 2/2] Move words around --- packages/react-scripts/template/README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 124100b3a90..28f3cb20bcf 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -603,14 +603,12 @@ default you will have `NODE_ENV` defined for you, and any other environment vari **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. ->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). -> Also note that during build for deployment (`npm run build`), `NODE_ENV` will be hard-set to `'production'`. +>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. These environment variables will be defined for you on `process.env`. For example, having an environment -variable named `REACT_APP_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_SECRET_CODE`, in addition -to `process.env.NODE_ENV`. +variable named `REACT_APP_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_SECRET_CODE`. ->Note: Changing any environment variables will require you to restart the development server if it is running. +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. These environment variables can be useful for displaying information conditionally based on where the project is deployed or consuming sensitive data that lives outside of version control. @@ -644,6 +642,10 @@ When you load the app in the browser and inspect the ``, you will see its ``` +The above form is looking for a variable called `REACT_APP_SECRET_CODE` from the environment. In order to consume this +value, we need to have it defined in the environment. This can be done using two ways: either in your shell or in +a `.env` file. Both of these ways are described in the next few sections. + Having access to the `NODE_ENV` is also useful for performing actions conditionally: ```js @@ -652,9 +654,7 @@ if (process.env.NODE_ENV !== 'production') { } ``` -The above form is looking for a variable called `REACT_APP_SECRET_CODE` from the environment. In order to consume this -value, we need to have it defined in the environment. This can be done using two ways: either in your shell or in -a `.env` file. +When you compile the app with `npm run build`, the minification step will strip out this condition, and the resulting bundle will be smaller. ### Referencing Environment Variables in the HTML