A demonstration of using `create-react-app` with a Rails API server
Switch branches/tags
Nothing to show
Clone or download
Latest commit 2bd6664 Jul 27, 2017
Permalink
Failed to load latest commit information.
app Update to `react-scripts` 0.2.3, use proxy Aug 25, 2016
bin init Aug 3, 2016
client add yarn.lock Jul 3, 2017
config init Aug 3, 2016
db init Aug 3, 2016
lib Use rake to boot, specify foreman port Aug 4, 2016
log init Aug 3, 2016
public init Aug 3, 2016
test init Aug 3, 2016
vendor/assets init Aug 3, 2016
.gitignore Remove `node_modules` from git Aug 3, 2016
Gemfile pull web-console out of test group Jul 3, 2017
Gemfile.lock Update to Rails 5 Feb 8, 2017
Procfile Use rake to boot, specify foreman port Aug 4, 2016
README.md Update to Rails 5 Feb 8, 2017
Rakefile init Aug 3, 2016
config.ru init Aug 3, 2016
flow-diagram.png Update `flow-diagram.png` Aug 25, 2016

README.md

create-react-app with a server example

Dolphins

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 that explains this repository.

Node+Express

Check out the Node+Express if that's your preferred API server platform.

Running

git clone git@github.com:fullstackreact/food-lookup-demo-rails.git
cd food-lookup-demo-rails
bundle
cd client
npm i
cd ..
rake 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 and her browser will communicate exclusively with the Webpack development server.

Inside Client.js, we use Fetch to make a request to the API:

// Inside Client.js
return fetch(`/api/food?q=${query}`, {
  // ...
})

This request is made to localhost:3000, the Webpack dev server. Because the route has the special prefix /api/, the Webpack server knows 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:

// 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. In many setups, this means that references to the API URL in development matches that in production. You don't have to do something like this:
// Example API base URL determination in Client.js
const apiBaseUrl = process.env.NODE_ENV === 'development' ? 'localhost:3001' : '/'

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