How To Deploy Angular 14 .Net 6 Web App To Azure FULL TUTORIAL!

welcome guys today i'm going to be showing you how to push to azure angular14.net 6 web app this web app also has a sql database attached to it so i'm going to have to create all three things in azure so the angular 14 client the n6 api and the sql server sql database instance the project i'm going to be doing for this is from this video right here there should be a card that pops up and the thumbnail image which is where i created this angular14.net 6 app and i showed you guys how to do that and also talk through some of the angular 14 big updates uh so if you have not seen that video and want to there should be a card that pops up up here and go check that out and then come back to this but if you have a project with a similar structure or you're just curious how to push a similar project to azure well then stick through uh and we're gonna dive into how to do it next all right guys now that we're at the code here you can see i already have the api running and i have the front end running as well just wanna quickly show you guys uh kind of the local version of it so the local version is gonna just kind of look like this so we just have you know two soccer players this is the front end and then this is the api with the get players post put and then this delete method these are the only four that's all we have in the database all we have is this one table called player and if we edit it we see we have a two you can see that we have one and four as player ids because we've created and deleted and done edits already so that's why they're player id that's why there's no two and three but now how do we do this and move it all to azure so let's go ahead and start with that i'm gonna first stop these from running and now the first thing we're going to have to do is i want to go ahead and create the resource group and then i want to start creating the web app for the api and then from then we can move on to doing the sql server before we push the api why because once we create our sql server in our sql database we're going to need that connection string in our project before we publish so i'm going to go ahead and create a resource group not here resource group create i'm just going to use my azure subscription we're just going to call this rg1 central review and create so our resource group is created now i'm going to go ahead and create my web apps so we're going to go create create web app down here now this is going to be the api first so api first that means that i'm going to do this soccer player api since that's the name kind of of this project the soccer player api so that's the back end and i want to specifically say that this web app right here is for the api not the front end so um we're going to do the code we're going to select dot net 6 as the run times go to windows central um i'm going to change so this is where you set your plan and memory and all that stuff i'm gonna set the free so if you just want to test you can go down here and just say this shared it's just free but obviously if you have like a real world project then you know you mess around with this stuff but i'm just gonna go with the free version because i do not want to get charged for this tutorial um and then we're just gonna review and create because i don't need any of the other stuff and now let's create and it'll take a few seconds and then we'll come back so as we can see here the soccer player api was created so we have this web app but it is currently empty we have not actually pushed any code here um but the next thing i want to do before we move into publishing the api doing any of that is i want to create our sql database our sql server instance in azure so that we can have something for this api to you know connect to we don't obviously want it connecting to like our local database that would make no sense we would want to make a sql database sql server instance in the cloud and let's go ahead and create that so we're going to go to sql databases over here we are going to create a new one i'm going to select my resource group and then i believe if i don't have a server degree i'm going to have to create a new one so my database is just going to be sample database since that's just kind of what i called it over here we're just going to do that nothing too fancy then we're going to create a new sql server so you create press that create new and then creates database instance so our server name i'm just gonna call it um soccer player youtube server it has to be all lower case uh no hyphens um and then you select your region i want to use just i think sql authentication is fine um i'm not gonna do too much i'm just gonna do a server admin login and then this is your password right here once you have that press ok and remember those credentials because you're gonna have to use them in this next step coming up so once you have this you're gonna see your server pops up here i don't really need elastic pool right now i don't need anything super fancy here i do kind of want to go for this basic because i am just doing a tutorial again i don't need all the space but if you need the space and you can calculate that then you know those are those service tiers for you i'm just going to do the basic because i do not want to get charged and then i don't really need a lot of different types of backups this is basically just if obviously there's like a failure at where these servers are housed um then you could switch to like another backup that is stored somewhere else in the country or somewhere else in the world and you can always have a database available so it doesn't go down if there's like a natural disaster or something but right now i don't need anything fancy we're just going to create this okay so now that our database is created the next step that we want to do is we want to get the connection strings to actually go and create our tables on this database through ssms and then we also want to get the connection string and put it in the api so that when we publish it it'll publish with the you know production connection string so we go here and this is going to be the actual connection string as you can see it's going to put in that username for the sql authentication that we used and then right here it has this like bracket your password so when you put this in the api you're just then gonna fill this in with your password so i'm gonna copy this and just go ahead and go back to my project so you see we have this default connection i'm gonna go to my app settings i already made this prod connection right here you kind of just paste this in here and once you do that all you have to do at that point is fill in your password right here i'm not gonna do that on this because i don't want you guys to see a password that i use um but that's all you guys have to do and then all you do is you then take this go back to your program and replace it here and that's all you have to do to then get your prod connect connection going and then you for whenever we publish in just a second so now that i have my connection string set up in the api now i actually want to connect this database in ssms and actually create and script the tables in so i'm gonna need this piece right here from the tcp to right here i'm gonna go ssms i already have these are my local tables so like i was talking about this is the table that i need to create so i'm gonna connect we are going to throw this in here don't need this so then this is the azure sql server instance that we are trying to connect to and then we're going to switch the sql server authentication and we're going gonna put in the credentials that we signed up with and if you want easier connection you kind of remember this password it will keep tabs on like other connections that you have so you won't need to always be putting all of that in up i'm just going to connect to this it's going to ask to sign in with your microsoft azure so whatever account that you use um to connect to your azure it's just gonna you're just gonna sign in it'll autofill and you add this and it's basically just to allow you to actually connect to that azure instance we're gonna see that the sample database was already created but we have no tables once it expands you're gonna see there's no tables um so what are we gonna have to do we're gonna have to create this table over here yeah see no tables so how am i gonna do that very fast you're just gonna right click script table as a create to open a new query editor it's going to generate the script so there's a script you need to create that database or to create that table and the reason i kind of just left it the same name is just because it's just going to use use blah blah blah whatever database it just makes it quicker so what i'm going to do is now right click the azure database i'm going to do a new query and then i'm just going to grab this query and throw it over here and then i'm just going to execute it boom now i refresh this and we now have our player table here if i look at the design you're gonna see that we have the exact same setup as we did on the other one this is going to take a little bit because it is connecting to a newly created table in azure as you can see the design is exactly the same as if i click this one they are both exactly the same let me put them side by side exactly the same so you don't have to set up anything if you already have the table set up here you just script it quickly and then you just kind of move on um i will not have any entries though let me close all of these i will not have any entries in the database so to just quickly have at least one entry so that whenever i actually connect everything in azure since i immediately call get all players we'll have an entry and we'll know if our table is working or not so what i'm going to do is i'm just going to create neymar really fast 10. cool so we have one instance in this table already so our database is set up now with the table everything we're going to need for the api so that is set up now so now let's move on to publishing the api to azure and getting all that working okay so now that we have our sql server all set up now let's move on to actually pushing our api to azure so there's a few ways you can go about doing this if you go to your project in visual studio you right-click it you click publish you're going to see that it's going to bring this up and then you are going to have a few different options you can use iss you can use ftp um you can just go straight through kind of the azure way the way i like to do it so i have a little bit more like personal control or just the way i like to do it as i i like to use a publishing profile so how do you get a publishing profile go back to azure you're going to click this get published profile right here this is going to come with all the settings that you need to push here and it's just the way that i like to do it and it's just very simple so where did it go close this window i just want to put i just like putting it on my uh desktop so we're going to see that our settings are right here so now what do i need to do i need to go back to my project add a publish profile i'm gonna click this import now i'm gonna browse i'm gonna find it on my desktop yes you're gonna see that i have video games so this is my publishing settings now i want to finish it's going to create everything that it's going to need based off these downloaded settings and you're going to see that it has everything just right here um so basically it is ready to publish now so i'm going to see my pride connection is set up correctly um it kind of just gets everything it already knows where it's going and you don't have to set anything up it just autofills and this is kind of why i like it and i have control and it's like set up in visual studio now where i can just automatically just keep pushing there if i need to so now let's actually just publish that's what we're gonna need to do okay so as you guys can see the api published successfully obviously we don't have views on this so that's why there's nothing here but if we go back here it says publish succeeded you can kind of look at the output if you need to if anything went wrong but everything says it's published correctly so now what i want to do to test does my api work does my sql database work i want to use my azure front end or i want to use my angular front end and i want to connect and try and hit the azure api hit the sql database in azure make sure that connection works before pushing the client side up so how do we do this well now that we have this we're gonna need to go back to azure we're gonna need the connection string or the url for the api so that is gonna be right here so we're just gonna copy this now i'm gonna go back to my angular project so i'm inside the soccer player api client app right in here so we're gonna go to our environment and as you see in our environment dot ts just for like local you see that this was the api url that we were hitting so now we basically want to grab that and i'm gonna have to recopy um but so here we're gonna do this and now we go back copy this again and then paste over this part because now this will be the new endpoint that we're going to need and then to actually run this locally with the production environment kind of flag what you're gonna need to do is you're gonna do ng serve and then you're gonna do dash dash configuration and then you're gonna type production this is gonna execute this file let me find so in this angular.json you're going to see your configuration script right here and when you do production it's going to it's going to replace environment.ts with your environment.prod.ts so that's how you're going to be able to run this locally not obviously with the production but here locally and then whenever you're actually going to push you're just going to do a build with this configuration and then you're going to push that disk file up so locally let's just run this so we can get it running locally with the you know production url obviously it says don't use it for production okay our angular project has built now with that same production environment so we're going to open it in localhost and we're gonna see that nothing's coming up nothing's coming up why is that let's inspect let's go into the back end we're gonna see that we have three errors so we're gonna see that the origin localhost 4200 has been blocked by course policy i know if you guys remember and if you watch the other video you guys saw me add here in the program that we're allowing this origin so while this does work here azure also has its own course policy so we're gonna have to go into azure and make sure and allow localhost 4200 to be able to do this in azure so because it's obviously gonna block like the same javascript settings the same thing that it's doing it was doing here locally we're also going to do that in azure so it's very easy to set that up let's go there once we're in the api we scroll down here to course and then all we have to do is we can actually just grab this throw this here get rid of that slash and then now boom we should have localhost done so this should allow this origin to hit the api for the purpose of testing so now let's just empty cache and refresh and we're still getting an error so now what is this error i go to my network it still has not finished executing okay so now we're seeing we're having a 500 internal server error so these can be a little tricky if you don't know the right place to look but we are getting this error so something inside the api is now the problem it's not it's not blocking my client my request is going through now something inside the api so this is where it can get kind of tricky if you don't know where to look so let's figure out if we can figure out what error this 500 actually means and to do this i want to go back to my api we're going to scroll back to the overview and let me see if i can find i'm looking for the application insights because i want to be able to see let me see application insights yes so now i've made it to my application inside so if you didn't see what i clicked application insights down here view data and now we're here so once you get to your application insights you're gonna see that you have some failed requests and you should be able to click in here and see what the actual errors going on in my case i actually do know what the area is for some reason yet this was working for me yesterday i do not know why the error code is not popping up correctly for these failures because as you can see it does correctly say that there was failures i do not know why they're not appearing here but when you have these errors it should pop up with the response code then if you click in them it will show you what the actual error is in this case when you create a sql server there is a firewall between your api and your sql server and if you don't tell it allow this origin or this ip address through then it will block it so what to fix this error which it should tell you here so i hopefully when you guys do it it does show you because it was showing me last night i don't know what it's doing not doing it now but it should uh you just need to make a firewall policy to allow your api's ip address to go through so now let's go do that and fix that so we can actually make the full connection from our local client all the way through the azure azure api and then the azure database so let's go to the sample database we are going to set server firewall and now we are just going to add a firewall rule so i'm just going to say soccer player api and now we just need the api address or the ip address for the api so i'm going to go back to the api and where is the ip address that is what i'm going to need to find and when i find it i'll be right back okay so i finally found the ip address you just scroll down to custom domains and you should see your ip address right here you're going to take that you're not going to go back to here put it in both okay and now you just save now we should be able to successfully refresh the localhost and it should connect all the way through and actually pull that one row of information that we have that is neymar right out of the database so let's go back to our client let's refresh and as you can see it is now fully connecting so our localhost is able to hit our api and then our api is able to go to our azure db and actually get that one row of information so now let's actually put the angular project in azure and if you guys remember whenever we publish our angular app to azure azure is gonna give us a new url so we're actually gonna have to put that in the api and in azure so that we can make that connection without cores also blocking us on that so keep that in mind but now let's move on to how to push the angular part to azure and let's make that full connection now okay so now that we have our api and our sql database all set up now let's actually push our angular side our client side let's actually push that out to azure as well so we can have that full connection so we're going to go back to our resource group we're going to create another web app same stuff and now we're going to call this soccer player client that's not useful client now select the runtime stack i'm going to select node 14. windows should be fine and now central us and then the free infrastructure i'm going to use it again and now this review and create and create and i'll be right back when it's done okay so our deployment is complete we're going to go to the resource we see that we got this new url right here so since i mentioned earlier that cores would block another origin that's not instinct let's go and actually add that to cores so i'm back at the api this is not the api app services api so back at the api we're going to go to course and i'm actually going to just add that url and save so now we should have the client side actually working so now that we have this let me just refresh this okay so now that we have our client set up we have the url of the client in cores for the api so it doesn't get blocked now let's actually push the front end to azure so the first thing you're going to need to do is you are going to need to download um the azure plug-in so you will need to get the azure plug-in for this so if you go i believe and go to extensions and then go download the azure app service so you're gonna need this plugin you're gonna need this plug-in once you install it it's gonna be right here and it's gonna allow you once you sign in to see all your subscriptions so as you guys can see you're going to see that i have my api here and my client so we're going to want to push to this but i suggest first you do an ng build configuration equal production that'll allow the production url which is actually going to be this to be created for that dist folder so we're going to run that really quick okay so now that that is done and we have that now we can go to our client and deploy the web app so you're not going to want to push this because this is going to push every single file in here we only want to push that this folder so you click browse you go to your api we're going to go to the client app inside the disk and we're going to pick this client app folder which is the disk folder with the application in it and we're going to select are you sure you want to push yes you want to deploy you can click to always deploy that folder but you never know so just leave it and now let's deploy it and i'll be back once it's deployed so as you can see right behind my image let me close myself it says that it's been deployed successfully so now let's go check it out let's check out the client now so now boom i opened it and immediately it gives me that it's running it immediately sends this back to me and if we look at the network let me refresh this look at the network you can see that it is hitting soccer player client azure api and you can see that the request api is coming from soccer player api backslash api players.get and that is coming straight from all the way back here from the azure so now we have our angular client in azure we have our api in azure and we have our sql server instance in azure as well and if we want to just check out that all the other stuff works let's do this and let's refresh our changes jersey 11 let's add a player base 7 create and this was the same issue that i had with my front hand not refreshing but uh right there boom we have it we can go back here and we can refresh our table we can just select our top 1000 rows and we're gonna see that everything was created successfully our edit was successful and now if we delete it should also be successful boom so everything's working this is running in azure the api is in azure the database is in azure if you enjoyed this video and found it useful please drop a like and subscribe so you don't miss any of the other wonderful content and maybe you're a developer and you're still learning and growing are you just curious well this video right here will tell you 10 things that i think are very important for every single developer to know

Channel: Israel Quiroz

Views: 13,836

Keywords: angular 14 .net 6 api, .net 6 api angular 14, asp.net core web api, .net 6 api, angular, .net core, angular 14, angular 14 tutorial, angular 14 web app, angular material, angular material 14, entity framework, deploy, how to deploy angular project to azure, angular 14 .net api to azure, c#, azure, angular dotnet to azure, how to publish angular project to azure

Id: u_CRppLcC9k

Length: 24min 15sec (1455 seconds)

Published: Sun Jul 10 2022