init

Author: acco

.gitignore

@@ -0,0 +1 @@
+cra-server-ex.graffle

Procfile

@@ -0,0 +1,2 @@
+web: ./node_modules/.bin/react-scripts start
+api: PORT=3001 ./node_modules/.bin/babel-node server.js

README.cq.md

@@ -0,0 +1,65 @@
+# `create-react-app` with a server example
+
+ [![Dolpins](https://cdn.rawgit.com/fullstackio/cq/master/doc/readme/dolphins-badge-ff00ff.svg)](https://www.fullstackreact.com)
+
+This project demonstrates using the setup generated by `create-react-app` alongside a Node Express API server. You can use it as a starting point for your own projects.
+
+## Running
+
+```
+git clone git@github.com:fullstackreact/create-react-app-with-server.git
+cd create-react-app-with-server
+npm i
+npm start
+```
+
+## Overview
+
+`create-react-app` configures a Webpack development server to run on `localhost:3000`. This development server will bundle all static assets located under `src/`. All requests to `localhost:3000` will serve `index.html` which will include Webpack's `bundle.js`.
+
+In this example, the React component `App` makes a request to an API server (`server.js`). The user interacts exclusively with the Webpack dev server at `localhost:3000`. The Webpack dev server communicates with the API server when needed at `localhost:3001`:
+
+![Flow diagram](./flow-diagram.png)
+
+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.
+
+## DIY
+
+You can get here yourself using `create-react-app` as a starting point.
+
+The additions to the `create-react-app` boilerplate are listed below.
+
+### `package.json`
+
+Includes extra dependencies for our API server.
+
+`npm start` executes `nf start` (Foreman's start command).
+
+### `Procfile`
+
+Foreman commands for booting the Webpack dev server (`web`) and the API server (`api`):
+
+```
+web: ./node_modules/.bin/react-scripts start
+api: PORT=3001 ./node_modules/.bin/babel-node server.js
+```
+
+(More info on `node-foreman` and Procfiles [here](https://github.com/strongloop/node-foreman)).
+
+### `App.js`
+
+Inside of the `App` component, we make a sample request to the API server using Fetch:
+
+{lang=javascript,crop-query=choose(.fetch,1),format=gfm}
+<<[](src/App.js)
+
+### `server.js`
+
+The API server. The important bit of configuration is **white-listing an origin domain**.
+
+The user is communicating with `localhost:3000`. Yet, as demonstrated above, Fetch makes a request to `localhost:3001` — a different domain. Browsers restrict HTTP requests within scripts to the same domain.
+
+In our API server, we let the browser know it's OK if a request is originating from `localhost:3000`:
+
+{lang=javascript,crop-query=context(.allowCrossDomain,0,1),format=gfm}
+<<[](server.js)

README.md

@@ -0,0 +1,76 @@
+# `create-react-app` with a server example
+
+ [![Dolpins](https://cdn.rawgit.com/fullstackio/cq/master/doc/readme/dolphins-badge-ff00ff.svg)](https://www.fullstackreact.com)
+
+This project demonstrates using the setup generated by `create-react-app` alongside a Node Express API server. You can use it as a starting point for your own projects.
+
+## Running
+
+```
+git clone git@github.com:fullstackreact/create-react-app-with-server.git
+cd create-react-app-with-server
+npm i
+npm start
+```
+
+## Overview
+
+`create-react-app` configures a Webpack development server to run on `localhost:3000`. This development server will bundle all static assets located under `src/`. All requests to `localhost:3000` will serve `index.html` which will include Webpack's `bundle.js`.
+
+In this example, the React component `App` makes a request to an API server (`server.js`). The user interacts exclusively with the Webpack dev server at `localhost:3000`. The Webpack dev server communicates with the API server when needed at `localhost:3001`:
+
+![Flow diagram](./flow-diagram.png)
+
+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.
+
+## DIY
+
+You can get here yourself using `create-react-app` as a starting point.
+
+The additions to the `create-react-app` boilerplate are listed below.
+
+### `package.json`
+
+Includes extra dependencies for our API server.
+
+`npm start` executes `nf start` (Foreman's start command).
+
+### `Procfile`
+
+Foreman commands for booting the Webpack dev server (`web`) and the API server (`api`):
+
+```
+web: ./node_modules/.bin/react-scripts start
+api: PORT=3001 ./node_modules/.bin/babel-node server.js
+```
+
+(More info on `node-foreman` and Procfiles [here](https://github.com/strongloop/node-foreman)).
+
+### `App.js`
+
+Inside of the `App` component, we make a sample request to the API server using Fetch:
+
+```javascript
+    fetch('http://localhost:3001/api/forecast', {
+      accept: 'application/json',
+    }).then(parseJSON)
+```
+
+### `server.js`
+
+The API server. The important bit of configuration is **white-listing an origin domain**.
+
+The user is communicating with `localhost:3000`. Yet, as demonstrated above, Fetch makes a request to `localhost:3001` — a different domain. Browsers restrict HTTP requests within scripts to the same domain.
+
+In our API server, we let the browser know it's OK if a request is originating from `localhost:3000`:
+
+```javascript
+const allowCrossDomain = function (req, res, next) {
+  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
+  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
+  res.header('Access-Control-Allow-Headers', 'Content-Type');
+
+  next();
+};
+app.use(allowCrossDomain);
+```

favicon.ico

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

flow-diagram.png

@@ -0,0 +1,26 @@
+{
+  "name": "calo",
+  "version": "0.0.1",
+  "private": true,
+  "devDependencies": {
+    "react-scripts": "0.1.0"
+  },
+  "babel": {
+    "presets": [ "es2015", "stage-0" ]
+  },
+  "dependencies": {
+    "babel-cli": "6.6.5",
+    "babel-core": "6.4.5",
+    "babel-preset-es2015": "6.3.13",
+    "babel-preset-stage-0": "6.5.0",
+    "express": "4.13.3",
+    "foreman": "1.4.1",
+    "isomorphic-fetch": "^2.2.1",
+    "react": "15.2.1",
+    "react-dom": "15.2.1"
+  },
+  "scripts": {
+    "start": "nf start",
+    "generate-readme": "cqmd -o README.md -p . README.cq.md"
+  }
+}

index.html

@@ -0,0 +1,25 @@
+const express = require('express');
+
+const app = express();
+
+app.set('port', (process.env.PORT || 3001));
+
+// Allow requests from pages served by Webpack
+const allowCrossDomain = function (req, res, next) {
+  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
+  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
+  res.header('Access-Control-Allow-Headers', 'Content-Type');
+
+  next();
+};
+app.use(allowCrossDomain);
+
+app.get('/api/forecast', (req, res) => {
+  res.json({
+    text: 'Server says: Another scorcher!',
+  });
+});
+
+app.listen(app.get('port'), () => {
+  console.log(`Find the server at: http://localhost:${app.get('port')}/`); // eslint-disable-line no-console
+});

package.json

@@ -0,0 +1,24 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: spin infinite 20s linear;
+  height: 80px;
+}
+
+.App-header {
+  background-color: #222;
+  height: 150px;
+  padding: 20px;
+  color: white;
+}
+
+.App-intro {
+  font-size: large;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}