Create Environment set up and CI/CD pipeline for Angular+ .NET Core web API in Azure DevOps

hi everyone uh in this video we will discuss about how to create environment setup and uh cicd pipelines for angular and dot net code web api project so if you are building angular and dot net core web api separately it's fine you have to build it you have to build the angular project as well as dotnet core web api project separately now to configure your environments why you need environments as i said in earlier videos you need dave sit or broad pipelines in in large scale applications and mostly in enterprise level applications because you really don't need to eat really don't want to write some code which will uh deploy it in the production and it will create some bug issues before it got tested right now when um dealing with the small scale based applications visual studio is providing us the flexibility to go for angular.net core web api template so it creates a sample template sample boilerplate template for you and from that you can create your entire project from that uh template right but uh two weeks before when i was trying this uh i i found some issues so what was happening is when i was trying to build the project the environment if i'm working in the dev environment dev branches uh it was not pointing to the development branch it was pointing to the production branch so i try to dig into it how to do those stuffs but i found very little resources with respect to the boilerplate code they have provided visual studio have provided because you need to do some tricks and tricks to make it possible so we will discuss all these things in this video so the agenda of the topic we will be covering is uh we will create the angular.net code applications by using visual studio template then we will create the dave and sit uat pipeline uh environments then we will go for the environment files in angular as well as dotnet core web api then we will try to build uh the angular and dot net core web api separately then we will go for dot cs project if you are coming from the microsoft stack background you must have known that what dot cs project means uh this actually has the code which will uh do some uh tasks before building on or after building the processes right then after that we will go for the cicd uh for multiple environments okay so if you can see here i've already created one project over here so that is sample youtube project in my azure devops and i have just if you can see this one is the youtube sampleangular.net code project i have already set this up and i have already created uh three branches dev master and sit they will be pointing to dev branches situ will be pointing to sit branch and master will be pointing to the production branch so why i have created is if you are if i will show this thing entirely from scratch it will take little bit time to make sure that visual studio will work properly and all so i have already created it we will go from here okay uh i will just show you how to create those things you can go to here new project okay inside that you can select asp.net core project okay let me just show you you can just select this asp.net core application you can go to next you can just give your name then if you will type create it will give you some template but from which you will select whether you can go for angular or you can grow for real chess or you can go for react with redux based applications i will not go for now because i have already created it okay so you can see this application so if i will just remove all this folder to show you what exactly this application has this is a angular based dotnet called uap applications so you can see there are controllers there are pages and there are upsetting start jsons and app settings or development just just right now uh first we will go one by one we will focus how to create the environment file in angular uh project okay so if you can see that this client client app is actually considered considers all the consisting all the angular label files so i will just open these things in my visual studio code so that i can write the ui code effectively okay so now we can go one by one okay just give me one minute so you can see that how the angular project works if somebody knows so he will able to see that there is package.json file so if i will show you you can see that there is ng build command that is ng serve command okay which is actually going for the npm start okay now if you can see there is one folder sections over here environments okay it has two things one is a environment.ts file and another is your environment.ts file so environment.ts is the commonable environment file and in production version it is actually uh it will actually point to the environment.ts file okay now we will set up uh development and sit environment files over here so let me just add those files give me one minute yeah so i will add another file i'll just copy paste everything from here to go and create a new file environment dot that will be development dot ts similarly i will create another file environment dot that will be sit dot yes okay so you can see environment.ts and development.ts production.ts and sit.ts has been created now you can see that here production is false okay so in a development environment i will just create similarly just like this i'll create one class export const if you know javascript you can easily recognize my my naming conventions and all okay environment equal to this one i will create one object all right pro production pro as okay do one thing i'll do one thing i'll copy paste everything from here okay so it will be a little bit more easier for us not to write so that that might not have any spelling mistake okay as it's not a production file i will make it as false and i will write my naming convention like environment name let's write it like this and it should be pointing towards development okay now the same way i'll create another one so in society i'll go and i'll write the same thing and in production i'll write it to the same thing only what was there and that would be your production okay now once this things gets done i will come here and i will write my local my common environment setting in my common environment setting as environment name as local let's say let's say it as local so that you would be able to understand it okay now i have created all the environment files in angular now i will go to the app settings uh the ts files for the angular application so here you can see that there is one app module.ts and here i will have app dot component.ts and app.component.html so angular is a component based architecture so it's for it follows mvc as well as component based architecture so every html has been divided into a set of components so it's a single page but it will create an illusion of different different pages because of angular routing but mostly it is a single page and it will directly point to this index.html only and here you can see that it will be pointing to the root or root file okay so if you will go to this component you can see that this one is the selector where is the app root and it is pointing to this file okay so i'll just uh do something like this if possible i'll create one setup over here and i will name it as okay i'll name it as uh client env m okay this one will be this one will be string type and one of the advantage of typescript is it comes it's a superset of javascript so the you will get all the feature of javascript as well as you will get the typescripts features like you can assign the types just like this string or anything okay so that it can be handy to work on environment okay i'll just add these things here environment dot env okay now there will be another server environment name i will go through this thing later when we will be dealing with the dot net core web apa okay now first of all i will just create this thing and i will create i'll go to the app.component.html here i'll just write something like this okay so what exactly i'm doing is i'm pointing to my client environment name and server environment name and right now i have not implemented the server environment name so i have written like yet to come from server okay now i'll just save these things okay let's let's uh build the application first okay let's build the application so that we can see what kind of things i'm getting into okay so uh whenever you are running the application make sure that you should install the npm uh and you should install all the packages by using npm space install okay i'm just directly running it let's see what kind of thing i'm getting into okay just let's sweat now you can see i'll just load these things let's wait you can see that client-side environment name is coming as uh local okay and server side environment name is yet to come to the server why this is local if i'll go here uh to i have told you that uh this environment file will be changed with respect to the environment configurations now by default this will only collect these things okay until and unless i give some configuration values in the argument list of here okay now you can see that it is environment name local if i will make it as control c i'll make it as ng npm run c production okay let's see what comes if i have written the spellings right okay i have not written the spellings right okay if you can see here in angular.json file okay here if you will see there are only one configuration setup is happening in the build okay you can see that production when i'm writing production it will go and it will replace this file and it will replace the common environment file with environment.ts similarly we can create for uh development as well as sit okay we will do those things now coming up to here just let me paste everything from here to copy paste okay so i'll just delete these things in development we don't need that we don't need these things we need just development okay once this thing gets complete i'll just make sure that this one will be pointing to the development branch okay now similarly i need another and that one is for sit correct now i'll go for creating it sit and this one will be sit okay now i have written for the build okay now i have to write it for the serve or for the run time okay so in runtime you can see that i only have to only have one single thing i'll just copy this and i will create for development as well as sit okay now this one will be development one will be society and this one should point to the build of development this will go from here to here and replace these files okay now in society if i'll go i'll have to just point it to the site branch now angular dot json file also got uh created properly okay now i will just run these things so that i will see that whether uh i'm just collecting the proper branches or not okay ng serve then see in configuration i will just pass development let's see what comes now you can see that project compilation got complete i will just see what kind of things is coming so if you will see this is pointing to the development okay and server side i have not written it till now so it is pointing to the development branch so that means i'll just cross check again so that uh if i can get the site branch and b serve this is a common shortcut for configuration hyphen c or you can write configurations over there now my configuration name is society let's wait and let's check what the environment value we will be getting it or not okay now for sit also build got complete we will check this thing by ctrl key now you can see this is pointing to the side branch okay hope you have understood all these things now i will just move all this file to the dev branch first okay to the origin dev branch if i'll go to my github you can see what kind of changes i have made i have made in angular torches all these things has to be passed to the dev branch then i will merge it to the site and master branch okay so this video might get little bit long so so that i will explain it properly to you to every beginners to advance level people so that they might be able to apply these things in their day-to-day lives so i'll just add some commit over here so add nv files in client site code okay i'll just commit this once all these things gets committed i will just push everything to my origin slash test now coming up to the visual studio let's hope that everything got changed over here as well so why i am using visual studio code for ui development is it gives lots of extensions so that my ui development can be a little bit easier i can write i can write the sample code and save it also so that i can uh use those things later by using shorthands okay so for api development i will always going to use visual studio so if you can see in dev environment i'll just go to the section of both repos you can go to files this one is pointing to master i'll just point into dev environment let's see if things gets published over here or not client now i'll go to source you can see environment and here you can see the changes and you can see that there is just uh i just updated the dev environment okay now i will just merge all these things to my site and master branch i'm just checking out my site branch right now so there are two type of merging technical tech we use so you can either go for different different branches or you can create just one branch and you can just push all those codes to the master branch and you can have multiple environments so both are both are pretty much uh good you you can use it with respect to your project requirement and don't worry about all these things now if i'll go to team explorer branches i'll just merge it from dev branch okay now i'm merging it from dave bridge and similarly i will do it for master branch okay now merge got completed i'll just push everything hopefully there will be no errors okay successfully pushed everything now i'll come to my master branch i'll merge these things from site branch okay now margin got complete now i'll push everything to the my uh or azure devops branch okay now everything got synced now i'll come back to my development branch okay now the angular part got complete now i will go for the web api part so now we will go for the web api so i have already in my earlier videos i have already created how to build ci cd pipelines for net core web api so if you have not watched those video you can watch it here or otherwise you can go there and watch those things um it will be easier for you because those things has to be here as well so i'll just go for app settings.json so over here you can see these things and i will create uh for us okay just give me one minute okay ctrl c i'll create everything from here i'll just delete this okay now i don't have anything except my common app settings.json i'll go here and i will just build those things create a new item it will be a json file so just type this here this one will be development dot json similarly i will have sit and production i'll have another like this society.json then i will have production new item okay now once this thing gets complete what i will do is i will create one values controller so you can see these things has been completed okay now i'll just type something over here so that i can extract these things i have setting start development chart session i'll write this thing and here there will be a name which is pointing to the development okay now the same thing will be here as well i'll point this thing to production and the same thing i will do it for a well okay now these things get complete now in app settings dot uh normal app settings suggestion i'll have one config environment name file okay here i can go here i write config environment name this one should be my local just like we have a common environment.ts file in angular we have a app settings.json in our web api so once this thing gets done i'll create one controller you can add you can go to here you can add a new item and that one will be a controller class you can just start over here controller now mbc with read write action should be fine for us and the name i will write it like values okay now once that thing gets done i can do one thing just remove this i'll do a api level controller it would be fine not mvc new item api controller with read and write actions okay now once this thing gets done i'll just write my code to get the app settings okay you can go here you can write your own things http okay i'm using http get now i'm route am routing the raw i'm [Music] writing the route path route route path would be get app settings now i'll write method public async task this will give us a string value okay now get app settings fair app settings equal to your config of name the return settings okay now this configuration would be coming from your constructor by using dependency injection so i have to write a constructor over here ctor okay now this should point to the i configuration signature i'll just add the using statement once this thing gets done i'll write it like configuration okay and i'll create a private field for this and i'll write like config and this one will be your config config and this one will be the configuration from name now you can see that i am not actually going to here and using this config environment name rather i am going to this files and i am going to this name okay now value controller goes got complete now i will come back to the startup file sorry to the program.cs file here i have to create the configuration builder so that i can get the app settings.json with respect to the environment in the run time okay now i am not going much deep over it because i have already discussed these things in my earlier videos i will just post it in the description so that you can refer those videos as well okay so i'm just copy paste all those things from there to here see okay once this thing gets done i'll create my host over here okay now what you can see is uh i'm actually i have actually created one environment name called as string environment and this environment name is pointing to the config environment name which is actually in the common app settings.json okay here now if there is something it will take otherwise it will take from the otherwise it will take the default value as development okay now here i'm just building the app settings.json i'm just injecting everything from app settings structuration in runtime okay once this thing gets done i'll just make it as my startup project okay now i will check whether my api is working fine or not let's wait it's getting build oh i have not used the f5 button it's getting built let's sweat so you can see i have opened the postman application it's a api application so that you can hit the api and you can test it so i have created and the api routing path over here and if i will just use send you can see that it is coming to the development only so if i will go here i can just have a breakpoint so that you will be able to understand it is going it going there or not so you can see it is coming here and it is collecting the values from the development and environment app settings okay from here because there is no name key in the local environment local app settings environment common app settings environment okay here it's config environment name as as it is pointing to the development it is taking the files from here and it is injecting it and it is sending us back okay now what we will do in cicd pipeline you are you can just assume over here we have to change this configuration name in the cicd pipelines okay so once this thing gets done i will just integrate all i will just push all these things to the branches respective branches and i will merge it and then i will show you how to integrate all these things to the angular wave along with the angular ui okay so now i have already merged everything to my development branch all the changes as well as my site branch and my master branch okay right now i will create one uh service layer in the ui side so that i can interact with the api and i can get things from there okay we will go from that part let me create the service so it's a design pattern it's not a design button it's a convention we follow when we will create the service it should be in the share folders because it can be used by others as well so in source i will create one folder new folder that one would be share naming convention is here once this thing gets done i'll create another folder over here that one would be api service it's that thing it's complete i'll create one sample.service.tl file sample dot service dot ts file okay now that gets complete now i'll write the code which will collect the things and uh display it in your ui so i am writing it by copy testing it because i don't want to waste time so that i can go back how to show all these things in ci cd more so as you can see what i'm doing is i'm just collecting it from my base url get app settings and i'm writing the response type as text as json so that it can convert the text to json file and it's an observable so if someone has worked on the angular they know how the observable works okay i have created the service now i will try to consume it in my ts file okay so i have injected in my root label and i will go to my app.ts file appcomponent.ts if you can see i'll just write the code in export class i'll create the constructor similarly i'll not add anything in constructor constructor would be private i'll just inject just like our dependency injection in uh net core i will write it same thing over here sample service okay now it will inject this thing and once this thing gets complete i'll write implements ngon in it over here this comes with a interface label method and here i will write to fetch the data this dot sample service dot get app settings and i will just subscribe this and inside the subscription i will write to fetch the value strain and this will be used to inject this dot i already have an property over here i'll just copy this thing and paste it and i will write it as value okay once this thing gets done there might be possibility that i can get some error for that i will write the code error any and i will just print it in the console log so that it will be easier to see console dot log this one will be okay i can make it as error it looks good now i'll just run the applications once and i will see whether this thing is coming from the uh doctrine code web api or not okay now i'll just build the application let's wait if everything goes right it will come let's see the application got built we will check now you can see that application is loading let's wait now as you can see over here that the side environment is pointing to the local and but we are fetching all the details from the server side environment okay now why this is pointing to the local because i have not built the applications from the scratch okay so that's the main important thing in the visual studio boilerplate code we have to tweak or we have to implement something in the dot cs project okay so if you can see i'll show you why it is coming as local so if you can see this dot cs project you see here after the publish gets done after the build artifacts gets done it will execute this scripts so that angular project will be built so you can see that it is directly pointing to the plot okay now once it is directly pointing to the prod it will directly point to the current local branch correct so we really don't need these things we really need with respect to our environment uh setup just like if we are passing development it should get us development and if we are passing something called as site it should give us sit so how to do that that's the most important thing to do how to do that let's gets over here you can see this property group over here it is just like the arguments we are passing in the methods okay suppose i have a main method and i want to pass some arguments inside it i'll be writing main i will be writing like this right so if i'll show you how to write i can write it like main now this one will be my function this one will be my variables some name some enb name and all okay and this one will be my functions definitions just like that to pass something in the command prompt we will be using this property group okay so now we will be passing the client environment name from here if you can see i'll write another property group client enb name let's just copy paste this thing it's done you will be able to see okay now i have write it and i have made a default value suppose i am not giving it something it will just take this default value okay once this thing gets done i'll just come here and i'll just make it as to write the configuration build over here hyphen iphone this one will be configuration equal to whatever the value coming from there okay now i will take it from here this one will be client environment i'll just write like this client environment name and the similar thing will come over here i'll just copy the entire thing from here to here okay once this thing gets done i'll just push all the code to my other branches okay now go to the team explorer go to changes you can see the changes i'll add add services and change the dot cs project now i'll just push it and the same way i will just merge it with my s id and master branch let me just merge and let you know so i have already mashed all these things if you will see over here in the azure devops i can share it with you that there is three branches dave society and master you can see that my latest changes has been published to dev then my site also got synced and my master also hopefully got synced yeah this all these things got synced okay now i already in my azure portal i have two applications i am not going for the third application for production because it will be little bit costlier for me as well so to show you the demo i have created one for development and another is for sit now we will go for the cicd pipeline so that we can uh push the development branch to the development uh web web app and the site branch to the site weber now if we'll go to here go to the pipelines okay once you go to the pipeline you can create one pipeline over here go to pipeline go to the classic editor okay now go to your azure devops repo yeah you can select it uh this one is for dev you can select the dev branch now just select to continue okay now you can go for the empty job or you can go for the net code build that would be most probably better option for us okay now i am going for the dotnet core build over here it will give me some template and we can manipulate over those things okay now once these things gets done i'll just name this pipeline as our uh sample project youtube and this one will be our dev branch and this one will be our ci common continuous integration by plane now the agent specification i will change it to visual studio 2016 okay now cs project would be fine this can be fine or you can just give your cs project name whatever the cs project name you have it will go to the visual studio you have a cs project known as sampleangular.net core sales project okay you can go over here okay now if i'll go to this area in dotnet restore i will restore all the nuget packages okay to my cs project you can give the if you if you are comfortable you can give your name over here now in build i have to just set up with respect to our variables now go to this variable section first first create one variable over here known as build we can name it as build client environment okay once the build client environment got complete i can just set it as div okay as it's a development branch i can set it up like this development okay now do i need to just change it to change it with respect to development city it's fine now go to the task go to the build again now here i am trying to build the application okay now what application i will build i can specify it over here now configurations uh build configurations is coming as release from the variables just similarly i'll write to get the property whatever the property name i have if i go to here i can see that i have the client environment property name i'll just copy this thing and i will just pass it over here and i will point this thing as dollar whatever the build client environment name i have so i'll go over here i will copy this come to my task build here i'll just paste it okay now once this thing gets done i'll just check cross check everything test we don't need test we can disable it for now now go to the publish section in public section as publication as well we'll be using the exactly same name so i'll just copy this thing from here so what exactly we are doing is this will go and in the dot cs project this build client environment name will be get replaced okay once the gate once this build environment name gets replaced the dotnet core web api as well as the angular project both will point to its own environment files now i want to publish the artifacts artifacts name is drop it's fine everything looks good okay i just save it okay i'm saving it by ci pipeline for dev branch okay i'm just trying to run it and let's see if everything goes right then it will be able to run it okay we will check my bad i'll just reload all these things let's see what happens this got saved if i will go to the pipeline it should trigger something and i will just check that whether bill got succeeded or not okay let's just wait and see what all the progress is going on now net core is getting restored now after that build will be progressed just wait for it now build is going on build got completed you can see over here so in public section let's wait to let's wait for this publish thing gets to be complete okay once this thing gets complete i can show you how the dot cs project label is getting replaced okay now you can see npm scripts is also going on and you can see that npng build goes on and it is showing us to the configuration equal to development okay now i'm assuming that everything looks good till now we will go for the cd level pipeline until this thing gets done we will go for uh to create a release pipeline if you can see we can go for a release pipeline and this should be azure app service deploy deployment okay now in artifact i can go and i can select my source my source will be dev1 and i can just have the default version at latest version okay now cd pipeline got completed in uh here and i can select this stage i can name it as development development or dev that's fine now go to the job now if i'll go to my job you can see there are two tasks i will do one is i will change the app settings notification so in here i'll just add something like this file transform is it coming yes and this has to be done before the publish okay now here i'll just come and i'll just check the run agent the run and run agent is looking good vs 2017 in 2016 and this is pointing to the dev ci artifacts okay this looks good now coming up to the file transform what file i want to transform i can come over here i can select the file format file format is json type target file i will choose i'll choose the target file as app settings.json okay once that thing gets done what i will do is i will create one variable over here in variable i'll write it like this whatever the naming convention i have followed over there so i have followed it like config environment name this one would be your development okay now scope is released it looks good your scope should be this one should be for the dave only i'm making it a step now coming up to the task this codes complete now i'm going to the deployment okay now in deployment i will choose my subscriptions now if i'll go to the search subscription just give us moving it now you can see uh if i will go to here i have service name i have service name is right find i have just created one azure resource manager subscription and i have a deployment date subscription it is coming under here so how this thing will achieve if you will go here in dev french you can just select over here and you can select the app service name and i'm using the demo poc web update now i will come back to the file transform file transform looks good now i'm coming to the here now the path is looking good okay now if i'll go to the file transform options i do not need anything because i'm using my own file transfer okay other things looks good okay now if hopefully it looks good i'll create this thing and i'll add the cd pipeline for development diff branch okay once the comments gets done i'll just add it and i will just create a release and let's see if everything goes right or not okay now stages for trigger to change the automate from automated to manual i can choose dev okay or we can choose it later as well if it's fine for now i'll choose it and create the release once this thing gets done i'll go to the logs and wait and how the things going on we can see over here okay now deployment started i'll see now getting one error that i'm not able to get the package found now i'll go to the pipeline again we will see why it's okay i have not maintained the artifacts over here so if you can go to here in the release pipeline here options you have to add the artifacts okay just edit this edit pipeline just let's wait now i'll add the artifact i have forgot to add it i guess now i am adding it latest version i will take i'll add it okay once this thing gets done i'll create everything looks good i'll just save it okay i'll try to create a release and let's see what happens now the release 2 has been created and it's been queued so hopefully we will be able to see all the deployments over here now deployment has been started okay that effects it's getting downloaded now deploy to azure app service now file transform got succeeded we can see what has been changed over here if you will see there is app settings.json file and the variable we are changing it should be here somewhere we have to write it okay i think i have forgotten those things as well i can see that thing let's see if i have the variables over here or not okay i don't have any variable i'll create that one i'm not sure i have saved data yes it's been um due to unsaved changes it got removed i think so i'll create the variable name just from my visual studio code what is the variable name i have i have settings.json it's the config environment name i'll go for here and i will make it as they fill up and okay now release version will be it looks good i'll save it and i will create again another release pipeline and i will check whether the variable got replaced and the bill got succeeded or not okay so if you can go to release you can see that this build got succeeded but we have unable to replace the app settings.json file now we will see the logs so it's a good habit to go and see the logs so that you will be able to see what kind of environment file got replaced what kind of value got replaced or not okay now artifacts is being downloaded we will wait for the file transform now file transform got complete will go here so app settings.json is looking good i want to just see okay here substituting the value on key config environment variable with development okay now this thing got completed now we can go to the portal this one is my portal i am going to the development web app now i will collect the web up details over here copy and i'm pasting it over here just let me give me some time hopefully if everything goes well we might get everything right okay you can see that client side environment name is development as well as server side environment is also development now coming back to here i can create the same thing for sit just like your dev create another pipeline okay use classic editor and choose the repo for it this one would be pointing to a site branch continue then i will go for net core build okay now restore is looking good i'll just see the i'll just change it to vs 2016. now build in build i'll just it's the same way i'll just create it from the development branch i'll just duplicate it and copy paste everything from the development branch just only we need to change the environmental settings that's it now create if you can see this pipelines i want to leave it i want to just go to this edit it so in build we have this thing i'll just copy copy and here i will just paste it and this one will be my build client environment here in variables um i think my internet got slow so yeah so it came now i can make it as this and i will make it as a society okay now once this thing gets done uh hopefully i don't need a test so i'll disable it right now because i don't have any test project this looks good now go to the publish now in publish you have to collect it from here same thing only we need to go for publish i have created the same thing now you can see that client environment name is coming from the variables and it is pointing to the site now drop path is looking good now i will just save and queue just add it as sitci pipeline okay once this thing gets done we will just see oh my word again let's see if the build pipeline got triggered or not for the site branch hopefully it should get triggered and we will see the changes now it is getting triggered we will just wait for this you can go to here and you can see the agent jobs okay restoring is getting done now in the build part we will see in the publish part we will see whether it is pointing to a site or whether it is pointing to development branch we will just wait okay in the publish section we can see now dlls are coming up now we should wait for the angular build now you can see that the ng build is pointing to the configuration site so hopefully now the angular is being built on sit okay once this thing gets done artifacts will be published i'll go to the release and i will create the release pipeline for the sit just like our dev give us a minute okay now i will create the release for ssid new new release pipeline okay do i will do one thing i will just clone this thing and i will just change the naming conventions it would be probably the better idea okay i have cloned it so everything looks good here i'll just have to change it to just i'll be deleting it and i'll be changing it to sit oh i have not changed the naming convention over here but you can assume that this one is the site okay now once this thing gets done i will just make it as sid now i have two jobs and in variable i have to change this thing to sit and i have to change this scope to set you okay fine now coming up to the pipeline jobs file transform file transform is looking good deployment deployment has to be other thing i'll come over here and i will change this to sit okay once this things gets done hopefully if the build has been made i can trigger the release pipeline as well i will just check to my pipeline and this got completed bill got completed i'll just have to save it sit pipeline okay now i'll just create the release list description i don't need and let's see if everything goes fine it will point both the client side and the server side will point to the site branch now it's been cued let's let's wait now coming up to the logs you can see the agent got run now in file transform we should most probably see the configuration file has to change to this site yes this got changed to sit branch okay now close it now deploy is meant is going on i'll just copy this thing and most probably this one should be sit branch let's hope this one is society okay now let's come over here discord succeed deployment got succeed then i will just click it to point it to sit now the application is loading now you can see the client-side code is pointing to the site environment as well as the server-side code is also pointing to the sit environment in this way you can go for the production branch which is the master branch and you can deploy it like this as well and if you want to go for creating continuous integrations you can go to the pipeline you can choose your pipeline and in pipeline go to edit okay you will have it trigger options over here so go to this trigger you can choose enable continuous integrations and it will show you which path by which path you want to trigger it now save it and cue it the same way you are you can go to release okay you can go to the sit or dev any branch you can just edit it and you can just trigger this deployment by whenever a new trigger is being created in the build level environment in the build pipeline okay you just need to enable it and if you want to branch filter also you can add it over here you can create the build branch whether it's dave or sit or master you can create it and it will be a complete ci cd pipeline for you for angular and net core web api why i have not discussed this thing over here because this video is getting long and i have already discussed it in uh creating ci cd pipeline for dotnet code web ap i will add the link over the description you can go over there and you can watch those sections as well thanks for your love and support please keep like share and do subscribe thank you thanks very much

Channel: Anshuman Dikshit

Views: 2,509

Rating: 4.9466667 out of 5

Keywords: Azure, DevOps, .NET Core, WebAPI, c#, pipeline, microsoft

Id: D97Qhk8n-lU

Length: 74min 16sec (4456 seconds)

Published: Fri Apr 16 2021