DEV Community

loading...
Cover image for How to deploy your Angular App to AWS S3

How to deploy your Angular App to AWS S3

Sven Frese
Building tools to make it easier to build apps on the side.
Originally published at stackprint.io ・2 min read

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:

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 with your own bucket name and with the region that you want to create the bucket in:

aws s3 mb s3://<bucket_name> --region=<region>
Enter fullscreen mode Exit fullscreen mode

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:

aws s3 website s3://<bucket_name> --index-document index.html --error-document index.html
Enter fullscreen mode Exit fullscreen mode

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:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::<bucket_name>/*"
            ]
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

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

aws s3api put-bucket-policy --bucket=<bucket_name> --policy file://policy.json
Enter fullscreen mode Exit fullscreen mode

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:

ng build
aws s3 sync dist/<app_name> s3://<bucket_name>
Enter fullscreen mode Exit fullscreen mode

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 🎉

Discussion (0)