Skip to content

Commit d951a7b

Browse files
committed
Repo moved
1 parent 0eb94da commit d951a7b

File tree

13 files changed

+2
-326
lines changed

13 files changed

+2
-326
lines changed

Procfile

Lines changed: 0 additions & 2 deletions
This file was deleted.

README.cq.md

Lines changed: 0 additions & 69 deletions
This file was deleted.

README.md

Lines changed: 2 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,3 @@
1-
# `create-react-app` with a server example
1+
# Repository moved
22

3-
[![Dolpins](https://cdn.rawgit.com/fullstackio/cq/master/doc/readme/dolphins-badge-ff00ff.svg)](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-
![Flow diagram](./flow-diagram.png)
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

favicon.ico

-24.3 KB
Binary file not shown.

flow-diagram.png

-66.9 KB
Binary file not shown.

index.html

Lines changed: 0 additions & 11 deletions
This file was deleted.

package.json

Lines changed: 0 additions & 26 deletions
This file was deleted.

server.js

Lines changed: 0 additions & 25 deletions
This file was deleted.

src/App.css

Lines changed: 0 additions & 24 deletions
This file was deleted.

src/App.js

Lines changed: 0 additions & 41 deletions
This file was deleted.

0 commit comments

Comments
 (0)