Step-by-Step Guide: Hosting Your Angular Application on AWS S3

Hello there, I want to discuss a fascinating subject with you all. That about sums up how to install our Angular application in AWS S3. To efficiently and affordably offer static web content to visitors all around the world, host your Angular application on AWS S3. You will learn how to host your Angular application on an AWS S3 bucket in this article.

Step 1:

Build Your Angular Application

Ensure you have Angular CLI installed: If not, install it globally using following command.

npm install -g @angular/cli

Navigate to your Angular app’s root directory in the terminal.

Run the command that showing below to build the production-ready version of your app.

ng build --prod

Step 2:

Create an AWS S3 Bucket to deploy our angular application.

1. Log in to your AWS Management Console.
2. Navigate to the S3 service.
3. And after navigating into service click “Create bucket” and follow the prompts to create the bucket.
4. Choose a unique name, region, and configure the settings as your wish.

Step 3:

Upload Your Angular App to the S3 Bucket.

1. After creating your bucket in AWS S3, click on it to open its details.
2. Click the “Upload” section and select the files dist folder of your Angular application.
3. And then upload the files to the root of your S3 bucket.

Step 4:

Configure Bucket Properties

1. In the bucket properties, go to the “Static website hosting” section.
2. Select “Use this bucket to host a website.”
3. Enter index.html as both the Index and Error Document.

Step 5:

Set Permissions

1. In the bucket properties, navigate to the “Permissions” tab.
2. Under “Bucket Policy,” click “Edit.”
3. Add a bucket policy to make your content publicly readable. Example policy:

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

1. Replace YOUR_BUCKET_NAME with your actual bucket name.

Step 6:

Configure DNS (Optional)

1. If you have a custom domain, navigate to your domain registrar’s settings.
2. Create a CNAME record pointing to your S3 bucket’s website endpoint.
3. This step allows you to use your own domain for your hosted Angular app.

Step 7:

Access Your Angular App

After following the above steps, your Angular app should be accessible via the provided S3 bucket URL or your custom domain.

Conclusion:

Serving static material to visitors through your Angular application is made scalable and reliable by hosting it on AWS S3. You can easily and cheaply put up your Angular app for worldwide access by following these detailed instructions. Hope you guys got a good understanding of it and follow me for more.