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

clarifying the use of custom environment variables (#1513)

Browse Source 
* clarifying the use of custom environment variables

* Tweak
This commit is contained in:
Calvin Webster
2017-02-09 15:46:47 -05:00
committed by Dan Abramov
parent de6e0590b2
commit 160d8d13ef
1 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/react-scripts/template/README.md
View File

@@ -495,7 +495,7 @@ Now you are ready to use the imported React Bootstrap components within your com
Flow is a static type checker that helps you write code with fewer bugs. Check out this [introduction to using static types in JavaScript](https://medium.com/@preethikasireddy/why-use-static-types-in-javascript-part-1-8382da1e0adb) if you are new to this concept.
Recent versions of [Flow](http://flowtype.org/) work with Create React App projects out of the box.
Recent versions of [Flow](http://flowtype.org/) work with Create React App projects out of the box.
To add Flow to a Create React App project, follow these steps:
@@ -515,7 +515,11 @@ To learn more about Flow, check out [its documentation](https://flowtype.org/).
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_`. These environment variables will be defined for you on `process.env`. For example, having an environment
`REACT_APP_`.
>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).
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`.
@@ -623,12 +627,12 @@ These tutorials will help you to integrate your app with an API backend running
using `fetch()` to access it.
### Node
Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/).
Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/).
You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo).
### Ruby on Rails
Check out [this tutorial](https://www.fullstackreact.com/articles/how-to-get-create-react-app-to-work-with-your-rails-api/).
Check out [this tutorial](https://www.fullstackreact.com/articles/how-to-get-create-react-app-to-work-with-your-rails-api/).
You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo-rails).
## Proxying API Requests in Development
@@ -961,7 +965,7 @@ Snapshot testing is a feature of Jest that automatically generates text snapshot
### Editor Integration
If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest extension](https://github.com/orta/vscode-jest) which works with Create React App out of the box. This provides a lot of IDE-like features while using a text editor: showing the status of a test run with potential fail messages inline, starting and stopping the watcher automatically, and offering one-click snapshot updates.
If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest extension](https://github.com/orta/vscode-jest) which works with Create React App out of the box. This provides a lot of IDE-like features while using a text editor: showing the status of a test run with potential fail messages inline, starting and stopping the watcher automatically, and offering one-click snapshot updates.
![VS Code Jest Preview](https://cloud.githubusercontent.com/assets/49038/20795349/a032308a-b7c8-11e6-9b34-7eeac781003f.png)
@@ -1196,7 +1200,7 @@ GitHub Pages doesn't support routers that use the HTML5 `pushState` history API
### Heroku
Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).<br>
You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration).
You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration).
#### Resolving "Module not found: Error: Cannot resolve 'file' or 'directory'"
@@ -1204,7 +1208,7 @@ Sometimes `npm run build` works locally but fails during deploy via Heroku with
```
remote: Failed to create a production build. Reason:
remote: Module not found: Error: Cannot resolve 'file' or 'directory'
remote: Module not found: Error: Cannot resolve 'file' or 'directory'
MyDirectory in /tmp/build_1234/src
```