Host Angular Web App In AWS CLOUDFRONT 1

Amazon CloudFront is a web service that speeds up the distribution of static and dynamic web content, such as html, css, javascript, and image files.

This article will cover the steps to host an Angular web app in AWS CloudFront.  Angular is a development platform that aims to make web development feel effortless, focused on developer productivity, speed and testability.

You need appropriate permissions on S3, CDN and AWS Certificate Manager.

Steps to configure CDN

A content delivery network(CDN) refers to a geographically distributed group of servers that work together to provide fast delivery of internet content.

  • Create an S3 bucket named webhosting
    • Create index.html with the following content
      <div “style=”text-align:center””> You have successfully completed your website hosting!
    • Upload index.html to the S3 bucket
  • Configure the bucket for Web Hosting
    • Select the bucket
    • Select “Properties”
    • Select “Static web hosting”
      i. For Index document enter index.html (Angular prod build generates index.html as the starting point for the website)
      ii. For error document enter error.html (create a file called error.html to show a custom error message when users access a wrong URL)
step1
step2

Set Bucket Policy

There are two possible options

  • Make the bucket public
  • If a custom policy is set, then make the content of the bucket publicly accessible.

Refer to this document to set bucket policy

step3

Create Cloudfront Distribution

  • Select services from the top menu
  • Select CloudFront
  • Select Create Distribution
  • Select Get started under “Web”
step4

Set “Origin Domain name” as the Endpoint of Static website hosting (Step No 2)

step6
step
step8

Compress Objects Automatically – Select “Yes” for a better performance

step9
step10
step11

CNAME – website name. (Optional, use this for user-friendly website name)
If alternate domain is used, an ACM (AWS Certificate Manager) certificate has to be created

Refer to this document to create ACM.

step12

In the above image, set the “Default Root Object” to index.html

We have built many angular applications. Contact us for your angular development needs.

step13

Read More Articles

 Contact Us Now

Talk to us to find out about our flexible engagement models.

Get In Touch With Us