|
1 | | -# `create-react-app` with a server example |
| 1 | +# Repository moved |
2 | 2 |
|
3 | | - [](https://www.fullstackreact.com) |
4 | | - |
5 | | -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. |
6 | | - |
7 | | -## Running |
8 | | - |
9 | | -``` |
10 | | -git clone git@github.com:fullstackreact/create-react-app-with-server.git |
11 | | -cd create-react-app-with-server |
12 | | -npm i |
13 | | -npm start |
14 | | -``` |
15 | | - |
16 | | -## Overview |
17 | | - |
18 | | -`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`. |
19 | | - |
20 | | -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`: |
21 | | - |
22 | | - |
23 | | - |
24 | | -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. |
25 | | - |
26 | | -## DIY |
27 | | - |
28 | | -You can get here yourself using `create-react-app` as a starting point. |
29 | | - |
30 | | -The additions to the `create-react-app` boilerplate are listed below. |
31 | | - |
32 | | -### `package.json` |
33 | | - |
34 | | -Includes extra dependencies for our API server. |
35 | | - |
36 | | -`npm start` executes `nf start` (Foreman's start command). |
37 | | - |
38 | | -### `Procfile` |
39 | | - |
40 | | -Foreman commands for booting the Webpack dev server (`web`) and the API server (`api`): |
41 | | - |
42 | | -``` |
43 | | -web: ./node_modules/.bin/react-scripts start |
44 | | -api: PORT=3001 ./node_modules/.bin/babel-node server.js |
45 | | -``` |
46 | | - |
47 | | -(More info on `node-foreman` and Procfiles [here](https://github.com/strongloop/node-foreman)). |
48 | | - |
49 | | -### `App.js` |
50 | | - |
51 | | -Inside of the `App` component, we make a sample request to the API server using Fetch: |
52 | | - |
53 | | -```javascript |
54 | | - fetch('http://localhost:3001/api/forecast', { |
55 | | - accept: 'application/json', |
56 | | - }).then(parseJSON) |
57 | | -``` |
58 | | - |
59 | | -### `server.js` |
60 | | - |
61 | | -The API server. The important bit of configuration is **white-listing an origin domain**. |
62 | | - |
63 | | -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. |
64 | | - |
65 | | -In our API server, we let the browser know it's OK if a request is originating from `localhost:3000`: |
66 | | - |
67 | | -```javascript |
68 | | -const allowCrossDomain = function (req, res, next) { |
69 | | - res.header('Access-Control-Allow-Origin', 'http://localhost:3000'); |
70 | | - res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); |
71 | | - res.header('Access-Control-Allow-Headers', 'Content-Type'); |
72 | | - |
73 | | - next(); |
74 | | -}; |
75 | | -app.use(allowCrossDomain); |
76 | | -``` |
77 | | - |
78 | | -## TODO |
79 | | - |
80 | | -* Add logic to make this work in a production environment |
| 3 | +See https://github.com/fullstackreact/food-lookup-demo |
0 commit comments