Dynamic path works locally but not in production

Question

Summary of the problem : a. I want to dynamically generate a page in Gatsby using a path. I have implemented the technique suggested in this question. This technique works locally i.e. on localhost but when I deploy it in production, I get the following error message :

Page Not Found Looks like you've followed a broken link or entered a URL that doesn't exist on this site.

Expected result : After the dynamic creation of the page, @reach/router should be able to able to capture the ID in the path and make it available as props in the component.

Actual result : This works locally but in production, the browser throws the above mentioned error at me. Error in console :

Failed to load resource: the server responded with a status of 404 ()

What have I tried so far ?

In gatsby-node.js:

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions;


  if (page.path.match(/^\/resetpassword/)) {
    page.matchPath = "/resetpassword/*"

    createPage(page)
  }
}

In the Gatsby page resetpassword.js:

export default function ResetPassword() {
  return (
    <div>
      <Router basepath="/">
        <ResetWorker path="/resetpassword/:id" />
      </Router>
    </div>
  )
}

function ResetWorker({ id }) {

// Here I need to access the id to make a fetch call to my node.js backend

  return()
}

Where are you hosting? This could be relevant https://stackoverflow.com/questions/52051090/gatsbyjs-client-only-paths-goes-to-404-page-when-the-url-is-directly-accessed-in — ksav, Mar 10 '20 at 23:37
Thanks for taking the time to answer my question ksav. The front end is hosted on Netlify and the backend is hosted on Heroku. — Sujay, Mar 11 '20 at 07:28

score 0 · Accepted Answer · answered Mar 11 '20 at 15:56

This could useful to someone. Here is how I solved the problem based on the answer to this question. 1. I installed the Gatsby Netlify plugin : gatsby-plugin-netlify 2. Added gatsby-plugin-netlify to the plugins array of gatsby-config.js. 3. Created a _redirects file at the root of my Gatsby project with the following rule : /resetpassword/* /resetpassword/index.html 200

The desired page is generated dynamically. Thank you ksav for your suggestion.

Dynamic path works locally but not in production

1 Answers1