Easily Create and Deploy an Angular App From Visual Studio Code to Azure App Service

hello and welcome to our Channel my name is balram Prasad in working with Microsoft as a senior software engineer in earlier video we have seen how to create react app using vs code in the how to deploy that react app to Azure app services in this demo we are going to see how we can create a angular app using vs code and then we will deploy it to app services so first we need to know that node is installed on our machine or not so I am going to type a node in command Edge version I have version 18 installed and then I am going to say npm I want to check that npm is also installed or not I have 9.5.1 npm if you do not have you can go then you can go to node.js official site which is a node.js.org where you can go and download the installed node it will install also npm if you do not have npm then go ahead and install npm also so now let's go back to our BS code now I am going to run npm install at angular CLI so that command is npm install add at the rate angular cly so let me install that once the CLI is installed I am going to run another command called NG and new new is for project and project name so I for project name I am going to give that soft switch angular demo so I am going to run this command so it is going to ask few questions about usage of data I am going to say no I am not going to do that would you like to use angular routing let's do that so now it is asking about which style sheet format we want to use so we can select depending upon this one so I'm going with CSS right now now it is creating all the folder structure and then installing required packages and we can see that one folder got created here my default directory is surface demo then now we can go in CD to our project foreign there are folder structure where source is there where app folder sets and other details are there TS config this is type based on type script and other things so we can see all the details and then if we have seen our earlier video for react react is also project structure and other details is quite common that we have all the details so this is how this project look like right now and if we go inside app and we will see that app.component.html and other things we can see all the details is here we can go in more details and we can see all the details for that after we went into our project folder I am going to run another command called NG Serb which is going to start our web server and then it is going to browse our website so it is doing that when it is doing all the bundling and other things so let's wait for that you can see that compilation is successful all and angular live development server is building listening on this one so once we click on this page we can see that our page in angular is coming and we can see more details the title is coming from here I can go and say that let me format that one it will go and update that one then also if you wanted to change anything here like like anywhere in England material and other things so we can go and let me remove that you can see that angular on Twitter and other things is coming from here so I am going to just remove this one so that we can say edit is working title is coming title so title app is running so we have seen that now let's go and remove some more things so that next step I am going to remove this all and these are the Syntax for uh HTML itself s2p and other things we know that this is basic Syntax for the stable so now we can see more details about angular and other things which is here that component wise it is importing from component and other details as soon as we go in writing the command for that one NG models another thing it is going to start but basically I want to just give that how to create a basic app and deploy to app services so now if we go and see now we can see that update is coming here and this all this removed YouTube a gun and all the shop whatever other stuffs was there in that page that is also sent out and this is how we edit any application inside angular and we can learn about more about emular and other stuffs but now I'm going to add one file called web.config before I will move ahead so web.config I am going to add inside SRC folder let me see that config and then I am going to copy the details about which can be interpreted by Azure apps Services server so this is going to say that about what is the static content in whatever mime type and other things and what is the routing rules and other things is there so that is what right now for this web config once we are done with that one we have to go inside Json and then here if we see that what is the buildings happening and other things so we have to sit this uh settings also SRC and web dot config double quotes so I'm saving that and then I am going to stop this one and then I'm going to run one more time to see that after adding web.config it is running fine or not so it is run it is trying to run so let's see that okay so after the web app is coming now I am going to run in the command called NG build which is going to generate a build for this application and if we go inside a project folder where we have this project folder reactive now it is going to create one folder also now we can see that it is saying that all this folder is generated for build so let's see that here is the distribution folder and this is the all the build is game so now we can go ahead and try to create a web app and deploy we can use existing web app also but I am going to create a new one for this demo so let me create that I'm going to take the advanced one and put the name software demo and let's use a new Resource Group name which is software demo it help I am going to use note 18 version we have seen and windows is so if we see right now before going to that our subscription and inside subscription let me go that and inside Resource Group let's see that I do not have something with angular that is what I wanted to show you so let's go back to our Visual Studio code and app service plan let's keep that Ambler only and then I'm going to that free one right now I'm going to not be using any application inside resources so I am going to skip for now now it is going to create web app now we can see that this web app is created in deploy pop-up is coming and if we go inside that let's see now now we have an RG for that one if we go inside that origin refresh that one in some time we should be able to see one web app also it is right now not coming here now it came and now we if we browse that one we should be seeing the default web page of azure we can see now we can go and see the deploy and it will ask which folder so I am going to browse that and I'm going to browse that this is the distribution folder and this is what folder I want to deploy I'm going to say yes let's see in output section Ed so it's okay and go into app Services now I can see this angular one I can see that deploy web app and it will start deploying is saying we can see some output is coming so let's wait for some time and then we can see that what happens now we can see this deployment is successful now I am going to browse that website and now we can see that our angular app is deployed to Azure app Services right this was job.ly and so now we can see that so this is how easily we can create a angular app inside Visual Studio code and deploy from Visual Studio code to app services later once we test in other things we can check in this code to our Azure devops and set the cicd and other things that we have seen how to set up cicdport.net code we will see sometime for react and regular also I hope that this video is useful if you are trying to deploy or create any angular app thank you [Music] foreign [Music]

Channel: SoftWiz Circle

Views: 3,055

Keywords: deploying angular to azure, deploy angular app to azure, azure app services, deploying angular app in azure, deploying angular app to azure, how to deploy an angular app to azure, deploying an angular app, angular to azure, deploy angular app to azure vs code, create angular project in visual studio code, create angular project in visual studio code from scratch, create angular project in visual studio code step by step, host angular app on azure, microsoft azure

Id: d0xsw54fqFA

Length: 11min 12sec (672 seconds)

Published: Wed May 31 2023