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.
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.
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.
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.
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.
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:
Hope that helps
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With