@@ -495,7 +495,7 @@ Now you are ready to use the imported React Bootstrap components within your com
...
@@ -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.
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:
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/).
...
@@ -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
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
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
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`.
to `process.env.NODE_ENV`.
...
@@ -623,12 +627,12 @@ These tutorials will help you to integrate your app with an API backend running
...
@@ -623,12 +627,12 @@ These tutorials will help you to integrate your app with an API backend running
using `fetch()` to access it.
using `fetch()` to access it.
### Node
### 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).
You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo).
### Ruby on Rails
### 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).
You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo-rails).
## Proxying API Requests in Development
## Proxying API Requests in Development
...
@@ -961,7 +965,7 @@ Snapshot testing is a feature of Jest that automatically generates text snapshot
...
@@ -961,7 +965,7 @@ Snapshot testing is a feature of Jest that automatically generates text snapshot
### Editor Integration
### 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.


...
@@ -1196,7 +1200,7 @@ GitHub Pages doesn't support routers that use the HTML5 `pushState` history API
...
@@ -1196,7 +1200,7 @@ GitHub Pages doesn't support routers that use the HTML5 `pushState` history API
### Heroku
### Heroku
Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).<br>
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'"
#### 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
...
@@ -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: 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'