Intro To Azure Static Web Apps - Free Hosting, SSL, Global Distribution, and More

creating a website that is globally distributed incredibly fast and automatically deployed used to be hard adding in custom domains and ssl certificates that used to even more tricky now all that can be done for free in a few minutes in this video we're looking at how to use azure static web apps to host a blazer webassembly application with a custom domain the site will be replicated around the globe and be secured with a custom ssl certificate all without us having to do anything additional now if this is the first video you've watched of mine my name is tim corey and it's my goal to make learning c-sharp easier i provide videos twice a week here on youtube to help you grow as a developer i also have full set of training courses on iamtimcory.com and a podcast titled dev questions i encourage you to check out all the resources that i have to offer in this video as with most of my videos i'm going to create some source code if you like a copy of that source code use the link in the description okay we're going to start off by looking at what are azure static web apps so this is the site for the azure static web apps you can go to azure.microsoft.com and look for azure static web apps and in here it's going to explain to you all the things that static web apps are they're very easy to use they are hosted globally meaning your content isn't on just one server it's on multiple servers around the globe so that the server closest to your user will be the one that supplies it making it the fastest possible for every one of your users they can talk to api functions such as azure functions we're not going to do that in this video but that is definitely possible and easy to do they have a streamlined build and deployment process we're going to see just how easy that is because it's basically going to be done for us we're not going to have to write any deployment code or work with the yaml at all where it's gonna have to say yeah i wanna do that and it will do it for us and we can even have a seamless staging environment so with all of that you're gonna ask the question yes but how how expensive is this well the good news is it's really cheap let's go to pricing and we'll see the pricing for static web apps we're going to focus here on the free tier so if you're using this for small to mid-size web applications if they're hobby projects smaller projects personal projects your portfolio those kind of things you're probably more than fine with the free tier so the free tier is going to give you a hundred gigabytes of bandwidth for your entire subscription for a month so every month you get a new 100 gigabytes of bandwidth now it's a lot of bandwidth especially if your site isn't huge now if you create a huge site and make your users download lots of stuff that's going to eat up that bandwidth now notice it says there are no bandwidth overages that just means that it's really fine print down here but says if you exceed those those overages then you get your sites turned off until the end of the month so you only get that 100 gig and that's it now you could pay for the standard we'll get that a minute you get two custom domains per app not per subscription per app this per subscription here means that if you have 10 static web apps they're only sharing that 100 gigabyte per month limit this down here is two custom domains per app meaning if you have 10 custom static web apps then you have up to 20 domain names you get free ssl certificates so you have to pay for them or really even configure them you do get a total storage of half a gigabyte okay and that's per deployment i'm sorry per stack look at that a quarter of a gigabyte per web app so you can have up to half a gigabyte total of storage that may not seem like a lot but for a website it really kind of is you do have the ability to hook up to azure functions as well so that's the free plan that's where i use today i think it's more than enough for what you need however if you wanted to go to a a paid version for a production app then you need to have a better as a on well then it's nine dollars per month per app and that gets you 100 gigabytes per subscription so still same bandwidth amount but then it's 20 cents per gigabyte over that so you have the ability to go over that you can have five domains per app and you can have more storage space half a gig per app and then total two gig per installation so the reason you have a larger size there is because the fact that you can have uh staging sites you can have other versions of your site not just the main version so that's why it's a two gig total or over here half a gig total when it's really per installationist it's a quarter of a gig or it's half a gig so and there are service level agreements with the standard not the free that just means that there are agreements in place as to the uptime and there aren't for the free version which means if the downtime lasts too long oh well now microsoft's not going to intend to have a down time last too long they're not going to try to put you in the lower end of the tier they're going to still try to have great uptime they still will it's just that you don't get any money back if you have more downtime than expected whereas on a standard plan you would so with that that's what the azure static web apps are they're for hosting sites that are just client-side so the really easy ones are html css and javascript sites so if you're thinking about deploying a site that has angular react or vue great option here if you're thinking about deploying a site that has just html and css great option here but also if you're thinking about deploying a blazer web assembly project also a great option now this would not be the blazer web assembly project that's also hosted by a blade by an api you can't do both you can only do the blazer web assembly project because that lives fully on the client so that's the only real limitation here we'll see all the different types of apps we can deploy to it but for us we're going to use a blazer web assembly product to show off you can do that and the first thing i do here is we're going to create a new repository on github github is one of the easiest ways to connect to our static web app because of the fact that azure can read it and deploy right from there and set things up for us so we're gonna do that so i'm logged in here as i am tim cory i'm gonna create a repository name let's call this the timco enterprise app now this is no relation to the timco retail manager this is just a different thing i use timco for a lot of things so this is not connected to the temco retail manager although we could have deployed the blazer web assembly portion of the timco retail manager to an azure static web app so this is our demo app our demo static web app just to show off that it's it's a demo okay we're going to keep this private there's a couple reasons for this one is that it's only gonna last for a little while i'm not gonna make it last for a long time i'm actually gonna delete this repository i don't wanna keep it around i wanna clog up my my business repository with this extra repository that's no longer needed after this video so that's one reason but another reason why is i want to show off the fact it's not just public repositories that you can do this with you can do this with private repositories as well so we'll add a readme we'll add a git ignore for visual studio and we will not choose a license which just means it's the most closed off license possible we'll hit create repository and there we go we have our repository we're all set up we can grab the uh the path to that location now the way i like to do this is i'm going to do the clone right from my command prompt so i'm going to say get get clone and that url and that's going to clone down the repository and create a folder for me now i can just minimize this or exit out of it let's go over to visual studio where i say open a projector solution and i can go to samples and look for that tim co enterprise app and there's nothing here that's because well the repository has been created i have not yet created my project so i hit cancel here let's go to new project and we're going to choose a blazer webassembly project hit next we're going to change this to be see samples and let's call this our timco enterprise and we'll call this the tim co enterprise app which just happens to correspond to the name of the repository which means it's going to create that folder which already exists let's hit next where i say net six long term support yes for https no for authentication no for hosted and no for progressive web app hit create and the point here is not to create this fancy web assembly application it's just to create something for us that will show off deploying to a static web app now notice that we are in source control and says hey you got a whole bunch of stuff here to commit because it's picked up the fact that we did clone our repository down so let's just make a couple of changes just to kind of show off yes this is our page let's go to index page and let's say hello youtube like so and we'll take away the survey prompt we need to have a survey here but let's do a counter like so just we have it and let's go and turn off our navigation menu i don't like that navigation bar necessarily i hate seeing it all the time so with that um let's go about and change this to be uh i am tim cory.com just we customize this a little more and if we run this now we should see that that our application looks different than the standard one but it's still just a sample application so there you go really simple sample um the counterworks it says hello youtube the about link goes to iamtimcorey.com so everything's good there so that's now our blazer webassembly application again just enough changes to prove us not just a pre-launched site so now we can do is we can go over to azure and i have azure pulled up here that way let's commit those changes first actually so let's commit all so i'm going to not select anything so it will take everything i'm going to say initial commit like so and i'm going to commit all and sync okay but that's what i know i just created so therefore we should be all good with that if we now refresh we should see we have a whole bunch of files in here including our solution file our enterprise file with all of our stuff so with that we now have all of our information and notice i call it initial commit where i had initial commit oops oh well um now we need to do is go to our azure we need to create a new resource so create resource i'm going to search for static and there's a static web app select that and copy this this is the azure stack web app it's a pretty great service in fact it should be one of my favorites let's just favorite that so a static web app to create it we hit create and that's going to ask us a few questions first off we're going to create a new resource group timco enterprise like so just again the resource group is a grouping that allows us to create and modify things as a group so we'll call this our timco enterprise and we're going to select the free plan not the standard plan the standard plan is nine dollars a month the free plan is free we're gonna put in the central us because that's where i am i'm gonna say sign in with github now i've already connected it so it says hey do you wanna have this connected sure go ahead and connect it's going to ask for my password let me go ahead and paste that in there and hit confirm and now it says what organization well tim corey that's what i want ryan team corey repository is going to be timco enterprise app and the branch i'll deploy on main but this is where in an actual production environment i would deploy from a prod branch so you can deploy off of any branch you want but i like to deploy off of a prod branch i have a staging branch i'll have my main branch be my development main branch so in our case i'm not going to create an extra branch just to show you different branches but just note that normally i deploy to a production branch rather than just the the main so with that it now knows what organization what repository and what branch to deploy from and we're going to say okay for build presets which framework generator or other do you want to use so if using angular reacts felt view or blazer choose one of those if using gatsby hugo or viewpress choose one of those if you're using a a web application that's just html css and maybe some vanilla javascript that would be custom so if we choose custom it's going to say okay where is your application located which would be the root just like it is right now and do you have any api or output locations for us we're going to choose blazer so it's going to say okay you're deploying the client api location i'm not going to have one so i'll get rid of that and then output location is www root that's where it builds the product into so that is the standard for blazer we can hit review and create and create now it's going to do is it's going to deploy for me a the actual site it's going to deploy the static web app which is already done let's go to resource but also what it's done is it has created for me a new commit on github and that commit will have the deployment information for deploying the site to azure so let's go look at azure again let's hit refresh notice it now says three commits it has this new github or github slash workflows folder and inside here we have a yaml file this yaml file notice it's 45 lines and it's probably too small to see let's uh zoom in here and it says okay on the main branch or on pull requests for the main branch i want you to go ahead on ubuntu and build and deploy the job here's the steps check it out build and deploy here's the information including the repo token which there's a private or secret key there we'll upload the file here's the information about the client and www root the api location close the pull request job if it's a pull request and so on so that's that's what just got created now over here on our website we have a url we click on it notice it's a let's zoom in here it's wonderful grass and then number.azurestatic webapps.net that's a generated url it's being different every single time not every time you load the web app but every time i create a new static web app we'll have a new url that's totally different that's just because they're globally unique they click on this we're going to see that it's waiting for our content so it's working on deploying that our deployment is in the process of going once it's done then it will be here okay and it's going to do that automatically for us now i show you deploy by now but we can check this out by going to our github and going to actions and here we can see that we actually have a problem the there's an error in our build and deploy we select on the build and deploy and it says that right here the app directory location of client is invalid that's because i didn't put in the right spot so let's go back and fix this so let's go back to our code and notice that it's in the timco enterprise folder that's where my blazer web assembly project is we're not building a solution necessarily we're building the the project we're deploying the just this version which is just the client itself the timco enterprise project so i need this path instead of client so i can go to github workflows i can modify in here i can change the the step here where it says app location i can modify this so let's go ahead and make a change we can do is write in github so i can come down here where it says client this i i can change to temco enterprise and i can then scroll down make sure i get everything set up i do i start the commit and i'm going to say that i am fixing the project location in action or in um workflow i don't need commit message i'm going to commit directly to main and hit commit so that's going to change that yaml file and now if you go to actions here we'll see that it's now queued to start deploying this project if this was the right fix then it will go through and deploy this project we can click on it and look at what it's doing it will take a little bit to deploy it does depend on the resources you have available to you right now it's pretty fast though so it's going to download it's going to build and that's going to deploy my application i'll go ahead and pause this until it's done just because there's no need for you to watch basically paint dry but they shouldn't take more than a minute or two okay so once this is done then i'll come back and we'll see it work and we're done so it took about four minutes to complete if we go into the job and look we'll see that it deployed all the steps and we can see actually read through everything that did all the logs for that if we want to but we can come back over here to the temco enterprise we can open this again or go back to our site and hit refresh when we do we'll see that the page loads our web app okay so our our site does work also notice that we have https this is secure and it is using a valid certificate so this now is deploy and running but we're not done yet because that's not a great url wonderful grass and some numbers we're not going to remember that so let's go ahead and use a custom domain with this so that we can use the timco enterprise.com that i own so to do that we go to custom domains in our azure site let me say i want to add a new site and i'm going to add a subdomain site called www now we could just use the rootdomaintimcoenerprise.com the downside of doing that with a static web app is the fact that it's going to be a c name redirect if you don't know what that means basically we're going to redirect temco enterprise.com to wonderful wonderfulgrasstestnumber.azurestaticwebapps.net which may sound fine and it will work fine however it's going to cause some problems if you want to also use email or other things with that domain so instead what we'll do is we will redirect the www to go to this timco enterprise location and then the root domain will just say hey if you go to the root domain and don't put anything else so just temco enterprise.com let's go ahead and redirect you to a www version so along with explaining that you kind of want to have it be a subdomain not the root domain that you send here so www.timcoenterprise.com [Music] we get the green check mark we hit next and now it says okay what i want you to do is you're going to validate you own this you can do that with a cname or you can do a txt record we're using a c name so you have to do that anyways in order to do this we do is we have to enter this record in our dns so let's zoom in here a little bit so you can see it so this records a cname record again if you're not familiar with dns then you might get some help setting this up but it's actually not that hard what you're going to do is go your dns provider your dns is what matches an ip address to your domain name this is where you say hey i want you when you're going to my domain name i want you to go to this server so in this case we're going to create a new cname record and we're going to use it for a www or other subdomain so in our case we're using www yes www is a sub domain of temco enterprise.com and let's say the value is wonderful graph on the rest just hit copy so now what i'll do is i'm going to go to my dns and set this up so let me pull that up i'll pull up on the other screen because i'm not sure that i want to show you everything like let me look at it first i don't see anything incriminating here so i'm going to pull across and show you so i use namecheap for my domain names and for my um for everything okay so namecheap just is awesome for domain names it's awesome for a lot of things i'm going to use hosting a private email but for domain name to sell it's awesome so let me get rid of this parked domain name i create a new record it's a cname record it's for the www sub domain i'm going to paste in that value and i'll say that it's the time to live is one minute and that's it that's all i had to do for my host record notice i have the host the at which is the root the root domain it gets redirected to the www version with that we should be good to go now this is going to take some time let's hit add here it's going to take some time to validate dns is not instantaneous it has to update databases around the world and depending on which database the azure is pointed at maybe different than the database you just updated so take some some time to replicate that around the globe therefore it's not going to be an instantaneous oh it found it you may have to wait a few hours it says 48 hours for dns to propagate the reality is it's nowhere near that long i usually find that takes about 15 minutes sometimes less sometimes more but usually it's less so just give a little bit of time uh be patient don't don't start making changes because you don't know what's what's going on let alone let it bake for a little bit come back to it if you leave it overnight and it doesn't find it yes then figure out why okay in this case it took about five to ten minutes to do wasn't real long so let's hit close and now we have we hit www.temcoenterprise.com and let's go there and there we go we now have our website at temco enterprise.com notice as well a ssl certificate the connection is secure if we look at the certificate itself we'll see it's a valid certificate it's good through june of 2022 but the reality is they'll keep renewing it for us so this is trusted it's a valid certificate it's fine it's good to use it it's secure so we've now deployed our site not just to azure but to azure globally me has been replicated around the globe so that when you go to www.timcoenterprise.com you're going to find the versions closest to you because the fact that microsoft has replicated around the globe that means faster download times it means you're slightly more responsive it means your site will be really really quick to run i use static web apps in production because of the fact that they're just so powerful they make my site the fastest it can be and that's really important because the fact that the faster your site is the more likely it'll show up in google search results so it's going to elevate that in search results because the fact it's faster google likes fast responsive sites that's one of the things it likes so that's why for example i just had the csharpmastercourse.com this was recently deployed um oops did i misspell it nope is didn't put the www don't have the redirect on um but this right here is running off of azure stack web apps because the fact that it is very very fast it is allows me to make sure the site shows up in seo and all the rest really well so i use it in production because of how awesome it is and noise is not paid promotional for azure static web apps azure static web apps are free unless you get to the point where you're using so much traffic that you really need to upgrade to the nine dollars a month which is all it is to host your site so i would recommend that it's not the same as just a web host if you think a web host and think of stack web apps and try to compare the two the two don't compare because of that global replication because of the free ssl certificate and configuration because of the additional speed benefits you get so i would definitely recommend you check it out in just a few minutes here we created a web application we created a github repository we set things up we messed things up we set up our azure static web app and we deployed the actual deployment took no time at all the cool thing is if we come back over here to our visual studio and we say hey you know what i want to say to your new azure static web app and i hit save and i commit um let's do a poll first because we have that those changes to brand and we're going to say this new commit message is going to be updated home page and we will we'll stage this and we'll commit it and let's go ahead and push that up okay so i have made a change to our web application if we come back over here to github let's zoom back out here to the regular size and we'll come back to home and we'll go back to our actions notice there's already a new job deploying those changes now those changes are going to take about four minutes to deploy but in four minutes our site will now be updated with the latest version of our changes so that's just how powerful it is we've already got a complete ci cd pipeline in place now again i deployed main so that's been your production branch now and if you want to make changes i'd recommend you make changes on a different branch and then merge them into main when you're ready but this is all set up for you we'd have to write any yaml code we didn't have to mess around with all these the uh secrets and all the rest that was all taken care of for us and it's now just done and working so that's azure stack web apps that's an intro to them there's a lot more you can do with save functions to be the api that supports your application if you need it and there's a lot more you can do with configuring how they work but really they're pretty simple they are they can't have authentication they can have the azure functions but that's about it after that they're just a static web app now you may ask the question can i deploy blazer server no can i deploy mvc razer pages no no api no all those are no because the fact that this is for just client side stuff this is not for server side and that's one of the reasons why can be so fast because they're just files it's just serving files it's all it's doing is serving files around the globe and then the client downloads those files and runs them that's what client-side applications are all about is just downloading files and running them locally well that's the only type of web application that will work in azure static web app if you want to deploy any other things that are server side or server and client side then you need to use an azure web app not a static web app okay that's the difference all right if you have any questions leave them down in the comments below if you have any thoughts on azure stack web apps leave them down in the comments below as well i love to hear what your thoughts are if you've used me for if you haven't or you're going to and if you haven't yet built a portfolio this is the place i'd recommend you start create a portfolio here okay free be fast and you can show off what you can do alright thanks for watching as always i am tim cory [Music] [Applause] you

Channel: IAmTimCorey

Views: 3,659

Keywords: .net, C#, Visual Studio, code, programming, tutorial, training, how to, tim corey, C# course, C# training, C# tutorial, .net core, vs2022, .net 6, azure, azure static web app, static web app, static web application, static web app custom domain, static web app configuration, azure static web app tutorial, azure static web app blazor, blazor webassembly, azure cloud

Id: OW6OfW5SkNw

Length: 34min 16sec (2056 seconds)

Published: Mon Dec 13 2021