Heroku Buildpack for create-react-app

Deploy React.js web apps generated with create-react-app.

Automates deployment with the built-in tooling and serves it up via Nginx.

Requires

• Heroku
  • command-line tools (CLI)
  • a free account
• git
• Node.js
• create-react-app
  • npm install -g create-react-app

Usage

Generate a React app

create-react-app my-app
cd my-app

Make it a git repo

git init

Create the Heroku app

heroku create -b https://github.com/mars/create-react-app-buildpack.git

Commit & deploy ♻️

git add .
git commit -m "react-create-app on Heroku"
git push heroku master

Visit the app's public URL in your browser

heroku open

Visit the Heroku Dashboard for the app

heroku browse

Continue Development

Work with your app locally using npm start. See: create-react-app docs

Then, commit & deploy ♻️

Customization

The web server may be configured via the static buildpack.

The default static.json, if it does not exist in the repo, is:

{ "root": "build/" }

Routing clean URLs

By default, React Router (not included) uses hash-based URLs like https://example.com/index.html#/users/me/edit. This is nice & easy when getting started with local development, but for a public app you probably want real URLs like https://example.com/users/me/edit.

Create a static.json file to configure the web server for clean browserHistory URLs with React Router:

{
  "root": "build/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

Architecture 🏙

This buildpack composes three buildpacks (specified in .buildpacks) to support no-configuration deployment on Heroku:

1. heroku/nodejs buildpack

• complete Node.js enviroment to support the webpack build
• node_modules cached between deployments

2. mars/create-react-app-inner-buildpack

• generates the default static.json
• performs the production build for create-react-app, npm run build

3. heroku/static buildpack

• Nginx web server
• handy static website & SPA (single-page app) customization options