Hosting Your Angular App on AWS S3: A Practical Guide

Choosing the right hosting environment for your Angular application can make a big difference in its performance and reach. If you’re looking for a solution that’s both easy and affordable, Amazon S3 is a fantastic option. This guide will equip you with the knowledge to effortlessly deploy and manage your Angular app on AWS S3, taking your creation to the next level on the web.

You can find this article here as well.

Ready to embark on this journey? Let’s break down the steps:

Prepare for Launch: Building Your Angular App

Before deploying, ensure you have the Angular CLI installed globally. Use the following command:

npm install -g @angular/cli

Next, build your application using:

npm build

This generates a build version of your app, ready for the world to see!

Setting the Stage: Creating an AWS S3 Bucket

Head over to the AWS Management Console and navigate to the S3 service. Click “Create bucket” and follow the prompts, choosing a unique and memorable name that adheres to AWS guidelines. You can find the AWS guideline here.

For object ownership, keep ACLs disabled.

Lifting Off: Uploading Your App

Once your bucket is ready, click on it to access details. Locate the “Upload” section and select all files within the “dist” folder. These will be uploaded to the bucket’s root, forming the foundation of your hosted app.

Mission Control: Configuring Bucket Properties

Now, it’s time to fine-tune the settings. Navigate to the “Static website hosting” section within bucket properties. Click “Edit” and enable static website hosting. Keep the hosting type as “Host a static website.” Set both “Index document” and “Error document” to “index.html.” Remember, if you use different files for these purposes, update the settings accordingly.

Access Granted: Setting Permissions (Optional)

This step is optional, but it provides an extra layer of control. In the bucket’s “Permissions” tab, edit the bucket policy. You can either directly enter a policy JSON or use the built-in policy generator. In the policy generator, select “S3 bucket policy” as the policy type and enter “*” in the “Principal” field. Choose “GetObject” under “Actions.” Finally, specify the Amazon Resource Name (ARN) in the format:

arn:aws:s3:::${BucketName}/${KeyName}

Generate the policy and paste the JSON into the AWS Management Console policy section.

Following is an example policy.

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

The Grand Finale: Launching Your App!

With all the steps completed, your Angular app should now be accessible through the provided S3 bucket URL. Find this URL in the “Status” section under “Static website hosting” within your bucket properties.

Congratulations! Your Angular app is now shining brightly on the web, hosted on the reliable and cost-effective platform of AWS S3. Remember, this guide provides a foundational understanding. As you explore further, you can delve into more advanced configurations and customizations to tailor the hosting experience to your specific needs.

Join with my next article, where I’ll explore how to set up a alternate domain names with https for your Angular app on AWS S3, adding a touch of polish and branding!