gatsby: Dynamic Routes via gatsby-plugin-create-client-paths receive NGINX 404

Description

When deployed and served our gatsby app produces NGINX 404 errors when trying to access a dynamic route created by gatsby-plugin-create-client-paths. All this works locally when in development but breaks when deployed to Heroku and served via CloudFlare.

Steps to reproduce

in gatsby-config.js:

    {
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [`'/quote/*'] }
    },

in our src/pages folder we have a quote.js file that reads the * after /quote and displays content accordingly.

Expected result

The quote.js page should be displayed, no 404 error.

Actual result

NGINX 404 ERROR

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 6
Comments: 27 (7 by maintainers)

Most upvoted comments

As @pieh pointed, something like this works for me:

location /quotes/ {
  try_files $uri $uri/ /quotes/index.html;
}

elrumordelaluz on Jan 8, 2019

What about in S3 and CloudFront? How to fix this issue?

endigo on Aug 28, 2019

Hi @valse. Thanks a ton man! It worked! you saved my life 😄

derakhshanfar on Aug 27, 2019

I found a more elegant solution importing the helper function withPrefix from gatsby

import { withPrefix } from 'gatsby'
<Router>
   <Loader
     path={withPrefix('/preview/:guid')}
   />
</Router>

valse on Aug 27, 2019

Hi @derakhshanfar, I had the same problem: I solved adding the pathPrefix in the router client path:

<Router>
   <Loader
     path={`${pathPrefix}/preview/:guid`}
   />
</Router>

I think that it should be fixed in the gatsby-plugin-create-client-paths plugin directly

valse on Aug 27, 2019

For any users with Azure Verizon CDN, my solution was to add a URL rewrite rule.

My rule Screenshot 2019-07-28 at 14 08 38

documentation around this syntax is at https://docs.microsoft.com/en-us/azure/cdn/cdn-verizon-premium-rules-engine-reference-features#url-rewrite

eknowles on Jul 28, 2019

follow

I’m trying to do this with the static site build and am finding it unlikely to work, even with a workaround to route all requests through the “application” page.

I like the idea of gatsby, but particularly for static deployment, it’s lacking in a number of areas in providing known solutions and best practices 😦

jufemaiz on Jan 17, 2019