Repository files navigation

Deploy React.js web apps generated withcreate-react-app. Automates deployment with the built-in bundler and serves it up viaNginx. See theintroductory blog post and entry inHeroku elements.

• ⚠️Requirements
• 🚀Usage
  1. Generate a React app
  2. Make it a git repo
  3. Create the Heroku app
  4. Commit & deploy ♻️
  5. Continue Development
• 👓Customization
  • Web server
    • Routing clean URLs
    • HTTPS-only
  • Environment variables
• 📍Version compatibility
• 🏙Architecture
• 🔩Development

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

create-react-app my-appcd my-app

git init

At this point, this new repo is local, only on your computer. Eventually, you may want topush to Github.

heroku create$my-app-name --buildpack https://github.com/mars/create-react-app-buildpack.git

✏️Replace$my-app-name with a name for your unique app.

This command:

• sets theapp name & its URLhttps://my-app-name.herokuapp.com
• sets thebuildpack to deploy acreate-react-app app
• configures theheroku remote in the local git repo, sogit push heroku master will push to this new Heroku app.

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

heroku open

Find the app onyour dashboard.

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

Then, commit & deploy ♻️

Eventually, to share, collaborate, or simply back-up your code,create an empty repo at Github, and then follow the instructions shown on the repo topush an existing repository from the command line.

The web server may beconfigured via the static buildpack.

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

{"root":"build/" }

By default,React Router (not included) uses hash-based URLs likehttps://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 likehttps://example.com/users/me/edit.

Create astatic.json file to configure the web server for cleanbrowserHistory URLs with React Router:

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

Enforce secure connections by automatically redirecting insecure requests tohttps://, instatic.json:

{"https_only":true}

Prevent downgrade attacks withHTTP strict transport security. Add HSTS"headers" tostatic.json:

{"headers": {"/**": {"Strict-Transport-Security":"max-age=7776000"    }  }}

• max-age is the number of seconds to enforce HTTPS since the last connection; the example is 90-days

REACT_APP_* andNODE_* environment variables are supported on Heroku during the compile phase, whennpm run build is executed to generate the JavaScript bundle.

Setconfig vars on a Heroku app like this:

heroku config:set REACT_APP_HELLO='I love sushi!'

♻️ The app must be re-deployed for this change to take effect, because the automatic restart after a config var change does not rebuild the JavaScript bundle.

git commit --allow-empty -m"Set REACT_APP_HELLO config var"git push heroku master

This buildpack will never intentionally cause previously deployed apps to become undeployable. Using masteras directed in the main instructions will always deploy an app with the most recent version of this buildpack.

Releases are tagged, so you can lock an app to a specific version, if that kind of determinism pleases you:

heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git#v1.2.1

✏️Replacev1.2.1 with the desiredrelease tag.

♻️ Then, commit & deploy to rebuild on the new buildpack version.

This buildpack composes three buildpacks (specified in.buildpacks) to supportno-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 thedefaultstatic.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

Some kind feedback pointed out that this buildpack is not necessarily specific tocreate-react-app.

This buildpack can deploy any SPA [single-page app] as long as it meets the following requirements:

• npm run build performs the transpile/bundling
• the filebuild/index.html orthe root specified instatic.json exists at runtime.

Create & run tests using theBuildpack Testrunner. See the local setup guide.

Open issues with ideas about feature direction.