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.
New, Zero-configuration Experience
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 following its initial public release, it received tremendous community awareness (over 8,000 GitHub stargazers) and support (dozens of pull requests). Those numbers are up over 101k GitHub stargazers and 450 pull requests in the 7+ years since that release.
create-react-app is different from 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.
Zero-configuration Deploy to Heroku
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.
Create and Deploy a React App in Two Minutes
You can get started building React apps on Heroku.
npx create-react-app my-app
cd my-app
heroku create -b https://github.com/mars/create-react-app-buildpack.git --stack heroku-20
git push heroku main
heroku open
Try it yourself using the buildpack docs.
Note: This community buildpack is deprecated, no longer being maintained, and is not supported on Heroku-22 or newer stacks. Please see the Nginx buildpack readme for static sites for information on how to transition a static site or single page web app over to Nginx via an Nginx buildpack.
Improved static site support is on our public roadmap, where you can get more details and share your feedback.
Growing Up from Zero Config
create-react-app was very new (version 0.2) at the time this was published and since its target is a crystal-clear developer experience, more advanced use cases are not 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.
Stay tuned for an upcoming blog post going over a Next.js and Remix deployment. Happy deploying!