Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 596
Zack Allen Avatar asked Aug 03 '17 13:08

Zack Allen


People also ask

Can we host Angular app in S3 bucket?

In this post, we will learn how to create a basic angular application and host them in the AWS S3 service. Let's start with creating our angular project. First, we need to install the latest version of Angular CLI by running the following command.

Can static websites created with Amazon S3 can be interactive?

You can use Amazon S3 to host a static website. On a static website, individual webpages include static content. They might also contain client-side scripts. By contrast, a dynamic website relies on server-side processing, including server-side scripts, such as PHP, JSP, or ASP.NET.

Which S3 feature can be used to host static website?

To enable static website hosting Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3/ . In the Buckets list, choose the name of the bucket that you want to enable static website hosting for. Choose Properties. Under Static website hosting, choose Edit.

Can you host dynamic websites on S3 what about Static websites?

For hosting a dynamic website on AWS, you need to use EC2 product. S3 is only used for storage and static website hosting. Other than EC2, you can also use Lightsail, which is basically a VPS. For hosting on EC2, you will need to launch an empty and install LAMP or any PHP based stack you have on the server.


1 Answers

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

enter image description here

Hope that helps

like image 179
Robbie Mills Avatar answered Sep 29 '22 00:09

Robbie Mills