Create-react-app react-router and Heroku: The 404 gotcha
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.