GatsbyJs client only paths goes to 404 page when the url is directly accessed in browser in “production”

Question

I have created a Gatsby app and configured gatsby-node.js to a create client only paths, which are all working fine in development while directly accessing the

Answer 1

For Firebase hosting, I added the following to my firebase.json:

"rewrites": [
  {
      "source": "**",
      "destination": "/loading/index.html"
  }

]

Then I created a new loading.js file under /page. With this configuration, Firebase first responds with loading.html then Gatsby handles the client routing.