Redirect all AWS S3 http requests to index.html for AngularJS HTML5Mode

Question

How do I redirect all requests to my static AWS S3 website to index.html so I can use AngularJS' HTML5 Mode?

I recently learned (to my unending delight) that it is possible to use AngularJS without the # in the URL by using HTML5 Mode. However, I know from this answer that this requires some setup on the server, since all requests have to be redirected to the right html file (in this case, index.html) for this to work.

I use AWS S3's static website hosting for my site. I tried adding this to my redirection rules:

<RoutingRules>
     <RoutingRule>
         <Redirect>
             <ReplaceKeyWith>/</ReplaceKeyWith>
         </Redirect>
     </RoutingRule>
</RoutingRules>

and

<RoutingRules>
     <RoutingRule>
         <Redirect>
             <ReplaceKeyWith>index.html</ReplaceKeyWith>
         </Redirect>
     </RoutingRule>
</RoutingRules>

but I get issues with too many redirects.

Is there a way to do the kind of redirection necessary in AWS S3 with the static website hosting?

Answer 1

You can use AWS CloudFront for your use case. Setup the S3 bucket behind CloudFront and add index.html as the default route.

Still if the page is refreshed in a angular route (e.g /home), AWS CloudFront will search for a /home.html file in S3 and return 404: Not Found Response. However there is a workaround for this, where you can setup an custom error response for 404: Not Found HTTP error code to points towards the /index.html response page path.

For more details refer the blog post Using AWS CloudFront to serve an SPA hosted on S3.