Create-react-app react-router and Heroku: The 404 gotcha

 In Development

I’ve been putting together a React app and I needed cheap, fast hosting so I went to put it on Heroku.

The community have put together a build pack for create-react-app. You can basically deploy in 2 minutes. It’s magic! See the instructions here: https://blog.heroku.com/deploying-react-with-zero-configuration.

Assuming you have heroku configured the tl;dr is…

However! If you use react router you will get a 404 from nginx when you try to directly open a route.

The heroku build pack deploys your site on heroku as a static application so you have to tell it that for ALL routes, it should just go to your root document so react can handle the routing. The default root document in create-react-app aps is index.html

So to fix add a file called “static.json” to your root folder (next to packages.json in create-react-app) with the following configuration.

Recent Posts
Email Me!

Hey, get in touch and I'll get back to you asap

Not readable? Change text. captcha txt