static website on s3 gives 404 on refresh for non home page: no such keys error

Question

On clicking/refresh following site https://rrc6k2ykxxxxx.cloudfront.net/example-1

this error comes for all non home page url I have reactjs App on s3 bucket which is served through cloudfront.

Error: NoSuchKey The specified key does not exist. Key: example-1

what would be best way to redirect refresh on non home pages back to home page? thanks

Answer 1

Assuming this is a single page app (SPA) since this is react - in other words, there is no file in your s3 bucket example-1/index.html?

For single-page apps, whatever is delivering the static contents needs to return the root index.html file for all unmatched paths. In CloudFront, you can click on the distribution, then click on "Error pages", click "Create a custom error response", select 404 for the HTTP error code, select "create a custom error response" and put /index.html in the response page path with a 200 for the response code. You will want to repeat this for a 403 error code.