Add Proxy To An API Server In Development With CRA as a react til

Author: jbranchaud

README.md

@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
 For a steady stream of TILs from a variety of rocketeers, checkout
 [til.hashrocket.com](https://til.hashrocket.com/).
 
-_578 TILs and counting..._
+_579 TILs and counting..._
 
 ---
 
@@ -411,6 +411,7 @@ _578 TILs and counting..._
 - [Force A Component To Only Have One Child](react/force-a-component-to-only-have-one-child.md)
 - [Inline Style Attributes Should Be Camel Cased](react/inline-style-attributes-should-be-camel-cased.md)
 - [Passing Props Down To React-Router Route](react/passing-props-down-to-react-router-route.md)
+- [Proxy To An API Server In Development With CRA](react/proxy-to-an-api-server-in-development-with-cra.md)
 
 ### Ruby
 

react/proxy-to-an-api-server-in-development-with-cra.md

@@ -0,0 +1,32 @@
+# Proxy To An API Server In Development With CRA
+
+[create-react-app](https://github.com/facebookincubator/create-react-app) is
+a great way to bootstrap a React project, especially if you are building a
+single-page app. When building an SPA, you more likely than not will have a
+backend API that you interact with.
+
+You can set up your React app to interact with that backend API server in
+development using the `proxy` configuration in `package.json`.
+
+```json
+// package.json
+  ...
+  "proxy": "http://localhost:4000",
+}
+```
+
+This will allow you to keep your API calls nice and clean.
+
+```javascript
+fetch("/api/session", ...
+```
+
+No need to manage some sort of _host URL_ environment variable.
+
+Additionally, this will remove an CORS issues because the `webpackDevServer`
+will be proxying any paths that it doesn't recognize to the host and port
+that you've specified.
+
+See [the `create-react-app`
+docs](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development)
+for more details.