The Simplest Way to Deploy an ANGULAR App to AZURE in 2023!

welcome in guys and let's just Dive Right on in on how to deploy your angular application to Azure so first as you can see you're gonna need to have some type of angular application I'm going to use this angular 15 application which as of December of 2022 is the newest version of angular and if you are not sure how to actually check what version of angular you're on you can just go ahead and run ngv and then something along the lines of this should pop up for you and it should show you kind of what versions of angular you are running and if you want to upgrade then you can just go ahead and look for the commands to update to the newest version or whatever version you actually want to do so first of all I just want to do an NG serve so you guys can actually see what type of application I have locally so that then we can go and at the end of the video compared to what we end up having in Azure so right clicking localhost here we have the tab open up and we see that we have localhost 4200 and we can see that we have this World Cup teams we have ad country which is an angular material button that brings up an angular material dialog uh we have a drop down list here and we have a table with no values in it but as we can see the angular material is working the angular app is working as well so now that we have that here let's go and create what we're actually going to need in the Azure portal so now that we're at the Azure portal let's start to create all the resources that we're going to need to be able to then publish our angular app to Azure first things first you're gonna need to have some sort of subscription whatever it may be but once you have that you then need to go and create a resource Group so click right here and then click create now once you're at this page make sure the subscription that you want to use is selected then name your resource Group something I'm just going to call it rg1 and then select whatever region you want to be in then go ahead and click review and create and then create again this should take very little time to actually create then once it's created should let you know up here go to your resource Group and now we can go ahead and actually create the app service that is going to host our angular application after creating the resource Group you can go back to the home page and now we are creating the app service so go up here click the app service and create now that we're at the create web app page we need to make sure the subscription that we want is selected here then select the resource Group we just created now let's name our web of something I'm going to call it sample angular app YT then we need to set code as what we're publishing runtime stack is going to be node but depending on the version of angular that you are using you might need to use a different version of node so just check that out in the angular documentation then our operating system is going to be Windows your region whatever you want your windows plan and pricing plan is whatever depending on your needs and your budget for this tutorial I'm going to set it to free now we want to review plus create and now create and I'll be right back when it's done once your app service has been created we now need to go back to our project and now that we're back at vs code we need to set up vs code with everything that it's going to need to directly publish our angular code to that app service we just created but right before we go do that if you found this video helpful up until this point I would appreciate it if you dropped a like on this video so it can spread to other developers on YouTube thank you but now moving right along the tool that we will need to install in vs code clicking on these little extension blocks right here we are going to need Azure app service this extension is going to be the tool that allows us and facilitates US publishing directly to the app service that we just created once it's installed you should be able to see it right here once you're here if you're already signed in you should be able to see your subscription and if you expand it you should see everything that you have in here just like you can in your Azure portal and if you're not signed in go sign in with the same email that you use for your Azure portal but now that we're here you should be able to see that app service that we already created but right before we go ahead and actually publish and deploy to web app we want to go ahead and make sure that our this folder has the latest production build and has the latest code because that disk folder is what we're actually going to publish to Azure so go ahead and run a quick NG build and now that we ran that NG build go back and just check in your files make sure that you have a disk folder right here but now we can go right back here right click and now we're ready to publish so click deploy to web app you should see this kind of search bar you click browse then find your disk folder click in and you're going to want to select your project named folder why this one and why not dist well if you select dist you're going to have an error in Azure where it's not going to be able to properly find the root of your project and it's going to cost some issues then you're gonna have to manually go in and change it so just select this and save yourself the trouble select it and yes you want to deploy this and we'll be right back when it's done and once it finishes deploying you should see a little message down here that says as it's completed now you can go and click on browse website and that'll take you right into Azure and open the URL where your website should be and if it published correctly you should see your application just like at the beginning of the video what are we seeing the same application that I showed you guys at the beginning when I did an NG surf so if everything works correctly you should be able to kind of just do and click around and do exactly the same thing as you did whenever it was local but let's say that when you deployed you're here but you're not seeing anything there's some type of error well if you want a quick error check you can check your console and see if it's not throwing anything but usually these messages won't be very useful so what you're going to want to do is one of two options one you can go back and then right clicking right here you can actually start a remote debugging session and it will actually allow you to debug from right here so it's going to open up a little debugger and you're going to be actually able to trace down and follow along and debug your application in Azure the other way that you can do this and actually get detailed error messages is going back to your Azure app service clicking diagnose and solve problems and then going down here and you're going to want to select application event logs this will load and actually list every single event and especially if there have been errors or anything you will be able to click in and actually see the error message detailed so you actually know how to go ahead and fix it but with that being said guys that is how you push an angular 15 app to Azure and if you want to have your own angular 15 application to then push to Azure you should watch this video right here

Channel: Israel Quiroz

Views: 5,950

Keywords: deploying angular to azure, deploying angular app to azure, deploying angular app in azure, angular, azure, deploying an angular app, how to deploy an angular app to azure, angular to azure, Host Angular App On Azure, Host Angular App On Azure 2023 Tutorial, Deploying Angular App To Azure 2023 Tutorial, deploy angular app to azure, deploy angular 15 app to azure, angular 15 app to azure, israel quiroz

Id: S4VqVCdAyAo

Length: 6min 37sec (397 seconds)

Published: Wed Dec 14 2022