From f013558e5e419e3cb8bef5c672d933538bf5b590 Mon Sep 17 00:00:00 2001 From: Calvin Webster Date: Thu, 9 Feb 2017 15:46:47 -0500 Subject: [PATCH] clarifying the use of custom environment variables (#1513) * clarifying the use of custom environment variables * Tweak --- template/README.md | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/template/README.md b/template/README.md index 75e10517f3d..357df8d5dee 100644 --- a/template/README.md +++ b/template/README.md @@ -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).
-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 ```