Static Web Hosting using AWS Amplify

Static web hosting is simple, cost-effective, and easy to manage. A static site can host any kind of web application like portfolio, blog, or simple landing page. 

In my earlier article, I have demonstrated how to deploy Static website in AWS using S3 bucket, CloudFront and Route53. In this blog, I am going to demonstrate how to deploy any Angular, Vue, or React application using AWS Amplify and what are the challenges we might face.

---

What is a Static Website?

Nowadays static websites are very popular with modern JavaScript frameworks or libraries. Mainly those are served from a storage server or a content delivery network (CDN). There is no need to have a running server creating the HTML files. These websites are pre-built as HTML files that are stored somewhere on the internet and then served as they were built. Static sites can have dynamic content, but it is handled on the client-side using JavaScript or some third-party integrations using REST APIs.

---

How to Build Static Website using Angular?

I am assuming you are either an Angular / Vue / React developer and already created a web application using any of the mentioned frameworks or libraries. Here I am focusing on the Angular framework and using that to create Single page application. Angular-Universal is the library that helps to create static content. There are two options Angular-Universal provides. 

1. SSR - Server-side Rendering - which requires running any server like express / Nginx etc to run in server-side to server Html pages. For more details, you can check SEO Enablement to an Angular Application.
2. Prerender - which creates multiple HTML pages in the local environment and all bunch of HTML can be deployed. For more details, you can check SEO friendly URL with Angular 9 Angular Universal and Prerender strategy

Here, I am choosing option 2 - Prerender Strategy to build the application and deploy it to AWS Amplify.

---

Setup AWS Amplify and deploy

Please open your AWS account and navigate to the AWS Amplify module. You can choose any of your available options down below. 

 

In this demonstration, I choose the last option "Deploy without Git provider" and continue. Next, provide the app name and Environment name and drag & drop the all content inside the "dist/<<app-name>>/browser" folder. It will take some time (30 seconds to 1 minute) to deploy the code and generate a public-facing URL like https://prod.<<aws-generated-ids>>.amplifyapp.com. You can hit the URL and can see the web content.

---

Next Custom Domain Setup

Once your application has been deployed, navigate "Domain Management" under "App Settings" from the left menu navigation. You could see the domain name listed in the dropdown, if have not set it up yet, you can do it from Route53 by creating a hosted Zone. You can purchase a domain from AWS or any other domain provider such as GoDaddy, google domain, etc.

I have purchased one from Google Domain and add all the NS records in the Google domain as Custom name servers. 

 

It will take some time to enable your domain, meanwhile, you can return back to AWS console search with AWS Certificate manager and create two certificates like lazypandatech.com and www.lazypandatech.com. Add the CNAME records in Route53 and wait some time to get them issued. 

Once the domain name shows in the dropdown select the domain name and click configure the domain. 

 

So at the first time, you will notice, the CNAME records are not yet configured, so you need to open up the Action dropdown and select View DNS. 

 

You should open your domain provider, in my case, it is Google Domain, So I opened it and add the records under Custom resource Records.

Google domain does not support ANAME, so do not add anything related ANAME under Custom Resource Records section.

If you are using www as a subdomain, please add the CNAME for the www subdomain as well. www subdomain CNAME we can pick either from Route53 or AWS Certificate Manager. Without this step, the domain activation will not be successful. 

After some time, (20 - 30 minutes) you can see the domain become available. You can access your portal using the custom domain now.

---

AWS Amplify Hosting Challenges and Solutions

The common issue for AWS Amplify hosting is 'Domain Activation failed'. 

 

 

For such the above scenario, please add all the necessary CNAME (main domain & sub-domain) to your domain provider. And if you are already used the domain in another AWS account or another CloudFront distribution, please remove those and wait at least 4 - 5 hours to delete that domain from a different region. 

 

Access denied in AWS Amplify

Another issue you can get, while refreshing or route to another page it shows Access Denied in AWS Amplify with the following image. 

 

For such above cases, you need to navigate to AWS Console and select “Rewrites and redirects”, add a new rewrite and redirects, click on “Open text editor”, and add the below rule:

 

The above will solve the Access Denied issue. But if your application needs SEO support, the above solutions will not help search engine bots to crawl your web pages. Search engine bot will still get the access denied error. To solve this issue, you have had to enable SSG (Static Site Generation or pre render) then only the search engine crawler can crawl your web pages.

 

Error: Waiting to deploy Your deployment is being queued

---

Another problem I have observed, if you have opened the AWS free tire account recently and wanted to host your application using S3 bucket with CloudFront Distribution, you might get some error like - 

 

You will not be able to proceed further until you connect with someone from AWS Support or they call you back. If you are using a free account then you will not have access to raise technical support from AWS or create any case. In such a situation, you can verify your work using AWS Amplify. 

I have come across this situation earlier and able to solve my purpose using AWS Amplify.

 

Hope you like the tricks and feel free to write your comments below.

Happy Coding!

- LP