Updates to allow for deployment to Heroku

* Separate production and deploy boot processes
* Add `client/build` to source control
* Unify ports around environment variable `PORT`

Author: acco

.gitignore

@@ -1,4 +1,3 @@
 cra-server-ex.graffle
 node_modules
 npm-debug.log
-client/build

Procfile

@@ -1,2 +1 @@
-web: cd client && npm start
-api: npm run server
+web: npm run server

Procfile.dev

@@ -0,0 +1,2 @@
+web: cd client && npm start
+api: PORT=3001 npm run server

README.md

@@ -12,7 +12,7 @@ We have a [detailed blog post](https://www.fullstackreact.com/articles/using-cre
 
 Check out the [Rails version](https://github.com/fullstackreact/food-lookup-demo-rails) if that's your preferred API server platform.
 
-## Running
+## Running locally
 
 ```
 git clone [email protected]:fullstackreact/food-lookup-demo.git
@@ -23,9 +23,11 @@ cd client
 npm i
 
 cd ..
-npm start
+npm run dev
 ```
 
+**Important**: **`npm start`** is intended for production only. Use `npm run dev`.
+
 ## Overview
 
 `create-react-app` configures a Webpack development server to run on `localhost:3000`. This development server will bundle all static assets located under `client/src/`. All requests to `localhost:3000` will serve `client/index.html` which will include Webpack's `bundle.js`.
@@ -41,7 +43,7 @@ return fetch(`/api/food?q=${query}`, {
 })
 ```
 
-This request is made to `localhost:3000`, the Webpack dev server. Because the route has the special prefix `/api/`, the Webpack server knows that this request is actually intended for our API server. We specify in `package.json` that we would like Webpack to proxy API requests to `localhost:3001`:
+This request is made to `localhost:3000`, the Webpack dev server. Webpack will infer that this request is actually intended for our API server. We specify in `package.json` that we would like Webpack to proxy API requests to `localhost:3001`:
 
 ```js
 // Inside client/package.json
@@ -57,11 +59,83 @@ Therefore, the user's browser makes a request to Webpack at `localhost:3000` whi
 This setup provides two advantages:
 
 1. If the user's browser tried to request `localhost:3001` directly, we'd run into issues with CORS.
-2. In many setups, this means that references to the API URL in development matches that in production. You don't have to do something like this:
+2. The API URL in development matches that in production. You don't have to do something like this:
 
 ```js
 // Example API base URL determination in Client.js
 const apiBaseUrl = process.env.NODE_ENV === 'development' ? 'localhost:3001' : '/'
 ```
 
 This setup uses [node-foreman](https://github.com/strongloop/node-foreman) for process management. Executing `npm start` instructs Foreman to boot both the Webpack dev server and the API server.
+
+## Deploying
+
+### Background
+
+The app is ready to be deployed to Heroku. In `package.json`, we specify separate boot commands for development and production:
+
+```
+"start": "nf start -p $PORT",
+"dev": "nf start -p 3000 --procfile Procfile.dev",
+```
+
+In development, we use `Procfile.dev` which boots both the API server and the Webpack server:
+
+```
+web: cd client && npm start
+api: PORT=3001 npm run server
+```
+
+In production, Heroku will use `Procfile` which boots just the server:
+
+```
+web: npm run server
+```
+
+Inside `server.js`, we tell Node/Express we'd like it to serve static assets in production:
+
+```
+if (process.env.NODE_ENV === 'production') {
+  app.use(express.static('client/build'));
+}
+```
+
+### Steps
+
+We assume basic knowledge of Heroku.
+
+**0. Setup your Heroku account and Heroku CLI**
+
+For installing the CLI tool, see [this article](https://devcenter.heroku.com/articles/heroku-command-line).
+
+**1. Build the React app**
+
+Running `npm run build` creates the static bundle which we can then use any HTTP server to serve:
+
+```
+cd client/
+npm run build
+```
+
+**2. Commit the `client/build` folder to source control**
+
+From the root of the project:
+
+```
+git add client/build
+git commit -m 'Adding `build` to source control'
+```
+
+**3. Create the Heroku app**
+
+```
+heroku apps:create food-lookup-demo
+```
+
+**4. Push to Heroku**
+
+```
+git push heroku master
+```
+
+Heroku will give you a link at which to view your live app.

client/.gitignore

@@ -6,9 +6,6 @@ node_modules
 # testing
 coverage
 
-# production
-build
-
 # misc
 .DS_Store
 .env

client/build/asset-manifest.json

@@ -0,0 +1,12 @@
+{
+  "main.css": "static/css/main.03b6e96f.css",
+  "main.css.map": "static/css/main.03b6e96f.css.map",
+  "main.js": "static/js/main.e5a5c899.js",
+  "main.js.map": "static/js/main.e5a5c899.js.map",
+  "static/media/flags.png": "static/media/flags.9c74e172.png",
+  "static/media/icons.eot": "static/media/icons.f7c2b4b7.eot",
+  "static/media/icons.svg": "static/media/icons.29800836.svg",
+  "static/media/icons.ttf": "static/media/icons.706450d7.ttf",
+  "static/media/icons.woff": "static/media/icons.d9ee23d5.woff",
+  "static/media/icons.woff2": "static/media/icons.97493d3f.woff2"
+}

client/build/favicon.ico

@@ -0,0 +1 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="/favicon.ico"><title>Food Lookup Demo</title><link href="/static/css/main.03b6e96f.css" rel="stylesheet"></head><body><div id="root"></div><script type="text/javascript" src="/static/js/main.e5a5c899.js"></script></body></html>