Static hosting of Angular build using AWS Amplify ?

Static hosting of Angular build using AWS Amplify ?

Hello Developers,

In previous blog Host Angular 2 or 4 or 5 version on AWS S3 using CloudFront you have learn about hosting using AWS S3 and CloudFront. In this blog I am going to explain about static hosting of Angular using AWS Amplify. There is AWS official blog available to host Angular app directly on Amplify - docs.amplify.aws/start/q/integration/angular

AWS Amplify has various tools available for Front end app development and deployment. With Amplify, you can configure app backends and connect your app in minutes, deploy static web apps in a few clicks.

list of Amplify tools

Out of this above list we will explore Manage hosting tool which enables static website hosting by linking different ways like Github, Bitbucket, Gitlab, CodeCommit etc. This way you have to give permission using Oauth to access the list of repositories and their content. list of ways to upload code

Lets see how its works : how its works

  1. Authenticate git tools
  2. It will show a list of repositories from the git account. Choose which repository content would like to host list of repositories
  3. Configure build setting ( Optional)
  4. Review setting and deploy. Once click on Start Deploy it will show a message like "Creating app: angular-hosting-amplify-example in progress..." Deployment review page
  5. You can track status or progress app status page like shown below 👇🏻 and once it's completed all stages will be green colour. status page
  6. This will give a link for the app to show. Link will be like this https://main.d26gqyfusfkmyj.amplifyapp.com Webpage We have done till uploading code and deploying to URL. Completed half battle to host Angular app generated build.

move-it.gif

Note: Amplify app frontend hosting doesn't require any routing understanding like we saw AWS S3 hosting.

Last steps to move this app URL to a custom domain like amplifydemo.avinashdalvi.com. Let's see what we need to do to map custom domain to Amplify app.

  1. In Amplify App console go to -> Domain management
  2. Click on Add Domain Screenshot 2020-12-27 at 11.32.01 PM.png
  3. Enter the root domain name like if you would like to use example.com then your root domain will be example.com. In demo i will chose avinashdalvi.com as root domain because app domain name will be amplifydemo.avinashdalvi.com.
  4. Click on Configure Domain.
  5. Exclude the root domain if you are not required. The subdomain name is amplifydemo. Once this finish it will status page like below 👇🏻 status page of domain

Note: Domain name validation for certificate and DNS validation sometimes takes more than 8 hours. If its take more than 8 hours then create github issue here

Then we are done with the final step.

finally-completed.gif

Hope you like my blog. Thanks for reading my blog. If you have any questions you can reach out to me at my twitter handle - @aviboy2006

Note : Mentioned sample demo app will work or not also. This is just for reference. This demo assume your Angular build is already there after running command ng build

References :

Did you find this article valuable?

Support Avinash Dalvi by becoming a sponsor. Any amount is appreciated!