Deploying Blazor Mini Course: Creating an Azure Web App

deploying Blazer is really easy but instead of me just showing you a few magic steps we're going to break down the deplant process and understand each piece well that way you're prepared to use each step in the real world with a real project this be a small series of videos this video will cover say up an Azure web app in the portal including understand the pricing and configuration options we'll also create GitHub repository that will add a small Blazer application too this will set us up for our next steps including automating our deployment with GitHub actions updating our connection strings and add a custom domain name to our site at the end of the day you'll have a fully deployed Blazer application in an Azure web app with a custom domain name with connection strings that are pulling right from azure now before you dive in I want to share a few things with you first if you're interested in improving your c-sharp skills be sure to subscribe to this Channel with over 500 c-sharp videos and Counting it's the perfect place to learn and grow your skills second if you're looking for free c-sharp resources head over to www.imcorey.com and check out the resources tab you'll find my podcast c-sharp products page and much more there and third if you're ready for a deeper dive into a specific c-sharp topics I have a variety of courses that can help not only will you receive a world-class education but you'll also help fund my free content so that everyone can have a great education on c-sharp not just those who can afford it so let's Jump Right In but instead of the visual studio today we're going to jump into GitHub first we're going to start here we're going to build out our sample project and then move over to Azure and build out a web app so let's start with a new repository and let's call this Blazer deploy and this is knocking public I'm not going to publish this repo um I will give you a source code for you can download the link description but I'm going to delete this repository that's why I'm not talking about public I don't need to have it clogging up our our repositories so this is just a sample deployment there we go deployment site how about that and I'll make it private add a readme and we are going to add a ignore for visual studio and when I use Visual Studio or vs code or even jetbrains writer this is the template to add for a c-sharp project is the visual studio gig ignore file really the license alone none and create the Repository so now we have our repository it's simple it's easy we have it two files gig ignore and read me so I'm going to go to cop code and send my copy the https version and then we're done for now on this site so let's go ahead and I'll move this off to the side just so we have it in case we need it later and I'll bring over a a Powershell window in the C demos folder I'm going to say git clone and I will paste in that URL and hit enter it's a clone that URL and it's going to clone it into the CD Blazer deploy folder so now if you look here there's nothing in here except for the kid ignore it in the readme which is great uh we can say though clear screen say.net new slm what this will do is it will create a new solution in this folder which is what we want because we can just double click it open it and start using visual studio so let's just do that it's gonna if I don't give it a name notice it's trying to prompt me or say hey do you want a name for this we're not going to add that name we're just going to say.net new sln it creates a new solution for us and if we look in the folder we have laser deploy and now we have our readme our get ignore and our our Blazer deploy solution let's open that up and now in here we've got our solution notice our get changes it says hey there's a solution here but let's go ahead and right click and say add new project and we'll create a Blazer server application let's call this simple Blazer app hit next dot Net 7 https and hit create and now that this is done we have a simple Blazer application that should be up and running let's go ahead and launch this just make sure it is working we're gonna make a couple of tweaks of this just so we have something a little more customized to us but let's look and sure enough we have our our hello world we have our counter and that works we have our fetch data and every time we come back to the page it changes the the data has been fetched which is uh exactly right so let's go over here and actually let's um let's actually let's um come down here and well let's just resize it manually I don't have the Zone snapped here so I'm just going to do it manually but I want to bring this page over here so you can see that in fact it does automatically update so let's go to the home page and then let's go over here at pages and go to index and let's change something let's get rid of the survey prompt first and we'll hit save and notice over here that when I come back to this page and look at the the survey prompt goes away because that's the hot reload for Blazer and we're going to change this to say hello YouTube and let's get rid of the Welcome to our new app where I'll put something else there instead so there we go hello YouTube we're gonna put here is I want to put a a paragraph with a class equal to H4 and in here must say default connection string I'm going to put a value here which I don't have yet so let's create a value of that code where I say private string default connection and let's initialize this to a value of empty string and then we're going to say protected override and we'll say on initialized we'll get rid of the base Dot initialized and so we're going to say that the uh oh we have to inject something too we should say uh inject this is depends the injection where I say I configuration we'll call as config and down here we'll say default connection equals config got dot uh get connection string and we'll say that the default connection string let's unpin this you can see the whole thing here now if we do this like so we get this green squiggly saying hey there's a possible null reference assignment that's because if there's no connection string like there's not right now this will return a null value but because we have not marked this as nullable it's given us a warning saying hey you might be getting a null value we did not expect to get a null value so that's true we don't expect to get a null value therefore we're going to undo uh the null coalescing operator and say unknown that way if it is a null value we'll put unknown in a connection string instead that way we know um that you know we didn't we couldn't find it and in fact if we save this we have to rebuild and continue um let's let that run from it wait for it to start and there we go it's not saying any connection string yet that's because we haven't actually put it on the page let's do that by saying at default connection save that come back over here it says unknown because we have not yet assigned a value this is where that null coalescing operator is helpful this is where the null checks are really helpful because if I if this was not doing null checks then I wouldn't have remembered that this could be no and we had a null value here so let's go over now to our connections during our app settings.json put a comma here and say connection strings and we're going to say default and we'll say this is from app settings.json so this is not a real connection string this is just a show-off the fact that we have a connection string coming from from somewhere now it does not actually track the um the changes from app settings.json with a hot reload but Now default connection string is this is from app settings.json so it's actually pulling our connection string now while I want to pull a connection string because I want to show off the fact that we deploy to Azure that we'll be able to change this connection string automatically without having to do anything even in our build process so we can still use the local connection string for our local SQL server or whatever but then when it goes to the server it can change it to the the production version of the connections so again we're not going to connect to SQL Server that's a little bit outside scope of this video or a series of videos but what we can do is look at those connection strings and see how they can change as we deploy to a production environment so that's all there is for our site we have a working site it pulls the app setting.json connection string it says hello YouTube the counter still works the fetch Data Page still works okay so that's we have on the Blazer side but how we deploy this now we could right click on the project and say publish and then go through the steps of targeting Azure and so on we're not going to do that and the reason why because that works great for uh for a sample project for for a quick little thing you want to do and you can even save those now into a repeatable process but we're going to go over to Azure and set up a a GitHub action so that it's an automated process that's continuous integration deployment it'll automatically deploy right to our Azure website when we push to a certain branch in this case we're just going to work on Main Branch we're not going to worry about different branches we can probably do that in the future if that of interest if it is leave a comment down in the description or in the in the comments on YouTube and you know we'll think about doing that in the future okay so that's our site now let's go over to azure in Azure I have this blank dashboard with nothing in it so let's go ahead and create a resource we're going to create a web app so hit create now an Azure web app is is an interesting thing and it's a misunderstood quite a bit because they are much more expensive than just say hosting on a a cheap hosting platform and you know what for some instances that might be the best solution just hosting a cheap platform however there's also a free version if you want to go that Direction with Azure so you can actually get even cheaper but let's start and go through this and we'll talk about the pricing because the pricing is not for a website the pricing is for a web server where you can then put multiple websites so where I pay once for a server and then have quite a few websites if we wanted to on that server just to be clear here okay let's start the resource Group you want to create a new Resource Group because Resource Group names are free but what they do is they allow you to connect all the resources together so you're done testing you can delete the resource Group and deletes all these things underneath it even things that were created automatically so we're going to call this our uh our Blazer um our Blazer deploy group how about that just a scripted name this name is unique to your instance of azure so you can create whatever you want and it won't step on the toes with somebody else that created so Blazer deploy group is fine if you're going to create demo stuff I'd encourage you to put like demo in the name or um you know some kind of way to know I can delete this it's okay because it's just a demo so again resource groups are free I encourage you to use them whenever you're creating something that you want to bundle with other things so if you're creating multiple things that all work together create one Resource Group for so you know hey these things are connected okay Resource Group name now a web app name this is unique across all of azure so it's gonna be a little bit more complicated to get a name that works for you so if we have said uh Blazer deploy that actually works um I guess no one has chosen Blazer dash deploy for a a domain name or for a web app name so we're going to say we're going to use code to publish we're going to choose.net 7 which is this the standard term support where I choose Linux hosting not Windows hosting Linux hosting is cheaper and for net core or net seven um this is this is uh more of what it's designed to do is Linux so unless you have a specific need for Windows go Linux it's cheaper it's easier it's faster it's so many more things just do Linux now this is where we're setting up our server our app service plan so we're going to choose I'm an essential us so let's choose Central us and of course there is no plans currently for me again the app service plan is like a web server it's going to host our web site so this right here this Blazer deploy is our web site this is a web server that we're building now because we don't already have one if we had one we could just choose it from the list we're going to say create new let's give a name we're gonna call it the Blazer deploy um how about uh web server how about that okay and we're going to call this the Blazer deploy app just to be clear so now we have our Blazer deploy web server which by default they chose premium V3 which is expensive if you do a drop down here you'll notice that it is um 124 dollars a month now this is a production level plan but if you want a basic it's 13 a month and again remember this is for a web server that can host multiple websites so when you have a second Blazer server to deploy to deploy it to the same web server for free it's no no additional cost so this thirteen dollars a month will will cover one one app like we're deploying up here but we can deploy a second app to it a third app and a fourth app and a fifth app and it's still just thirteen dollars a month total not per app so but to be clear we're sharing resources so a cheap plan with not a lot of memory in in CPU it's not going to do great if you have high traffic sites multiple on that one plan but you can upgrade the server as you go and say hey you know what we're going to use more resources we can bump it up to the next plan these are just the suggested plans you can go to other explore pricing plans and look at more of them and choose what's more specific to you we're just going to choose the basic B1 actually you know what we're on two pricing plans they're doing it I do want you to see these things because there are let's go to uh feature View um so there are a number of things that these can do for example staging slots this is a big one that people often miss and that is notice down here it says not available for free and basic and then the dev or test sites have not available for our staging slots this is important if you want to do a real production site we're going to do that with this one because it's important I think to have these staging slots because what happens is you can deploy your branch and say hey this is a Dev branch and it will have the same type of resources the same um abilities as your production server for free on a different URL and that way you can you know test things out make sure they work and then when you're ready you can do what's called a slot Swap and it will switch the two the the dev server and the production server and make sure that um you're up and running and there's no disruption to your your clients but that doesn't come for free notice that the hosting plan here is eighty dollars a month now of course this is my region so it might be different in your region but 80 a month yeah that's much more expensive but again a lot more resources to go back up here to uh Hardware view we'll notice that um we've got uh four gigabytes of memory we've got 250 gigabytes of remote storage and we have scale of up to 30 instances with a guaranteed uptime so there is things to think through when you're looking at these Beyond just oh it's expensive or it's cheap you do get what you pay for but down here notice 70 US 69 really for standard S1 that is 1.75 gigabytes of RAM that's 50 gigabytes of hard drive that's 10 slots which is plenty um and it's one virtual CPU so this right here is what I host my suggestions say on so suggestions.im Tim corey.com that's what it's hosted on it cost me 70 a month now that's not the only site that's hosted there I've got a number of other sites that are also hosted there including some test sites and some sites for myself as well as some other public facing sites so it's that 70 large us is actually divide amongst a number of sites and so I actually have a pretty cheap hosting plan even though it cost me more than what a cheap host would so it's not you know the eight dollars a month or whatever a cheap web host might cost me but I get a lot more features and I get a lot more sites and abilities plus I have a scalability of azure this is where again um as a small business this is something that's really important because there are times when um I need to scale up I've had to scale up because I have a lot of traffic hit my site all at once with Azure I can do that automatically or manually and this allows me to have that flexibility that I wouldn't on normal web host so it's up to you which one you choose for us we're going to do we're going to choose the uh the premium V3 um which is 80 us a month again that's per month but your build I believe is per hour um or even per minute and so you can do is if you test this out but you only say let's use one day's worth of time and then you delete the resource Group well divide 80 by 30 that's you know one month and so it's going to cost you a couple dollars three dollars to test it out for a day so just know you're not you know committing to that full amount but be careful whatever you select make sure that you can afford but also notice up here is the free F1 tier if you choose this you get 60 minutes per day of a CPU you might say Tim does that mean the website will only run for 60 minutes no it doesn't the website will actually run pretty much all day but if you have lots of traffic on it where it's doing computational work so normally a website is just hey here's the here's the site but if you have to do work like building out the site like you would a Blazer site to start up that's a little bit of computational work and usually that's um you know a second or two so it's not a lot of of computational work but if you do more than 60 Minutes of that computational work per day well it's gonna freeze you out until the next day um but this is free for life you can put up to 10 websites on this free F1 plan so you can have 10 websites hosted for free on azure with no strings attached it's free for life but again if you're doing tons of processing more than 60 Minutes of processing a day they'll shut down until the next day this is just for demo purposes trying things out seeing if you like it and see how Azure Works without spending a lot of money so for us we're going to choose the premium V3 for 80 us a month we're going to hit select okay so that's the pricing tier I chose that the name just verify everything is is the same way it was before and we're not going to choose Zone redundancy so let's hit deployment next and we could in this step set up our GitHub action we're not going to do that in this step we're going to do a separate step but if you want to do all in one step you can say enable and then you can choose your organization you could choose your repository and your branch and it would set up for you a GitHub action automatically we're going to do that separately but just know that that's there leave networking as is monitoring I'm going to turn off application insights we're not going to focus on that in this this mini series let's go to review and create and this is going to create for us our web application okay so we're going to hit create now it does not know about our source code so when it's deploying is deploying a website but the website is just going to be a a standard website ready for our source code but it's not going to have any results in it or any type of of source code in other than a generic landing page so we're going to connect that in the next step but let's let's finish up with this first all right our deployment is successful so you can go to resource and we can actually pin this to the um to our dashboard if you want um but we'll leave it here for now um let's go look at the website let's go to default domain notice it says Blazer dash deploy Dash app dot azurewebsites.net we click on it and it's going to take us to our website which takes a little bit to start up the first time because it's Gotta you know get all the things in line and spool up the virtual machine all the rest so this is going to be the foundation on which we built this is where we're going to deploy our web application but first we want to make sure it's working make sure it's running um and we'll take a peek at the other configuration too um so for right now we have we're deploying code to it's a.net core 7 runtime there's a site by the way so it's working it's just waiting for your content so it is running it's just blank a blank slate right now all right so we have our operating system with Linux and um if you've got a configuration here we'll see that we can access the application settings connection strings general settings for example major version minor version of.net and then turn on or turn off the various parts for example this is something that I will turn on and that is always on you will not be able to turn this on on the cheap plans but on the production plan you can turn on always on and what it does it prevents your app from being idled out due to inactivity so as a cost savings saving mechanism it will turn your site off essentially or pause it when no one's hitting it and then the first person to hit it is going to have a little bit of extra time going to your site because it's been turned off to save resources but if you say always on that's going to keep that site spooled up and running in the background and use a little bit of resources to do that but that way the when a person comes to your site it'll be much more responsive so and we will hit save so it's got a restart website in order to to allow this but that's what we have set up for our Azure website so now we have our Azure web app which is built upon a let's go back to our dashboard here and go to um let's go to Resource groups and we'll choose the Blazer deploy group and notice in here we have a Blazer deploy app which is an app service thing about a website and we have our Blazer deploy web server which is like our web server or app service plan this is the thing the Blazers web server that um that is what's going to host all of our web apps we have multiple if we want but if you go to our app um but wait let's let's pin us the dashboards we have it um so pin to samples and then here we can do is we can look at this idea of scale up and scale out so scale up is if you want like our our plan bigger so right now we're on premium V3 pov3 um or P0 V3 and that's 80 us a month but if we say you know what we're getting slammed we need to really up this and get you know more memory and so you could say premium V3 P2 V3 well that gives you 16 gigabytes of RAM it gives you four virtual CPUs and it costs 248 dollars a month if we select that we hit select it will apply and we'll scale up our site and our site will immediately get faster but that is if you want to make a bigger server but if you also want you can scale out and what this allows you to do is say hey we want to be able to have 20 instances of our site and it will create 20 copies of your site and then it will allow users to go to different ones based upon the load you can also say Custom Auto scale um so you can set up an auto Scale based upon a certain metric so for example um you know maximum could be 10 and the default is one and we can set up a metric create a rule to say hey when a CPU is above 70 then create a second one of these and a third one and so on now this will cost you more money as you scale up we're going to discard this but that's because it's making copies of it but the benefit here is it will allow you to make your site more resilient in the case where you're getting hit with a lot of traffic they can scale up until it's no longer needed and then scale back down that will allow you to you know handle a load properly but at the same time only pay for the resources you're using so if you use those resources for a day you'll be spending a few dollars for that additional cost those additional servers and then it goes back away and you don't have to spend them anymore or you can manually say health scale up for you know the next five days and then manually scale it back down we know we're going to have additional need this is the the power and flexibility of the cloud is you can scale up and down as necessary if you find you're never using these resources you know if you're looking at this and saying hey you know I'm I'm not using any of the power that I have you can actually scale down and pay less so that also is another benefit again there's those deployment slots should we decide we want to add more slots for different purposes we'll get in that later so we have our Azure uh site and we also have our source code and we have our our GitHub repository let's come over here and refresh we have not yet pushed our changes so let's do that let's say let's make sure you save everything um initial code commit and we'll commit all in sync wait for it to be pushed okay and now we're going to do is just refresh this and see that yes we have our our solution we have our um we have our project we have all of our source code in here so that's all we need right now now note that in app settings.json we do have this coming in this default Connection in a in a real application I would not put a real connection string here I wouldn't even put demo connection string there what I do instead is I put it in secrets.json and then override this I did not do that here because I wanted to make sure you have this code but just note that do not put any type of real connection string in a file that gets committed to your Source control so we have a video on secrets.json you should check it out also if you want to know more about Azure and the stuff we've been doing with Azure then um check out my Azure course I have a whole course on Azure and how to save money with it how to make sure that you're getting the most out of it we do a lot of cool stuff and the end of the day I think we spend about five dollars of actual money on our demos um even if we didn't get the free money we they give us free money to begin with to play around with to try out for 30 days I've actually had to do that but even if you didn't do that it would have spent like five dollars to test out even some really big cool things so you can do Azure on the real cheap um actually how to get the most of your resources get stuff for free how to take advantage of that free stuff how to make sure you monitor your costs and don't have cost overruns and so many other things but this mini series is going to give you a good idea of how to publish Blazer in this case by your server but we work with laser webassembly as well Blazer server to Azure web app and make sure we have continuous deployment with GitHub actions and make sure our connection strings are updating and so many other things so that's it for this video up next we're gonna work on GitHub actions to make this an automated deployment process to Azure in the meantime thanks for watching and as always I am Tim Corey [Music] [Applause] thank you [Music]

Channel: IAmTimCorey

Views: 15,596

Keywords: .net, C#, Visual Studio, code, programming, tutorial, training, how to, tim corey, C# course, C# training, C# tutorial, .net core, vs2022, .net 6

Id: NiBEk8QepP4

Length: 33min 22sec (2002 seconds)

Published: Mon May 01 2023