Deploy Your Angular App with AWS S3 & CloudFront: A Fast, Cost-Effective Guide

Introduction

Deploying your Angular application to the cloud is a crucial step in sharing your work with the world. AWS offers a reliable and scalable way to host your app with minimal cost and effort — especially using S3 for static hosting combined with CloudFront for fast global delivery. In this guide, I’ll walk you through how to deploy your Angular app on AWS quickly, even if you’re new to AWS.

Prerequisites

Before we start, make sure you have:

An Angular app ready to deploy
An AWS account (free tier is sufficient for basic hosting)
Basic knowledge of Angular CLI and AWS Console

Before we start …

Before we dive into the step-by-step process to deploy an Angular app on AWS, it’s important to understand the core services we’ll be using: Amazon S3 and CloudFront, and how they work together to host a static website efficiently.

What is Amazon S3?

Amazon Simple Storage Service (Amazon S3) is a highly scalable, secure, and durable object storage service. It allows you to store and protect any amount of data, supporting a wide range of use cases such as data lakes, mobile apps, backups, archives, enterprise applications, IoT devices, big data analytics, and — importantly for us — static website hosting.

In simple terms, S3 acts as a reliable place to store your website files — HTML, CSS, JavaScript, images, and more.

Learn more about Amazon S3

What is CloudFront?

Amazon CloudFront is a fast, secure, and programmable Content Delivery Network (CDN) service. It delivers your web content — including static and dynamic files, videos, APIs — globally with low latency and high transfer speeds.

CloudFront caches your content at edge locations worldwide, so your users get faster access regardless of their geographical location. It acts as a distributed cache, retrieving content from your origin (like your S3 bucket) and serving it quickly from the nearest edge location.

Learn more about Amazon CloudFront

Our Plan for Static Website Hosting

S3 will store and deliver the static files of our Angular application (UI content).
We will deploy the Angular build output directly into an S3 bucket configured for static website hosting.
To improve performance and reduce latency, CloudFront will be used to distribute our content globally.

Accessing the website directly from the S3 bucket is possible but can lead to higher latency, especially for users far from the AWS region hosting your bucket.

CloudFront speeds up this delivery by caching content in multiple edge locations across the Americas, Europe, Asia, Africa, and more. When a user requests your website, CloudFront first checks its nearest cache (edge location). If the content is not found there, it fetches it from the S3 bucket and caches it for subsequent requests.

Lets begin..

Step 1: Build Your Angular Application

Open your terminal and navigate to your Angular project folder. Run the following command to build your app for production:

ng build --prod

This command compiles your app into static files optimized for performance. The output will be in the dist/your-app-name folder.

Step 2: Create an S3 Bucket

Log in to the AWS Management Console.
Navigate to S3 and click Create bucket.
Choose a unique bucket name (e.g., my-angular-app-bucket) and your preferred AWS region.
Leave the default settings, but uncheck “Block all public access” so your site can be publicly accessible.
Confirm the warning and create the bucket.

Click on your newly created bucket.
Click on “Properties” Tab and then edit the “Static website hosting”

Step 3: Enable Static Website Hosting

Click on your bucket name, then go to the Properties tab.
Scroll down to Static website hosting and click Edit.
Select Enable, choose Use this bucket to host a website.
Enter index.html as the Index document and 404.html as the Error document (create a 404 page or leave empty).
Save changes.

Step 4: Upload Your Angular Build Files

Open the dist/your-app-name folder on your computer.
In the AWS Console, go to your S3 bucket and click Upload.
Upload all the files and folders from the dist directory.
Alternatively, use below commands:

aws s3 cp ./dist s3://YOUR-BUCKET-NAME –recursive

Go to “Permissions” and navigate to the Public Access settings for your bucket. Unselect “Block public and cross-account access if bucket has public policies” . We have to change it to false, otherwise it will block public access and our app will be inaccessible from internet. By default all AWS S3 buckets are private.

Step 5: Set Bucket Policy for Public Access

In the “Permissions” Tab , add the bucket policy to “GetObject” that will allow public to access our data. Apply the policy that will allow public access to data in AWS.
Save the policy.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
    }
  ]
}

Step 6: Use CloudFront for CDN and HTTPS

Navigate to AWS CloudFront Console

Visit https://console.aws.amazon.com/cloudfront/ and click Create Distribution.
Choose Delivery Method

Select Web as the delivery method and click Get Started.
Configure Origin Settings
- For Origin Domain Name, select or enter your S3 bucket URL.
- Make sure to choose the correct bucket that hosts your static website content.
Set Viewer Protocol Policy

Under Default Cache Behavior Settings, change the Viewer Protocol Policy to Redirect HTTP to HTTPS to enforce secure connections.
Configure Distribution Settings
- In the Distribution Settings section, add your Alternative Domain Name (CNAME) if you want to use a custom domain (e.g., www.yourdomain.com).
- Select an appropriate SSL Certificate (either an AWS Certificate Manager certificate for your domain or use the default CloudFront certificate) to enable HTTPS.
- If you don't need a custom domain, leave the SSL settings as default.
Review and Create

Keep other settings at their default values unless you have specific requirements.

Scroll down and click Create Distribution to finalize.
Wait for Distribution Deployment

CloudFront will take approximately 10–15 minutes to deploy your distribution. You’ll be notified when it’s ready.

Navigate to Distributions to see the newly created distribution. The domain name column contains your CloudFront URL, which will be something like this:

YOUR-BUCKET-NAME.s3-website-YOUR-BUCKET-ZONE.amazonaws.com

Copy the CloudFront URL and paste it into the browser tab. You should successfully see your application.

Things to Keep in Mind When Configuring an S3 Bucket as a Static Website

Eable Static Website Hosting:

To serve your content as a static website, you need to enable static website hosting on your S3 bucket. This setting allows Amazon S3 to function like a web server.

Configure and Upload an Index Document:

An index document is the default webpage that Amazon S3 returns when visitors access the root of your website or any subfolder. Make sure to create and upload this file (usually index.html) to your bucket.

Set Permissions for Public Access (if required):

If you want your website to be publicly accessible, you need to:

1. Disable the “Block Public Access” settings on your bucket.

2. Add a bucket policy that grants public read permissions, allowing anyone to view your website content.


    Without these permissions, users won’t be able to access your website.

Understand Your Website Endpoint URL

When static website hosting is enabled, your website is accessible via an AWS Region-specific endpoint.

The URL format depends on your region and typically looks like one of the following: