Gatsby client only paths is showing 404 on first load in browser in production

Question

I am creating my dynamic pages in gatsby-node.js to create my client side paths. All pages are working fine in localhost, and pages are also showing desired data in production. But, still browser is showing the page as 404 on first load. I tried in gatsby-node.js in this way:

const path = require ("path")
exports.omCreatePage = async ({ page, actions }) => {
    const { createPage } = actions

    createPage({
       path: "/blog/id/slug",
       matchPath: "/blog/:id/:slug",
       component: path.resolve("src/components/Blogpage.jsx")
    })


    // Another try
    if (page.path.match(/^\app/)) {
       page.matchPath = "/blog/:id/:slug"

       createPage(page)
    }

}

Besides, I am using firebase hosting. I also tried configuring my firebase.json file for redirecting like this:

{
  "hosting": {
     ...,
     "redirects": [
         {
            "source": "/blog/:id*",
            "destination": "/blog/:id/:slug",
            "type": 301
         }
     ]
  }
}

Answer 1

I've got solution! All I need to do is, I must use rewrites in firebase.json file for defining my blog page in this way:

{
  "hosting": {
     ...,
     "rewrites": [
         {
            "source": "blog/**",
            "destination": "/index.html"
         }
     ]
  }
}

It works like charm.