Gatsby: Client Only Paths Example hosted on S3 behind cloudfront

[ulyr]

Description

Trying to host a static website with client only paths on s3 behind cloudfront

Steps to reproduce

Create a cloudfront distribution and have S3 with this example behind it
https://github.com/gatsbyjs/gatsby/tree/master/examples/client-only-paths.

Expected result

Routing to work properly with params e.g /:h/:s/:l

Actual result

S3 tries to return a non existent object under that path.

Environment

• Gatsby version 1.9.248
• gatsby-cli version 1.1.45
• Node.js version: 9.3.0
• Operating System: Ubuntu 16.4

File contents (if changed):

https://github.com/gatsbyjs/gatsby/tree/master/examples/client-only-paths.

[pieh]

You need to create rewrites in your server config - as mentioned in gatsby docs ( https://www.gatsbyjs.org/docs/building-apps-with-gatsby/#client-only-routes--user-authentication ):

These routes will exist on the client only and will not correspond to index.html files in an app’s built assets. If you wish people to visit client routes directly, you’ll need to setup your server to handle these correctly.

[ulyr]

@pieh The example I used already does that

[pieh]

Gatsby can't set this server path rewrites by itself - because this is server/service specific, so this example defenitely doesn't do that.

If you can load your index path in browser (without /:h/:s/:l part) and navigate to color links in browser once it's loaded, but you can't load directly path containing /:h/:s/:l part it means you need to configure rewrites on the server/service.

gatsby-plugin-netlify has feature to automatically generate client-only-paths rewrites for netlify, but AFAIK this is only plugin that does that.

[ulyr]

@pieh
I am using the links(gatsby-link) provided in the example to the various /:h/:s/:l routes, all of which result in me getting a NoSuchKey error code from S3.

[pieh]

Can you share url?

[sebastienfi]

That's because a path necessarily refers to an object key in S3 out-of-the-box configuration.
I see 2 ways to achieve client-only routes:

• Configure Page Redirects: https://docs.aws.amazon.com/AmazonS3/latest/dev/how-to-page-redirect.html
• Configure Advanced Conditional Redirects : https://docs.aws.amazon.com/AmazonS3/latest/dev/how-to-page-redirect.html

[sebastienfi]

That may be worth a Gatsby plugin that would generate the necessary configuration file to push to S3

[ulyr]

@pieh
[deleted]

[pieh]

So client-only-paths work - as name suggest - in client (browser) only, for server paths check links provided by @sebastienfi - you need to configure them yourself:

These routes will exist on the client only and will not correspond to index.html files in an app’s built assets. If you wish people to visit client routes directly, you’ll need to setup your server to handle these correctly.

[KyleAMathews]

a Gatsby plugin that would generate the necessary configuration file to push to S3

Yeah, ideally every serving option has its own Gatsby plugin to generate server configuration. Netlify is the only one that has a plugin so far I believe https://www.gatsbyjs.org/packages/gatsby-plugin-netlify/?=netli

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!