Problems setting up 404 page on Gatsby site in AWS Amplify

Question

I have a simple Gatsby site that I've deployed through AWS Amplify based on this guide. However, I'm struggling to set up a proper 404 page through the AWS Amplify Console (or via a config file).

I want it to behave like a standard 404 page such as that on Google.com – i.e.

• Incorrect URLs show the content of my 404 page (ember.to/404)
• The incorrect URL is kept the same in the URL bar – i.e. the user does not see a redirect
• A 404 status code is returned in the header so the browser/GoogleBot knows it's a 404

What's happening currently:

• I've set up a rule in "Rewrites and redirects" of type "404" with source address "/<*>" and destination address "/404"
• This means that if someone goes to (e.g.) ember.to/blah which doesn't exist, they see the 404 page as desired. However, the URL in their browser bar changes to ember.to/404 (not desired) and the HTTP header does not give a 404 status
• I've also tried changing the redirect type to "200". This almost gives the right behaviour on incorrect URLs (URL stays same, 404 message is shown and 403 error returned to browser) but unfortunately that means all valid pages on my site show the 404 message
• I can't see any way of configuring it so that a 200 redirect is performed only when a 404 message is returned when accessing a URL

Can anyone help with this? I'm not really clear if there are more advanced configuration options I'm missing outside the console? Can I do something with the build settings using the amplify.yml file?

Thanks

Answer 1

This can now be achieved on AWS Amplify by setting up the following rewrite in Rewrites and redirects:

• Source address: /<*>
• Target address: /404.html
• Type: 404 (Rewrite)