0

I'm wondering if this is feasible. I'm thinking about serving a React app using s3 and Cloudfront.

Some of the routes are prerendered, and can be served as static index.html files. Other routes, on the other hand, need to be handled by client side routing.

What I want s3 to do is if somebody asks for a route that isn't prerendered, I would want to serve a default index.html file instead of 404. I don't want to return a redirect response, because the url needs to stay the same to be handled by client side routing.

Is it possible to do this with s3? Or maybe from Cloudfront, it there a way to detect a 404 response from s3 and return a default file?

By "routes" I mean urls. So there are some urls for which I want to serve an html file, and for all others, I want to serve a default html file. (If the request has text/html mimetype)

Joseph Fakelastname
  • 101
  • 3
  • You should probably edit your question to explain "routes" and "client side routing", as right now your question can only be answered by people who understand both react and S3. If you make your question more generic more people will be able to help you. S3 serves static files only, and you can define error pages. – Tim Apr 11 '17 at 20:44
  • Read the [documentation](http://docs.aws.amazon.com/AmazonS3/latest/dev/CustomErrorDocSupport.html), then try it. It should take you 20 minutes. S3 can return error pages, you just need to check if they're directly served or redirected - I suspect served. – Tim Apr 11 '17 at 21:02
  • I want to return a 200 response, though – Joseph Fakelastname Apr 11 '17 at 21:06
  • I don't think you can do that with S3, it's not standard. You'll probably need an EC2 server. – Tim Apr 11 '17 at 21:22

1 Answers1

0

If I understand your question correctly, you're wanting to forward all 404 errors to a specific HTML page, and return a 200 response rather than a 404 to the user.

This can easily be configured via CloudFront. Check out this blogpost on how to do it. Specifically, read the final section on CloudFront.

Basically, there's an area on the CloudFront configuration that allows you to do exactly what you're trying to do, and will allow you to map specific errors to files, and return whatever response code you want to.

In case you're using CloudFormation to outline your CloudFront distributions, and would like to update your CloudFormation templates to accomplish this, you would add the following under the DistributionConfig property of the Resource:

CustomErrorResponses:
  -
    ErrorCode: 404
    ResponseCode: 200
    ResponsePagePath: /index.html
John T
  • 101