Properly Deploy Your React App to Heroku

Are you using thedevelopmentbuild inproduction? Let’s fix that!

Why it’s important to use the production build ( React Docs ):

By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app.

If you aren’t sure whether your build process is set up correctly, you can check it by installing React Developer Tools for Chrome . If you visit a site with React in production mode, the icon will have a dark background:

If you visit a site with React in development mode, the icon will have a red background:

It is expected that you use the development mode when working on your app, and the production mode when deploying your app to the users.

I haven’t even started my react app! :scream_cat:

$ npx create-react-app my-app
$ cd my-app
$ git init

I haven’t deployed to Heroku! :persevere:

https://github.com/mars/create-react-app-buildpack.git
$ git add .
$ git commit -m "create-react-app"
$ git push heroku master
$ heroku open

I already deployed to Heroku… :sunglasses:

First, make sure you have your heroku app set up as a git remote:

$ cd my-app
$ heroku git:remote --app my-app
$ git remote -v

Now set the buildpack, commit, and push! :facepunch:

$ heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git
$ git commit --allow-empty -m 'Switch to create-react-app-buildpack'
$ git push heroku master

Did you deploy your React App? :muscle:

Did you get stuck? Where?

Be sure to check out the Buildpack Repo and Heroku Blog for more info! :100:

Properly Deploy Your React App to Heroku