How to solve the 404 HTTP Error for Angular Apps hosted on S3

As described in this blogpost, S3 is very suitable for serving a single Page Web Application.

If your users always come through the index page to your site everything will be fine. You have an corresponding HTML file on S3 and your request will be handled like a charm. But it is really common to provide some functionality that is triggered by an HTML request, for example some confirmation links and that URL has no corresponding file in S3 because all the magic stuff is handled by the Angular Router. The result for such an Request is an 404 HTTP error.

To solve that problem with our infrastructure, we must instrument CloudFront to handle the 404 HTTP error from S3. To do that we simply define some custom error Response. So go to the „Error Pages“ Tab for your CloudFront Distribution and create a new Custom Error Response.

custom_error

Now we configured the following.

If our Origin (S3) returns a 404 Error CloudFront returns the index.html and the status code 200. With that configuration the content from our index.html is returned but the url itself will be unchanged and that is all to get the Angular Router to do his work.

 

Kommentar verfassen

%d Bloggern gefällt das: