How to deploy your Angular App to AWS S3

Deploying your Angular app to AWS S3 can be a great choice if you're looking for an inexpensive hosting option that just scales with your audience and/or you're already using AWS for other things anyways. In this post I'll show you how to use the AWS CLI to deploy your Angular app to AWS S3 with just a few simple commands.

‍

Prerequisites:

• AWS CLI

1. Create an AWS S3 bucket

Creating a new AWS S3 bucket using the AWS CLI is as easy as it gets, just run the following command and make sure to replace <bucket_name> with your own bucket name and <region> with the region that you want to create the bucket in:

{% c-block language="bash" %}
aws s3 mb s3://<bucket_name> --region=<region>
{% c-block-end %}

2. Configure AWS S3 bucket for static web hosting

Next, the bucket needs to be configured for static web hosting. Luckily, the AWS CLI has a single command that does most of the work for you:

{% c-block language="bash" %}
aws s3 website s3://<bucket_name> --index-document index.html --error-document index.html
{% c-block-end %}

To make your Angular app available to the public, all objects in the S3 bucket need to be publicly accessible. To set that up, create a document policy.json with the following content and make sure to fill in your bucket name:

{% c-block language="json" %}
{
   "Version": "2012-10-17",
   "Statement": [
       {
           "Sid": "PublicReadGetObject",
           "Effect": "Allow",
           "Principal": "*",
           "Action": [
               "s3:GetObject"
           ],
           "Resource": [
               "arn:aws:s3:::<bucket_name>/*"
           ]
       }
   ]
}
{% c-block-end %}

Then run this command to attach the policy to your S3 bucket:

{% c-block language="bash" %}
aws s3api put-bucket-policy --bucket=<bucket_name> --policy file://policy.json
{% c-block-end %}

3. Deploy your Angular app to AWS S3

Now you're ready to deploy your Angular app to the S3 bucket. Navigate to the root directory of your Angular app and run the following commands to build and deploy your Angular app:

{% c-block language="bash" %}
ng build
aws s3 sync dist/<app_name> s3://<bucket_name>
{% c-block-end %}

That's it! Open http://<bucket_name>.s3-website.<region>.amazonaws.com in your browser and you'll see your Angular app deployed to AWS S3: 🎉