Azure DevOps : How to Host Angular 8+ application - CI/CD Implementation

Deployments have never been easier! All the buzz words might sound complex and scary. But it is really simple and easy to learn.

 

You can understand and implement the CI/CD pipeline in Azure in less than a day. It does not take much time to grasp the overall idea.

 

Without further delay, lets get to the working of it.

 

If you are completely new to cloud and its concepts, please checkout this link: . It is hardly a 5 minute read.

 

Pre-requisite

  1. Have an Azure account
  2. Have at least one basic angular application ready in GITHUB repository

Overall idea:

  1. Create an App Service here : https://portal.azure.com/#create/Microsoft.WebSite
  2. Link this service later during the CI/CD Pipeline creation

Creation of App Service

Service is created in the Azure App Services.

Azure Portal: https://portal.azure.com/#home

This is the screen you will be redirected to on clicking of the above link. Here, create a new Service:


 

On clicking of "create", you will be redirected to the below screen.

Note: Availability of the instance name is validated by Azure. You can give your custom name here. Keep this URL handy. For me it is: (thirstLandTechBlog.azurewebsites.net)




After filling the details, click on "Review + create"

 

 

Click on "create" again in the next screen. A "deployment is in process" will appear after which deployment will be successful





After a few seconds:



 

And that's it! You are half there! Let's move on to the second part of the process

 

 

DevOps: CI/CD Pipeline Creation

Logon to : https://devops.azure.com/

 

Create a New Project:



 

Fill up the details. You can give your own name in the project. For the simplicity of this learning, let us keep it public. Click on "Create"



 

Now, you will be creating the pipeline here, for this newly created project. Usually you will need to create a YAML file. For now, let us use the classic editor, it will create a YAML file for you. You just need to let Azure know the steps to run your application:



 

As mentioned earlier, you should be having an angular application moved to your GitHub repository. We will be linking this repository here as the source code. 

 


Click on "..." to select your repository. Click on "Continue". 

 

Let us now start with an empty job. This is the entry point of pipeline creation.



 

Now that the source code is ready. Let us start with the creation of  "Pipeline". Think of Pipeline as a series of steps you would have to otherwise run manually if there was no DevOps! Since we have DevOps, you will be instructing the steps to automatically run few commands on certain actions

 

 

Pipeline Creation

After clicking on "continue" in the above screen, you will be redirected to a screen something similar to below. In this new screen, let us add "tasks" to Agent job 1:



 

 

  1. node.js tool installer - this is the first thing required in this pipeline to basically run the other required "npm" commands. So that goes first in the pipeline:
    Search for "node", click on "Add"




You can change the version number if you would like to. I changed it to ">=12.x"



 

  1. npm for installing @angular/cli: Similarly, click on "+", search for "npm", click on "Add" as below:




To run the "npm install -g @angular/cli", we have the npm ready, the command needs to be changed here. 



  1. npm: Again "+", search for "npm", add the same npm as added previously. This time we will not write any custom command. The default "install" command to install our packages present in package.json will be handled here

  2.  
  3. npm: Again, "+", search for npm, select npm. This time we are adding a custom npm command. This is to run build command for production You do not need to mention npm here. So the command is "run build". Fill up with the below details. I have changed the name just for clarity.






  1. "Azure App Service Deploy" : Finally, click on "+", search for "Azure App Service Deploy", Add it.




----> Select your current subscription plan and here is where you will be linking the service created in "App Service" initially. (You will need to Authorize, it will just take you to login page. Please enter your details there to authorize).
----> Now, add the service created previously here in "app service name"
----> The Package or folder for us is the dist/<your_project_name> (Note: Please add the project name, not the repo name!)



 

 

Continuous Integration (CI)

Now, navigate to "Triggers", check "Enable continuous integration"




Click on "Save and queue":



 

 

 

Now the deployment is triggered, it will take a while until all the commands complete execution. 

 

 

Once the deployment is successful, navigate to the <your-service-name>.azureservices.net that you had created initially to see the application run.



 

 

You can push new code to github master repo to see automatic build triggered here in Azure!

 




And here is the new content deployed:

 

 



 

 

Here is mine: https://thirstlandtechblog.azurewebsites.net/

 

Comments

Post a Comment

Popular posts from this blog

Inside the JavaScript Memory Box: Visualizing Variables, References, and Copies

Image
There is a difference in the way JavaScript refences variables based on whether they are primitive or non-primitive Primitive Types: string, number, bigint, Boolean, symbol, null, undefined Non-Primitive: Arrays, Objects Each variable in JS is stored in a memory “box” Assignments: But when another variable tries to assign this value, JS thinks “wait, is this a primitive or non-primitive? Because if it is primitive, I will create a new box for this new variable with the same content. But if it’s not, I will just create a refence to the existing box” PRIMITIVE: Analogy: Let's say you have a note that says 5. You give a copy of this note to your friend.  Friend now updates this copy to 10. But your copy still says 5 let a = 5; let b = a; b = 10; //a remains unchanged NON-PRIMITIVE: Analogy: Let's say you have a note with address "123 Elm Street". In that house lives a cat named "Tom". You give a copy of this note to your friend. Friend now goes t...
Read more

React & State Management: All Concepts

Section 1: Fundamentals 1. Counter with increment, decrement, reset — useState Remember: prev is needed when the new state depends on the old state. When you're setting a hardcoded value like 0, you just pass 0 directly. Why:  reason prev matters — if multiple state updates happen in the same render cycle, React batches them. Using prev guarantees you're working off the latest state, not a stale snapshot. 2. Toggle show/hide paragraph — useState Remember: onClick={toggle} — pass the function reference, not the call. onClick={() => toggle()} — also fine, arrow function that calls toggle when clicked. onClick={toggle()} — calls toggle immediately during render, setVisible triggers re-render, toggle calls again, infinite loop. Why: JSX evaluates expressions inside {} during render. toggle() is an expression that executes immediately. React doesn't get a chance to attach it as a handler — it just runs it right there, state updates, component re-renders, runs again. ...
Read more

React: Communication between components

Parent to Child: Props Child to Parent Callback Props (advanced props) Controlled Components useImperative hook  Nested Tree: useContext Sibling: Lift State Up PARENT TO CHILD: Props App.jsx Users.jsx <User name ={user} /> function User({ name }) {  return <h1> {name} </h1> } CHILD TO PARENT a) Callback Props (Advanced Props) Parent.jsx Child1.jsx export function Parent() {   function sayHello () {     alert(“hello triggered”)   }   <Child1 onSayHello ={ sayHello } /> } function Child1({ onSayHello }) {   return <button onClick={ onSayhello() }>          Click       </button> } b) Controlled Components Usually used in forms. Controlled components mean the parent owns the state, the child renders inputs, and every ch...
Read more