Angular : How to automate angular deployment for AWS S3 Angular Website??

If you have hosted your angular app to AWS S3 then you can automate your ng build -prod and drag and drop to S3 bucket by simply following below steps -

Step 1 - Add @jefiozie/ngx-aws-deploy to your project and for this run below command (your angular CLI should be up-to-date)

ng add @jefiozie/ngx-aws-deploy

Step 2 - Provide necessary details to the terminal while step 1 is in progress.

You will be prompted for a couple of questions:

Your AWS Region

The bucket you would like the files to be uploaded.

The Secret Access Key

The Access key Id

The folder where the files should be uploaded (optional)

Step 3 - Verify the details you have provided is correct, open angular.json and search for deploy and should be able to see below code -

angular.json is update with a new builder:

"deploy": {
    "builder": "@jefiozie/ngx-aws-deploy:deploy",
    "options": {
    "region": "YOUR REGION",
    "bucket": "YOUR BUCKET",
    "secretAccessKey": "YOUR SECRET ACCESSKEY",
    "accessKeyId": "YOUR ACCESS KEY ID"
    }

You can get your access key id and secret access key in your AWS console. Region you can see in your S3 url and bucket name you already know but if you can see it in your url.

Step 4 - Run ng deploy command and it will build and deploy your app to S3.

All Done

Extra Bits-

If after following all above steps you run into trouble and get below error -

403 Forbidden
Code: AccessDenied
Message: Access Denied

Then the solution is to specify bucket policy, for this go to S3 and then your bucket and then permission, there you will find bucket policy, just paste below code and click save.

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

In above code replace the word your-bucket-name-here with your bucket name and click on save.

All done, refresh the page and your app will up and running.

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.