gaearon / food-lookup-demo

A demonstration of using `create-react-app` with a server

create-react-app with a server example

This project demonstrates using the setup generated by create-react-app alongside a Node Express API server.

We have a detailed blog post that explains this repository.

Running

git clone [email protected]:fullstackreact/food-lookup-demo.git
cd food-lookup-demo
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 client/src/. All requests to localhost:3000 will serve client/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's browser visits the Webpack dev server at localhost:3000. Then the React client communicates with the API server when needed at localhost:3001:

This setup uses node-foreman for process management. Executing npm start instructs Foreman to boot both the Webpack dev server and the API server.