Hosting your Angular Static Site to AWS S3 through Azure DevOps.

Believe it or not, Azure DevOps is becoming popular across the DevOps Universe, The reason being its simplicity and a wide marketplace which makes any DevOps newbie to get started with DevOps in a tick of a clock.

Organization and Individual use Azure DevOps to create a Continuous Integration and Continuous Delivery for a wide range of applications from .Net, Java to Angular, Redis, etc.

In the coming weeks, I will be sharing with you various Tutorial of achieving DevOps in different types of application and their step by step tutorials.

In this tutorial, we will see how to host an Angular Website to AWS S3 using Azure DevOps.

Why S3 for Static website Hosting?

S3 is a simple storage Service for Amazon AWS. Most of our new age Website are made in HTML, Angular /VueJS which has most of the static content which is served to the public domain. In this scenario, S3 becomes a very low-cost alternative to hosting a site in comparison to Webservers, which requires a greater investment. Also in S3, you do not require to scale up or scale down your server as being static storage provider, it can handle unlimited traffic.

How to upload your Angular Application to S3 using Azure DevOps

Prerequisite:

1) Azure DevOps Account

2) AWS Account

3) S3 bucket with static Hosting enabled.

Steps:

  1. Create New Pipeline and select your Provider where the code is present

I will select Bitbucket as myrepoAngular Code Repository is present there

2) Now in the Step, Add Node.js tool installer agent and use the Node version your application uses. My Node is 10.x so, I will use the same.

3) Add npm task, and install npm.

4) Add another npm Task, and use it for build as shown in the image. The Command is set to custom, and command argument is “run myangularapp”. Here use your application command instead of myangularapp

5) Create a Copy Files Task, and copy all the content of dist folder in a target folder of your source directory, namely here, myangularapp/dist

6) Finally Publish the artifacts using publish artifact task, keep the source directory as dist.

7) Finally, save and Queue the build. A new build will be created and run. An Artifact will be produced on a successful build.

8) Now with the Artifacts, We need to create a release pipeline for the same.

9) In Release Pipeline, create an artifact and select the build artifact of myAngularApp and Enable Continuous Delivery Trigger

10) Create a new Stage Dev, and select Empty job. Click on 0 job link in dev stage.

11) Create a new task, select S3 upload, you may need to install AWS plugin from the marketplace.

Put the required parameter and save and create a Release.

12) Your App would be uploaded in S3 and the site would be available now, once the release is Done.

I hope this tutorial helps and makes you achieve your goal to host an Angular app in the S3 bucket. In My Next Tutorial, We will see how to configure AWS S3 for static hosting. Keep watching this space for more, and follow me for the updates

DevOps Practice Lead at BCS Technology |Episerver CMS | Full Stack Engineer | Cloud AZURE & AWS | Freelance Consultant