Hosting Angular Application on Azure with CI/CD

Hello Readers,

In this article we will not only learn about hosting Angular applications on Azure but we will also see how you can implement CI/CD using Azure DevOps.

To do all these we would require an Angular application. So for that, I have just created a new Angular application using angular-CLI for the demo purpose.

Before starting let us briefly look at what do CI and CD mean?

Continuous Integration (CI): This is a software development practice in which all developers merge their code changes in a central repository multiple times in one day.

With CI, each change in code triggers an automated build-and-test sequence for the given project, providing feedback to the developer(s) who made the change.

Continuous Delivery (CD): Here every change that passes all stages of production pipeline is released to the customers. There’s no human intervention here. Developers can focus on building software, and their work go live minutes after they’ve finished working on it.

On top of Continuous Integration, Continuous Delivery will add the practice of automating the entire software release process.

Continuous Delivery includes deployment, which may be manual and consist of multiple stages. What’s important is that all these processes are fully automated.

A CI/CD pipeline helps you automate steps in your software delivery process, such as initiating code builds, running automated tests, and deploying to a staging or production environment. Automated pipelines remove manual errors, provide standardized development feedback loops and enable fast product iterations.

(source: https://semaphoreci.com/blog/cicd-pipeline)

Okay so let’s start working on it.

Hosting on Azure:

At first we will host our Angular application on Azure platform. To do so we need to sign in on Azure account on https://portal.azure.com.

After signing in we are going to create the Resource. For this navigate to App Services tab to your left pane.

Now inside this we will create our first App Service. For this Press on Add button and it will redirect us to create a Web App.

1. Here there is an option for Subscription. I have selected my subscription to Visual Studio by default.

2. There is also an option for Resource Group. This Resource Group is used if you are managing N number of clients then you would require grouping the resources according to your clients. To do so, create a new resource group with some name. In our case I am having a group name as ‘jinalshah’.

3. Next is Instance Details section. Inside this, Name is where you can enter your application name. This is your web App Name. This name would act as a Sub-Domain. Here I am giving name as ‘angulardeploydemo’. Now your whole URL will be ‘angulardeploydemo.azurewebsites.net’.

4. Now select a Runtime Stack. Here I am selecting ASP.NET v4.7.

5. Next, select your Operating System to Windows OS.

6. Next, select the Region which is nearest to your location. Here I am selecting Central India as a Region.

7. Moving forward to App Service Plan Section. Here select your Linux/Windows Plan and then select the Sku and Size. By clicking on this Sku and size, you are able to see different plans with their facilities available on Azure Platform. You can select the plan based on your requirement. I am selecting the Free plan (F1) having Shared Infrastructure from the Dev / Test tab.

8. Finally you can press the Review and create button and it will create your first App Resource.

So the entire screen can be look like this:

And now you can see the Summary as per this next screen and then click on the Create button. This will deploy your server and create it on Azure platform.

So when deployment gets completed you are able to see the below screen.

And now click on the All Resources tab from the left pane and you can see the resource that we created.

Now if we click on the ‘angulardeploydemo’ of the type App Service (2nd from above list) then we can see all the Resources allocated to our app service. In this screen check the URL (top right corner).

By clicking on this URL you can see it will show us Home Page (by default) of Azure. So this way you can host your application on Azure Platform.

Implement CI/CD:

It’s time to Publish our actual Angular application on this Azure Platform and also to implement CI/CD with Github (or any source control) for our Angular Application.

For this, we need to set Azure DevOps and Pipelines to perform CI/CD.

1. To implement this CI, Sign In to your Azure DevOps account.

2. Create a Project. I am giving ‘angularDeployDemo’ as a project name. Then select the Visibility feature for this project. I am selecting Private as a visibility option and then clicking on Create Project button.

3. So now our DevOps Project is ready. As you can see this project offers many facilities like Boards, Repos, Pipelines, Test Plans and Artifacts. Here we will focus on Pipelines only. Because with the help of this we are going to setup CI. So click on the New Pipeline button.

4. And our Pipeline is created and you are able to see the below screen. Here, at the bottom of the screen, you are having a link for use the classic editor. Click on this link to switch your view to the classic editor.

5. Now here first you need to select a Source Control which you want to use. In this example we are working with Github, so I am selecting the Github as a Source.

(Note that I have already Pushed the source code of my Angular application to the Github).

At this stage we have to fetch that Angular application to this Pipeline. To do this we need to follow this Authentication procedure. So click on this Authorize using OAuth button.

Then click on the Authorized as user… as below shown:

And then select Git Repository of your Angular Application and the branch. Then click on Continue button.

6. Next thing is to choose the Template for our application. So let us create a Job or Agent. By default DevOps is offering some inbuilt templates to do certain jobs. You can select it from the list or you can create your own custom agent too. So here we will create our customized Agent so click on start with an empty job.

Now we need to follow some steps to create the Agent:

6.A) Before starting check the Agent Name on the right side of your screen. It is showing angularDeployDemo-CI and leave it as it is.

Now press the + (add task button) to add the New Task to your agent.

6.A.1) First we will add the Node.js tool installer.

6.A.1) Then set the Display Name to Node and then you can specify the Version of the Node.js and you can also select on the checkbox to use the latest version. Here I am using this 10.x version for Node.js. So our first Task is ready. Now we will add some other Tasks like this way.

6.B) Again click on + (add task button) to add one more Task to the Agent.

6.B.1) Add npm (Node Package Manager).

6.B.1) Change the Display Name of it to the angular cli because this will install Angular-CLI. Next, select the Command as Custom. Next write the actual command in the Commands and arguments field and i.e. install @angular/cli –g.

6.c) Now again click on + (add task button) to add one more Task to the Agent.

6.C.1) Add one more npm (Node Package Manager). This will be used to install all dependencies of mypackage.json.

6.C.1) Here keep its Display Name to npm install and then select it’s Command as install.

6.D) Now add one more Task for Production Build.

6.D.1) Again add npm (Node Package Manager).

6.D.2) Here change its Display Name to Production Build. Next, select the Command as Custom. Next, write the actual command in the Commands and arguments field and i.e. run build

6.E) Now we need to connect the DevOps (build) to our Azure Service having Angular application which we have already created on https://portal.azure.com. So as a last step we will add final Task for Azure App Service Deploy. This will host our Distribution folder because whenever we create a production build Angular-CLI will create a dist folder for hosting.

6.E.1) Add Azure App Service Deploy.

6.E.2) Here change its Display Name to Azure App Service Deploy:angularDeployDemo.

Next, select Azure Subscription to Visual Studio Enterprise… and then do not forget to Authorise your subscription.

And now we need to link this Azure Deploy to the App Service that we have created on Azure Platform. So write App Service Name as angulardeploydemo. This is the name that we have set on our azure platform.

Now you already know that Angular makes dist folder. So we need to host only that folder on our server. So write dist/angularDemoApp/ in the Package or Folder option. Here angularDemoApp is the name of my Angular application.

So we are all done with our first agent.

7) Now we have to set Trigger and we have to Enable CI. So navigate to Triggers tab and select this Enable Continues Integration checkbox to true.

7.A) Select your Git Repository’s Branch in Branch Specification.

7.B) Now press on Save & Queue button. And this will ask you for some information. In this window insert some Comment and then press Save and Run.

Now it will perform (run) all those tasks which we have created in Agent. So it will first install Node.js then it will install the Angular-CLI. Then it will add all the dependencies and will create the Production Build. Then it will finally host the App on Azure App Service.

When all the Tasks of Agent gets completed successfully then you are able to see the below screen.

8) Time to open your Browser and search the url https://angulardeploydemo.azurewebsites.net and you can see the Home Page of your Angular Application.

Hooray…!!! Your Angular Application is Live on Azure Server..!!

Note that we have not just Hosted the App to Azure but we have also implemented CI.

So let’s examine the working of CI/CD:

· For this I am opening my Angular Application and make some changes in the app.component.html.

In this HTML, I am changing the Welcome Message as below:

· Commit and Push these changes to Github.

This will take some time to finally reflect the changes on the server.

So by implementing this CI/CD, all our changes of the Angular Application can directly go Live whenever we push the code on Github.

You can always check on Azure Platform if you are having anything new in your Pipeline or not. You can check in Pipelines tab on Azure Platform as below:

Finally, you can Refresh your browser and you can see the new changes done using CI/CD.

Thank you for reading this article.!

You can also check out the Video for the same over here: