Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fullstackreact/food-lookup-demo
A demonstration of using `create-react-app` with a server
https://github.com/fullstackreact/food-lookup-demo
Last synced: 1 day ago
JSON representation
A demonstration of using `create-react-app` with a server
- Host: GitHub
- URL: https://github.com/fullstackreact/food-lookup-demo
- Owner: fullstackreact
- License: mit
- Created: 2016-07-27T22:38:52.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-10-09T14:43:51.000Z (about 6 years ago)
- Last Synced: 2024-08-09T02:15:11.720Z (3 months ago)
- Language: JavaScript
- Size: 5.12 MB
- Stars: 1,184
- Watchers: 27
- Forks: 371
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - fullstackreact/food-lookup-demo - A demonstration of using `create-react-app` with a server (JavaScript)
README
# `create-react-app` with a server example
[](https://travis-ci.org/fullstackreact/food-lookup-demo)
[](https://www.fullstackreact.com)
This project demonstrates using the setup generated by `create-react-app` alongside a Node Express API server.
### Detailed blog post
We have a [detailed blog post](https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/) that explains this repository.
### Rails
Check out the [Rails version](https://github.com/fullstackreact/food-lookup-demo-rails) if that's your preferred API server platform.
## Running locally
```
git clone https://github.com/fullstackreact/food-lookup-demo.git
cd food-lookup-demo
npm i
cd client
npm i
cd ..
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 `client/src/`. All requests to `localhost:3000` will serve `client/index.html` which will include Webpack's `bundle.js`.
To prevent any issues with CORS, the user's browser will communicate exclusively with the Webpack development server.
Inside `Client.js`, we use Fetch to make a request to the API:
```js
// Inside Client.js
return fetch(`/api/food?q=${query}`, {
// ...
})
```
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
"proxy": "http://localhost:3001/",
```
This handy features is provided for us by `create-react-app`.
Therefore, the user's browser makes a request to Webpack at `localhost:3000` which then proxies the request to our API server at `localhost:3001`:
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. 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 [concurrently](https://github.com/kimmobrunfeldt/concurrently) for process management. Executing `npm start` instructs `concurrently` to boot both the Webpack dev server and the API server.
## Deploying
### Background
The app is ready to be deployed to Heroku.
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'));
}
```
You just need to have Webpack produce a static bundle of the React app (below).
### 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.