kylefang/create-react-app
1
0
Fork 0
mirror of https://github.com/zhigang1992/create-react-app.git synced 2026-03-29 00:18:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

[docs] Warn/clarify that env vars are NOT "SECRET" (#6062)

Browse Source 
* [docs] Warn about storing secrets in env vars

Fixes #5676

Co-Authored-By: Ian Schmitz <ianschmitz@gmail.com>

* [docs] Add NOT to REACT_APP_SECRET_CODE

Fixes #5676

* [docs] Remove line breaks
This commit is contained in:
JBallin
2019-02-09 17:41:24 -08:00
committed by Ian Schmitz
parent 42ed676f77
commit 313e472331
1 changed files with 17 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
docusaurus/docs/adding-custom-environment-variables.md
View File

@@ -6,24 +6,23 @@ sidebar_label: Environment Variables
> Note: this feature is available with `react-scripts@0.2.3` and higher.
Your project can consume variables declared in your environment as if they were declared locally in your JS files. By
default you will have `NODE_ENV` defined for you, and any other environment variables starting with
`REACT_APP_`.
Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have `NODE_ENV` defined for you, and any other environment variables starting with `REACT_APP_`.
> WARNING: Do not store any secrets (such as private API keys) in your React app!
>
> Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.
**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](title-and-meta-tags.md#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/facebook/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`.
These environment variables will be defined for you on `process.env`. For example, having an environment variable named `REACT_APP_NOT_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_NOT_SECRET_CODE`.
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.
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.
First, you need to have environment variables defined. For example, let’s say you wanted to consume a secret defined
in the environment inside a `<form>`:
First, you need to have environment variables defined. For example, let’s say you wanted to consume an environment variable inside a `<form>`:
```jsx
render() {
@@ -31,29 +30,25 @@ render() {
<div>
<small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
<form>
<input type="hidden" defaultValue={process.env.REACT_APP_SECRET_CODE} />
<input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_CODE} />
</form>
</div>
);
}
```
During the build, `process.env.REACT_APP_SECRET_CODE` will be replaced with the current value of the `REACT_APP_SECRET_CODE` environment variable. Remember that the `NODE_ENV` variable will be set for you automatically.
During the build, `process.env.REACT_APP_NOT_SECRET_CODE` will be replaced with the current value of the `REACT_APP_NOT_SECRET_CODE` environment variable. Remember that the `NODE_ENV` variable will be set for you automatically.
When you load the app in the browser and inspect the `<input>`, you will see its value set to `abcdef`, and the bold text will show the environment provided when using `npm start`:
```html
<div>
<small>You are running this application in <b>development</b> mode.</small>
<form>
<input type="hidden" value="abcdef" />
</form>
<form><input type="hidden" value="abcdef" /></form>
</div>
```
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.
The above form is looking for a variable called `REACT_APP_NOT_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:
@@ -82,13 +77,12 @@ Note that the caveats from the above section apply:
## Adding Temporary Environment Variables In Your Shell
Defining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the
life of the shell session.
Defining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the life of the shell session.
### Windows (cmd.exe)
```cmd
set "REACT_APP_SECRET_CODE=abcdef" && npm start
set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start
```
(Note: Quotes around the variable assignment are required to avoid a trailing whitespace.)
@@ -96,13 +90,13 @@ set "REACT_APP_SECRET_CODE=abcdef" && npm start
### Windows (Powershell)
```Powershell
($env:REACT_APP_SECRET_CODE = "abcdef") -and (npm start)
($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start)
```
### Linux, macOS (Bash)
```bash
REACT_APP_SECRET_CODE=abcdef npm start
REACT_APP_NOT_SECRET_CODE=abcdef npm start
```
## Adding Development Environment Variables In `.env`
@@ -112,7 +106,7 @@ REACT_APP_SECRET_CODE=abcdef npm start
To define permanent environment variables, create a file called `.env` in the root of your project:
```
REACT_APP_SECRET_CODE=abcdef
REACT_APP_NOT_SECRET_CODE=abcdef
```
> 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/facebook/create-react-app/issues/865#issuecomment-252199527). Changing any environment variables will require you to restart the development server if it is running.