Deploying React with Zero Configuration

Listen to this article

So you want to build an app with React? "Getting started" is easy… and then what?

React is a library for building user interfaces, which comprise only one part of an app. Deciding on all the other parts — styles, routers, npm modules, ES6 code, bundling and more — and then figuring out how to use them is a drain on developers. This has become known as javascript fatigue. Despite this complexity, usage of React continues to grow.

The community answers this challenge by sharing boilerplates. These boilerplates reveal the profusion of architectural choices developers must make. That official "Getting Started" seems so far away from the reality of an operational app.

Inspired by the cohesive developer experience provided by Ember.js and Elm, the folks at Facebook wanted to provide an easy, opinionated way forward. They created a new way to develop React apps, create-react-app . In the three weeks since initial public release, it has received tremendous community awareness (over 8,000 GitHub stargazers) and support (dozens of pull requests).

create-react-app is different than many past attempts with boilerplates and starter kits. It targets zero configuration [convention-over-configuration], focusing the developer on what is interesting and different about their application.

A powerful side-effect of zero configuration is that the tools can now evolve in the background. Zero configuration lays the foundation for the tools ecosystem to create automation and delight developers far beyond React itself.

Thanks to the zero-config foundation of create-react-app , the idea of zero-config deployment seemed within reach. Since these new apps all share a common, implicit architecture, the build process can be automated and then served with intelligent defaults. So, we created this community buildpack to experiment with no-configuration deployment to Heroku.

You can get started building React apps for free on Heroku.

npm install -g create-react-app create-react-app my-app cd my-app git init heroku create -b https://github.com/mars/create-react-app-buildpack.git git add . git commit -m "react-create-app on Heroku" git push heroku master heroku open

Try it yourself using the buildpack docs.

create-react-app is very new (currently version 0.2) and since its target is a crystal-clear developer experience, more advanced use cases are not supported (or may never be supported). For example, it does not provide server-side rendering or customized bundles.

To support greater control, create-react-app includes the command npm run eject . Eject unpacks all the tooling (config files and package.json dependencies) into the app's directory, so you can customize to your heart's content. Once ejected, changes you make may necessitate switching to a custom deployment with Node.js and/or static buildpacks. Always perform such project changes through a branch / pull request, so they can be easily undone. Heroku's Review Apps are perfect for testing changes to the deployment.