Deploying Angular App to Azure App Service | CI/CD with Azure Devops pipeline | Build & Upload

Hello friends welcome back this is angler developer series we building e-commerce web application and this is episode 12 in this video I will show you how to deploy your angular application to the Azure web app using the cicd pipeline and we will be using devops as our source control and it will be easy so without delay come let's get [Music] started all right so first thing first all what we have to know is where is the code right so if you go to github.com learnsmart coding under the repository you have plenty of repositories here so we are going to focus on this one e-commerce smart card hub web app this one is ang 16 but basically Ang 17 also will be supported but I'm going to take this as the code base okay all the necessary things has been already merged into main branch and this video will be specifically uh with with respect to uh episode 12 so don't worry about the code let's focus on steps to complete this task so this is the code that I've opened I will be showing you only what is required so that it will keep uh the things simple and easy to understand okay now all what you have to do first thing is go to package.json under the package.json I have a particular script the script called build prod basically I'm trying to say production build okay and there is a set of uh statement here NG build and I'm saying for the configuration take something called protection and then that's it output hashing is all don't worry about this okay even if you don't have us it's okay so configuration is production so where is this production configuration coming from that's the next thing go to angular do Json under angular.js on if you scroll slightly uh from the Top If you scroll slightly Down Under the art architect okay there's something called configuration so in this configuration the name here should match the name that you have provided in the package.json if you provide here PR which is Broad there also you provide prod okay the name has to match now basically we are saying under this prod this settings and all will be there if not just you can copy paste basically we just uh you know configuring few things on the build the important thing that you need to understand is the file replacement so I have something called file replacement I'm saying hey when you build this configuration take whatever code is here replace that with the code that is placed in this file so where is these two files now if we go to environment. I have a bunch of AD b2c configuration right so this is perfectly good when you do a NG serve which means it will take the conf configuration from here when you run the application locally all what I'm saying is hey uh you know don't take this configuration for the build because this is all having Local Host okay instead take everything that is in this in this file in this file I have all the configuration that is pointing to my protection application even the apis everything right similarly in a realtime project okay you will have multiple files like staging production QA and then Dev environment all of those things right they will have many files but to keep it simple we have only the local development and directly deployed version that we uh you know claim it as production so that is what that configuration is that's it after that the important thing that you have to do is you have to add web. config okay see this web. config is not required uh in the sense like not for the build purpose but web. config that we have it here it's important because basically this web. config file talks about certain security headers for protecting the application as well as important thing when you navigate for example this is our application right so when you navigate to different Navigation in local it will work but in order for you to work this one in the in the the deployed version for example if I come here and click enter it will go to that place if I refresh it will go to that place but in order for you to work those things in the production you need to have this basically we are setting a rule we trying to make is understand that hey when this kind of URL comes don't think that this is a file this comes put them back to index. HTML and then angular will kick in angular routes will kick in angular noes what to load here that is what basically this file is okay I have a separate video for this uh I'm I'm pretty sure a lot of people are using it but I wanted to mention it in this video itself so that you know what is added as part of this deployment so this is added some configuration here and configuration here other than that all of the code that is inside doesn't matter if you have your own angle application it really doesn't matter you can have your own stuff the important thing is to add these kind of configuration before we step into the cicd pipeline now the code is ready the code has been um you know put it into the GitHub repository great now but I'm not going to use the GitHub record okay instead I'm going to use Azure devops if you log in to dev. you.com I have logged in using my email ID learn smart coding and then we probably we can have a separate video about uh demonstrating what is this Source control you know um it's a replacement it's not basically replacement so let's talk about this what is this is Dev option in separate video basically this is like uh GitHub initially GitHub came later because GitHub was acquired by Microsoft but this asure devops was by default it is Microsoft stuff okay so I maintain all of my personal code in this um Source control so in order to uh do a proper demo so I have an organization under that there's a project for keep it simple for now don't worry I will I will put it in a separate video and then under that I have multiple repositories if I click on repositories I have lot of repositories right so I kept my e-commerce web application code in this repository and you can see all the codes are here okay whatever we spoke about the web config the package.json like whatever you saw that it is here now now here comes the cicd pipeline what is CI continuous inter meaning when there is a code checked in right in a realtime application When U people try to check in their code to the develop Branch or the realas branch right as part of the project development you need to build the code and keep it ready for the deployment right so that's why it's called continuous integration CI CD means continuous deployment continuous deployment means after the code is built and ready we need to deploy it to the next next environment to test okay that is what continuous deployment means so our goal is to first set up that if you click on this repository you're here and then something called pipelines click on pipelines and here a lot of pipelines are showing because it's all my pipelines right I created it so for you guys it may or may not show that's absolutely fine but click on new pipeline after you click on new pipeline we can do some classic way of doing but the easiest way of doing is using the yaml file that's the latest uh you know Trend or easy to easy to do I would say right so I will choose a repo get up so basically my repository is here so I will choose this if the content is here we can still choose this to build the code okay that's absolutely good so I'm going to show you here so I click on this and then it is asking me which project this project so and then I I will just choose this actually you can create the whole stuff from the starting but I'll explain you in a different way okay so choose this actually it will create a set of uh ins sections basically but see this one is not going to be useful for a rular project so instead what I'm going to do was I'm going to replace this with certain piece of code and explain you okay all I'm saying is trigger trigger is uh I'm I'm telling in giving instructions to the GitHub like the I should have op that for the pipelines basically I'm saying hey trigger this when there is a code merge to the main branch so I'm then I'm saying use this UB to latest OS as the uh VM image okay and then there's a variable set variable is basically production because the production is a variable that we use right so production variable and then Here Comes The Script see how do you build in your local when you download the code you will first do npm install so that all the packages are installed so we also do that npm install is the first step then we are saying npm run build BR which means npm run build prod basically we are trying to run this configuration it will run the configuration it will generate the output files after that it is uh you know artifact name it is basically creating a folder called angular app and creating the um the published files that's it this is the build uh what do you call this is the process to build the code okay now if I do save and then comment message see it's created a file uh basically uh created a duplicate file because I'm using the same repository that's fine I'll clean it up later so I will do a run pipeline I can select the main branch and run it and it is running right so in few minutes the build process will be completed so you can see whatever we gave that is what has come here and based on this only it is generating the files okay because the application is so small the build will not take much time the installation alone is taking a few seconds but this is every time it will happen see the build is done it is creating the artifacts as a zipped file so let's wait for a few more seconds it will be done now build is ready okay see finalized the job now we have the code that is ready to be deployed deployed means copy paste to the uh place where uh it has to be it has to be run right now here's the thing next thing is go to relas click on relas and then you can create a new release pipeline so let me choose first a folder so in folder way I will create a new folder so I'll create a new folder by going here new folder and I will say I'll just create a folder like this okay under that folder I will create a new relas pipeline see the moment you click on this new relas pipeline okay you can actually choose this that's absolutely okay for now okay it just creates it but the important thing that we need to choose is add an artifact see the moment you click on add an artifact it will show you which project it is okay choose the project right now there's only one project and then choose the repository or the build okay so here in our case it is this one right this one this is the one which we created and then it has the code and then say add okay the artif effects has been linked now now click on this task and then we don't need this task remove that click on ADD and then search here FTP FTP upload so the moment you choose FTP upload click on ADD and here is the details okay so there is a FTP connection that you can generate like if you if you choose FTP connection you can manage FTP connection here so if I click on manage it'll take you here you can you can actually create a connection here new service connection or you can also choose enter credential and why do you get this service URL username password all this root folder all of those things right so basically you have to go to this place wherever your application is there so in our case application is here and then in the sure you have something called download profile a publish profile click on it it will download let's open this all right so if you open this you see this publish URL FTP access is here this is the URL and then let's copy this so URL username is here password is here and then and then for the root folder click on this you see this you'll be able to select from w the application content is coming this is the build content you can choose this and then instead of upload you need to choose SL site SL ww root under ww root only we will going to deploy it so everything looks good and then you can actually save this you can name it so you can just give a name and then you can come to this Pipeline and click on this one okay this is what called continuous integration so we are saying we in it whenever there's a new build you know trigger a release build that is what it is okay so this is um this is what we're saying so build is ready start the release Pipeline and deploy it after that we are good save it under our app demo we saved it now we can create a relas and then if the stage is not good you can actually stage a name protection okay you can name it that's absolutely fine and then if you try to create a relas pipeline you can choose and do a create so you can do a create by choosing this and create the moment you create it will create the release Pipeline and it will take and deploy it so for the first time alone you probably have to deploy it but every time it is having a new build it will automatically deploy it now I just wanted to show you one more thing if you go to our release Pipeline and edit right so if you click click on this right you can set up uh now what has to be done after before the deployment so you can say pre- deployment approval you can enable it you can put your email ID so it will trigger an email so until unless you approve it it won't deploy all of those things you can set up here okay so I don't want to set up here anything now but you can do it and then uh this is post deployment so in post deployment also you can actually so in post deployment also you can actually trigger an email that deployment is completed and all of those things okay all right so we're good so this is how you set up the angular application deployment so this is uh a part of the e-commerce web application so that anyone sees in the future as a full development stack they'll be able to do both API and web application all right all right guys if you like this video do subscribe to my channel I'll see you in the next video share this with your friends and uh see you bye-bye thanks for watching if you found this video helpful please give it a thumbs up And subscribe to our channel for more Tech tutorials and don't forget to hit the Bell icon to get notified when we post new videos if you have any questions or suggestions leave them in the comments below happy coding

Channel: Learn Smart Coding

Views: 1,795

Keywords: Angular 16, Angular App Deployment, Azure App Service, Azure DevOps Pipelines, CI/CD Pipeline, Build Pipeline, Release Pipeline, Code Source Control, Azure Deployment, Continuous Integration, Continuous Deployment, Angular Development, Azure DevOps Integration, Deploying Angular 16+ App to Azure App Service, CI/CD with Azure DevOps Pipelines, angular dev series, how to deploy angular app to azure app service, angular 17, devops repository, azure, ftp upload to azure

Id: eSDbhH6ry7Q

Length: 16min 10sec (970 seconds)

Published: Mon Mar 18 2024