Routing to Angular components when app is static content hosted in S3

Question

I am currently developing an application with an Angular4 frontend. My goal for production is to have the frontend be served as static content from an AWS S3 bucket.

Everything is working with one exception which is actually a major problem for the application. When users register, they are sent an email with a link to verify their email addresses. The format of the link is as follows:

https://myhostname.com/user/userguid?token=tokenvalue

As the frontend is served as static content, only the page index.html actually exists, so clicking this link generates a 404.

Now, after some research, I have taken the following steps. In S3, I have the following routing rule.

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>myhostname.com</HostName>
      <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

I also have a CloudFront rule that redirects all 404 errors to index.html.

Now, when someone navigates to myhostname.com/user/userguid?token=tokenvalue, the URL is re-written to myhostname.com/#!/user/userguid?token=tokenvalue, but then the user is redirected to myhostname.com/home (aka index.html).

What change(s) can I make to my Angular app to take the value of the hash/fragment and actually route to that component (rather that just redirecting, which will send the user back to index.html)?

Note that in development when the frontend is being served via 'npm start', this works just fine. Thanks all.

Answer 1

Zack, the approach that you've chosen (both the Index document and Error document should be 'index.html') is really bad approach unfortunately.

What will happen is that your users will get a 404 and then redirect - this will hurt your SEO, Chrome will penalise you as it thinks your site is phishing, and Safari support is hit and miss.

Much better option is to:

1. Remove the error page redirection to index.html,
2. Put Cloudfront in front of the S3 bucket
3. Set a custom error response code in cloud front which redirects to /index.html and (MOST IMPORTANTLY!) gives a 200 Http Response Code

Hope that helps

Answer 2

Here is the final solution. Major props to Edmundo.

When setting up the S3 bucket, under Static Website Hosting-->Properties, both the Index document and Error document should be 'index.html'. MAKE SURE THAT THE REDIRECTION RULES ARE BLANK!

In CloudFlare, after the distribution has been enabled and is online, go to Error Pages and create a custom error response. For any 404 error, redirect to /index.html and return a 200 OK status code.

This works like a charm!

Answer 3

You need to create CloudFront Custom Error Response settings for BOTH 404 and 403 errors.

I have a full blog post on this plus other AWS angular setup tips (like free HTTPS).

Answer 4

All i had to do was set the error document to index.html in my static website hosting block in the console

Answer 5

You don't have to replace the prefix with #! , unless you're using the LocationHashStrategy, which I'm seeing that is not your case. So remove:

<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>

And it should work.