Search code examples
reactjsherokucreate-react-appbuildpack

Configuring a single page Create-React-App on Heroku

With Firebase Hosting, when you deploy an app you are asked whether to rewrite all urls to /index.html. This means react-router routes would be properly fired whether they are accessed directly or navigated to from the homepage.

We use Create-react-app and Create-react-app-buildpack to deploy to Heroku. How can we rewrite all the URLs to /index.html in the same manner?

Following this issue, explaining about the routes directive, I configured a static.json in the root to no avail:

{
  "routes": {
    "/images/*": "/images/",
    "/legal/*": "/images/",
    "/media/*": "/media/",
    "/fav/*": "/fav/",
    "/styles/*": "/styles/",
    "/**": "index.html"
  }
}
Solution

  • Create a static.json file in the project root with the following content:

    {
  "root": "build/",
  "routes": {
    "/**": "index.html"
  }
}

    More here.