Food Lookup Demo

A demonstration of using `create-react-app` with a server
Alternatives To Food Lookup Demo
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
8 days ago107otherTypeScript
Scalable PaaS (automated Docker+nginx) - aka Heroku on Steroids
Create React App Buildpack3,328
a year ago14mitShell
⚛️ Heroku Buildpack for create-react-app: static hosting for React.js web apps
12 days ago7mitPython
The tiniest PaaS you've ever seen. Piku allows you to do git push deployments to your own servers.
3 years ago94lgpl-2.1Java
Distributed Open Source twitter and social media message search server that anonymously collects, shares, dumps and indexes data
Food Lookup Demo1,038
5 years ago16mitJavaScript
A demonstration of using `create-react-app` with a server
7 years agoShell
heroku buildpack for Apache Ant to run Loklak
Heroku Cra Node877
2 years ago5mitHTML
⚛️ How to use create-react-app with a custom Node server on Heroku
Manet580129 months ago52November 03, 201842mitJavaScript
Website screenshot service powered by Node.js, SlimerJS and PhantomJS
2 years ago24mitPython
An AWS hosted Minecraft server that will only run when players are active. Players can start the server through a simple UI accessed through free Heroku server hosting.
Universal Redux Template470
6 years ago1September 20, 20176JavaScript
A clean, extensible react + redux boilerplate with universal/isomorphic rendering, testing and more
Alternatives To Food Lookup Demo
Select To Compare

Alternative Project Comparisons

create-react-app with a server example

TravisCI 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.


Check out the Rails version if that's your preferred API server platform.

Running locally

git clone
cd food-lookup-demo
npm i

cd client
npm i

cd ..
npm start


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:

// 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:

// 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:
// Example API base URL determination in Client.js
const apiBaseUrl = process.env.NODE_ENV === 'development' ? 'localhost:3001' : '/'

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



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') {

You just need to have Webpack produce a static bundle of the React app (below).


We assume basic knowledge of Heroku.

0. Setup your Heroku account and Heroku CLI

For installing the CLI tool, see this article.

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.

Popular Server Projects
Popular Heroku Projects
Popular Networking Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
React App
Api Server