CI/CD of Angular 13 app using Azure DevOps Pipelines

hi all today let's see how we can build and deploy an angular application using assured devops pipelines and deploy them into a blob container as a static website so there are two parts to this task so one part is the assure devops it is the place where our code will be residing it can be a jit version control or any similar version controls so in this scenario i have created an organization called android and here if you go inside this is a trial version of the azure devops and here there is a option called repos where we can create multiple reports or repository through this particular option and here you can provide the type of the repository so here i have selected the cheat repository and i have already created a repository called js frameworks and this is the place in which we will be writing our code and the same code we will be viewing through the vs code so here i have cloned this particular repository and i have placed it here in my local machine now the task we are going to do today is that we will be creating assure pipelines so there is a option called pipelines which can be used for running the continuous integration and continuous deployment of our angular application so as i previously mentioned we will be building the application using the azure pipelines and we will be deploying them to a blob container so the block container and all the related resources we will be creating in a separate website that is the azure portal so here also we need to create an account and this is the place in which we will be creating the resources like a blog container the storage account the resource group all those things so i will go into details into each of this so first let us go ahead and create a pipeline for creating a pipeline we need to come to the azure devops and select the option pipelines and here we have the new pipeline option so when we click here there are two ways in which you can create a azure pipeline one is using the classic editor so if you select the classic editor you will be able to see a visual representation of your gitrapo and all those things and you will be able to select this and there will be custom templates which are already built so you can make use of them to create your own pipeline but today we will be focusing on another option that is the yaml based approach for creating pipelines so this is the yaml based approach so here you can select one of this option since our code is residing in the assure reposit i am selecting this and here they will be asking for the repository name so i am selecting the js frameworks and now it will show various options like these are also some pre defined templates so here we have an option called not js with angular so either you can select that so once you select this some predefined yaml template will be auto generated we can make use of this as a starting point and create the pipeline so today's demo what i am going to do is i am going to create my own aml file and i will be creating the new pipeline based on that particular yaml file so for this purpose first let us go to our source code so here you can see that the branches on this github are listed here so by default there will be a branch called the main or master so in this case it is called the main branch so in order to secure the main branch so it means like the main branch will be the place where our production ready code will be available so in order to prevent the developers from directly modifying the main branch we can set branch policies so here what i have done is i have selected this option it means that the developer will not be able to directly check in any code into the main branch but it has to go through a process in which they need to raise a pull request and a minimum of one reviewer should approve their changes so here i have selected the allow requesters to approve their own change because this is a demo and i am the only user that is using this repo and also here we will be able to automatically include the reviewers so i have added my own id as a required reviewer when we go back to the main branch so since we cannot directly check into the main branch we need to create a new branch so here i am going to create a new brand and i am naming it as the yammer so i am going to publish the branch so once the branch is published when you refresh you will be able to see the branch so here i am going to create a yaml file so i am naming it as the azure pipeline ms windows xml and i have added some code into that now let me check in this yaml file so our changes are available in the dev branch now we can go ahead and create a new pipeline from this particular branch so here i am selecting the repo js frameworks and here there is an option called existing azure pipeline cml file so since we are going to make use of the existing yaml file we can select this option and since our yaml file is residing in the dev yaml branch we can select that branch and select the particular yaml file so once we press on continue you can see that the yaml file which we created it is being shown here now what we can do is we can save the pipeline so now effectively a new pipeline has been created so you won't be able to see it here and the reason but if you click on the alt you can see that this is our newly created pipeline so here i am going to rename the pipeline i am going to rename it as angular deploy win and i am saving it now if you go within the yaml file you can see some syntax so yaml is a format which is similar to the json one advantage of yaml is that it is easily human readable it is most commonly used while creating the devos pipelines so here one thing to note is that you should never use tabs while creating ml files since the position of each of this line the starting position it is very important and any change in this particular order it will result in error so coming to our pipeline we can go line by line so here initially i have given the keyword called trigger and whenever we see a hyphen like this it means that the corresponding value for this particular key that the value for trigger is a list so i can provide multiple branches or multiple names like for example the the aml branch as well as the main branch and once you give a branch as a trigger whenever a check-in happens into this particular branch this corresponding pipeline will be executed so that is the significance of the trigger keyword now coming to the pool so before going to pool we need to go to our project settings and here there is an option called agent pools so here we have two options one is the azure pipelines that is a agent pool and within that there is a ms that is microsoft posted agent that is available for us so since i am making use of the free account only a single agent will be available for running the pipelines so through our aml file we will be able to select which pool we need to select like which agent needs to run our pipeline so here what i have done is by default our azure pipelines will be selected i have not given the pool name so by default the azure pipeline will be selected and since there is only a single agent it this hosted agent will be selected but we will be able to provide the type of vm image so in this case i have specified like windows latest so the other options which are available are the ubuntu latest so ubundu latest is the default value so here i have a separate aml file in which i have not specified the port so there by default it will be taking the ubuntu latest and it will be executing the pipeline similarly we can create our own build agents so if you go back to our agent pools you can see that there is another agent pool called the default so here what i have done is i have created my own agent so we will be able to create our own agent by this process like you can create a new agent then it will give an option to download the files that are required for creating the agent and we can just extract that content so it will be something similar to this one so this particular folder the agent this is the self-hosted agent that i have created in my machine so once this is done and you run the config.cmd our agent can be set up as a service so here as you can see a service is running here that is a vsts agent and default android so this is a azure pipeline agent now whenever we want to make use of this particular agent we can provide that in the yaml file so here for example in the pool i have given the name as default and here i am demanding that the agent name should be equal to andrew joy so that particular agent will be selected for running this pipeline so these are the different options that are available within the pool keyword now coming to the workspace so workspace means basically coming to our self-hosted agent we will be able to see the internals of our workspace so here you can see that there is a folder called one within that there are different folders s a and b so s is the place where we called our working directory so whenever we check out our code and try to build our application this is the folder in which that particular code will be checked out so before running the pipeline we are telling the agent to clean the workspace so there are different options so here i am giving the old option so that all these files will be cleared now coming to the actual steps we are going to execute within the pipeline so steps is a keyword within which we can provide a list of tasks so here again the hyphen is there which means that it is a list so the first task i am going to do is that we are going to install the node.js so for that we can make use of the task called nodetool 0 and here we can specify the version of the node.js we need to install so i am giving a 164 index and the display name is in the actual name of the task which will be able to see when we run our pipeline so now since we have created our pipeline let us try and run it so for running the pipeline we can go to the old since we have not run it previously we can select the particular pipeline and either we can run from here or here so i am selecting here and i am selecting the dev vml branch and i am going to execute the pipeline so here you can see that a job has been started and once we click on that job you can see that it is making use of the windows latest image and the job has been queued to our agent so now the agent has started executing the pipeline and here you can see that initially checks out the code after that it installs the node.js so in case node.js is already installed that is 16.x version is installed in the build machine it will just fetch it from the cache so since it is already there it is telling that it is found the tool in the cache and finally we are exiting from the pipeline so this is a very basic way in which you will be able to run a pipeline now let's add some more tasks to this like building the application testing and lending the angular application now i have added some more steps within our aml file so let's go through that so the first task i have added after the node js installation is the installing all the packages so here as you saw first the code is actually checked out so here if you see the code is checked out and as part of the code there will be our package.json so inside the package.json we specify the dependencies for our angular application so first we need to do an npm installed so that all these dependencies and div differences get installed within the that particular work folder so here for doing that we can make use of the npm one task and you can say that the command which needs to be run is installed so basically it is equal to doing an npm installed within the current directory so once we have installed all the dependencies the next task we are doing is that we are going to build our angular application so here again we are making use of the npm task but here instead of the command installed we are saying that it is a custom command which means that any command which we specify within the scripts portion of that package json we can execute that by making use of the custom command so here in this package json you can see that for building our application we can make use of the npm run build so here i am giving the custom command run build and i am giving a display name as build angular app so after building the application i am going to run the test for the application that is the unit test cases so here again we have the test step in the scripts so i am using the npm run test and after that we are going to run the lin step which is also available within the package.json so now i have checked in the code so let's run this pipeline one more time so since our previous pipeline execution is completed we can see that within the recent so now we can select that directly and run it from the wml branch so our steps within our pipeline is getting executed one by one and now we have completed all our steps so if we go through the steps you can see that first the npm installed was executed and all the packages on the dependencies were installed and after that our angular application was built and the corresponding files were created then the test cases were run and after that the lint was also executed now we have basically built tested and limited our application by making use of the pipeline now what we need to do is that we need to store this output like basically we need to host this application that's the list folder which is generated from this step to a block container so we need to store this output in some place so for that let's see what we need to do the build output which is generated previously from the build angular application task we need to store it within the pipeline so what we are going to do is that after the build lint and test is done i have added a step or task which is basically a script so previously you can see that all these were making use of tasks but here we are actually executing a script within our vm itself so here initially what we are doing is we have an internal variable called build.artifact staging directory which basically points to this particular folder that is the a folder and here what we are doing is we are going to create a dist folder within this folder a and after that we are copying the contents of the dist folder that is the output of the build command we are going to copy that to within this particular list folder so that is the step called copy disk contents so once we have done that we make use of the publish build artifacts task so what it does is basically it will copy the content of this particular the artifact staging directory and it will publish it to a particular location on the cloud so let's see that in action so i have checked in the code now let's label that rerun that pipeline so here i am going to run that one more time so the pipeline run has been completed so now if you go and see we have the two additional steps here so one was the copying of the list folder to the artifact staging directory and after that we are publishing the artifact so here you can see that it has been successfully uploaded to a cloud location so if you go back to the job here you can see that there is one thing called published so if you click on that you can see the artifacts which have been published so within that the folder drop there's a dist folder and within that the build output of our application now basically what we need to do is that we need to get this content from the published artifact and we need to deploy it to our assure portal so here what we are going to do is that till now we were simply running our pipeline as a single job so now we are going to split our pipeline into different stages so let's see how we can do that so let's see how we can create multi-stage yaml file so what we can do is that we can add a keyword called stages which is again a list within which we can have multiple stage and here we are defining that the name of our first stage is build and the remaining things are quite similar we have the pool and the image and then within the stages we have something called jobs so again it is a list within which we can define the different jobs which need to be executed so here we can specify the name of our job so in the previous example which we saw already here you can see that this is actually a default job so default means basically it's an implicit job which is created even when we don't specify a job or a stage so here there is only a single stage which is implicit and within that we have a single job which is again implicit now within the job we have the different steps so here we have added the stages and also created a name for our job so now let's run check in this and run our pipeline one more time so now you can see that since there is only a single stage even now the stage is not shown but the job name as you can see it has been changed to whatever we have given within our display name so we have the angular app built and the next steps will be quite similar to what we previously encountered now we need to add the second stage so that we can deploy our application to the azure portal so now let's go to the azure portal and see what what all things we need to set up before we can deploy our application to the azure portal the first thing we need to create is the resource group so resource group is basically a logical grouping or the grouping of the different resources that will be used by our project so here we need the blob container similarly we might be making use of some secrets secret keys within our keyboard all those kind of resources will be grouped together based on the resource group so for creating the resource group here we have the create option and we will be able to create a new resource group name so this is the subscription that's a free trial i am using now and similarly we can select the region in which we need to host it so here i have already created one resource group so we will be making use of that that's a devops assure so once we have created the resource group the next thing we need to create is the storage account so storage account basically consists of the resources like the blob container tables cues and all those kind of things so for our example today we need the blob container so here i have again created a storage account called devops storage angular now within that we have the containers and here we have a container called dollar web so this is the place basically where we will be hosting our build output that is the output of our angular application so here you can see that i have already deployed the application once previously now if we go back here we have an option where we can say that this is a static website so we have this static website of option which i have enabled and because of that we will be able to get this particular endpoint so using this endpoint we will be able to access our website so now you can see that the sample application is here now what we can do is we can go ahead and remove this container i am going to clear the contents of this now when we refresh our application you can see that there is no content here now once we run our pipeline and deploy it we will be able to see our application so now let's go to our pipeline here we have added a second stage called deploy which will be deploying our build output to our blob container so here we have the stage where we gave the name as deploy and the depends on tells that this stage needs to be started only when the dependent stage that is build is completed so that is this one and also we can specify the condition that the build should be successful in case any error happens within the build stage the deploy stage should not be started and here again we can specify the pool and within the jobs we can define the different jobs we need to run so here you can see that previously we we used the keyword job but here we are making sure the deployment since we are actually running a deployment and we are giving the display name as deploy to azure we can specify an environment which can be linked to this particular pipeline so the environments can be created within our assure devops so if you go here we have the environments option here i have created an environment called dev it is quite easy you can create a give a name and just select the none option and create so once you have created that what happens is that each execution of our pipeline it will be shown in this particular environment so that we can easily map all the runs of our pipelines so here i have given the environment as dev and after that we can specify the execution strategy for the deployment so basically you want to run this deployment once and this is a hook which will be executing the deployment and within that hook we will be able to specify the steps which we need to execute so here we are making use of a task called assure cli basically what it does is we will be able to perform some actions like uploading content to the blob all those things through this particular cli so here the name i have given us deploy angular app and as input for this particular cli we need to have a azure subscription so let's see how we can create that so if we go to our radio we have the project settings there we have an option called service connections so this acts like a connection between our radio and the azure portal so here i have already created one service connection now let's try to create one more so once we click on the new service connection you need to select the assure resource manager select next select the service principle automatic now it will be loading all our subscriptions so i am giving the subscription details now it will be listing the resource group which we had created previously within our assure portal and once we select that we will be able to give a particular name here and also we can select the grand access permission to all pipelines so that the pipelines will be able to make use of this service connection so once we have done that we can save it and a service connection will be created so for this sample i am making use of the existing service connection that is the angular deploy connection which i have given here within the azure subscription value now the next option is the script type which can be either batch or bash or powershell all those things so here since it is a windows vm i am making use of the batch and here we can give the location of the script which needs to be executed so here we are giving an inline script so in landscape we are giving like we this is a azure cla command we are saying the storage blob we we are planning to upload in a batch mode and also we will be overwriting any previously existing files there and our destination is the dollar web which we saw earlier here that's a container and we need to give the account name so this is the storage account name so that is basically this devops storage angular and we need to also provide the account key which we will be able to see here in the access keys so you need to get this value and put it here and also the source you can provide so basically prior to executing this step what it does is we had previously uploaded the contents of the build to the artifacts so that artifact will be automatically downloaded and it will be downloaded to this particular folder the build folder and you can see that in my local machine it is already there drop dist and the contents of the list folder so basically we are saying this is the source and we need to upload that to within our blow up content so one thing to note is that actually we have hard coded the connection details like the service connection detail as well as the storage account detail within our pipeline itself so in order to prevent this we can make use of something called variable group or variables within our ado we have a option called library and within the library we will be able to create variable groups so basically we can create a given name and once we save it we will be able to add variables so here i have already created a variable group called vgrp dev and once you click on that you'll be able to see that i have given the assure subscription that is the service connection and the storage account detail within this variable group so that particular value we will be able to use within our pipeline so we can replace the actual value with the variable name and another thing is that here we have the account key so since this is a very sensitive information we might not be able to save it within the variable group as well so for that what we can do is in variable group the library we have an option called we can link the secret keys from the azure keyword so assure key vault is another resource which is available in nashua portal so here i have created a keyword so within this keyword basically we will be able to store secret keys so here i have created a secret key called account key and within that i have stored the account key which is used for connecting the storage account so once we have created this resource here we can link that particular resource here using the variable group itself so here i have a variable group called secret div and within that i have given the subscription details and the keyword name and here this particular key will be automatically downloaded from the azure keyword so this variable name we will be able to make use within our pipeline so here we can give the variable account key and now within the stage we will be able to give the variables and there are two ways in which we can give variables so either it can be a normal variable which we define like you can give key and some value that is one way but since in our case we are making use of a variable group we can give like group and we can give the name of our variable groups so the first one is vgrpdo and the next one is secret dev so we can add these variable groups here so that the variables which are defined within these variable groups it will be available for the this particular stage of our pipeline so once we have done this let's check in the code so we have checked in the code now let's try and run our pipeline so now you can see that there is an error like the step input assure subscription that is which we gave here so if you see we had given an actual variable here so because of that this particular error is coming so if we try to make use of a variable as an input we need to do an additional step so that we'll be able to access the value of the variable so in order to access the variables within the scripts and this is fine but within inputs we need to link the variable group to our pipeline so let's go to our pipeline and edit the pipeline here select the triggers after that select the variables variable group link variable group and here i am selecting the variable group dev so once it is linked i will save that now let's go to our pipeline and try to run it so now you can see that the error is gone and our pipeline started running so now you can see the different stages that we have created so one is the build stage and other is the deploy stage so we can open the build stage and within that we have the angular app build which is the job and within that job we have each of the steps which will be executed and once the build stage is completed the deploy stage will be started so our build step has been completed now let's see how the deploy step gets started so it is saying it needs permission to access to resources so since we didn't give the permission for the pipeline it is asking at the runtime so here i am getting the permission so this is only a one time thing so now our deploy job has started so here you can see that the secrets are getting downloaded from the keyword and the artifact is also downloaded to the folder that is the drop dist now we have actually started deploying our angular application to the blob container so it's also successful now let's check whether our application is up within our blog so now you can see that our application has been hosted now let's create a pull request between this the vml branch and the master branch now let's add a small change to our application and let us create a pull request so that we can merge the changes to our master branch and also we can see whether the pipelines are automatically getting triggered so here within the title i am going to add a key called deployed sample app so that change we are going to push to our branch now once we have done that we can go to the pull request part and either from the new pull request or create a pull request we can create the pr now here you can see the difference between the two branches you can see that the reviewer is automatically added you can approve that and here we have the pipeline so once we complete this particular change the development branch is deleted and the changes are gone into the main branch so now you can see that all the three pipelines got triggered so i am going to cancel the other two pipelines so either you can do that from here or from here now only our pipeline is currently executing so since it is a free account our agent went into queue so it will start soon so because of the change we made our test case failed it didn't change the value of the expected value within our test case so you can see that since a step failed within our build step or build stage what happened is that the entire job was cancelled and the next step that next stage let's deploy it was not even started so now let's modify the spec as well so here we can make the change for our unit test and we can create one more pr so our pipeline is again going to start so our build stage is completed and now the deploy stage is going to start so the deployment is also completed now let's see whether our changes are reflected within the hosted app so now you can see that the new change is also available within our host application so hope you are able to get a good understanding about how we can integrate cacd for an angular application using azure devops pipelines see you soon thank you

Channel: JS Frameworks

Views: 12,501

Keywords: angular ci cd pipeline, azure devops tutorial for beginners, azure devops, azure devops tutorial, azure pipelines tutorial, azure pipelines, azure pipelines yaml, create build pipeline in azure devops, angular azure devops build pipeline

Id: iX1vHFghCtQ

Length: 46min 3sec (2763 seconds)

Published: Sun Mar 20 2022