A Beginner's Guide to Azure Static Web Apps - Free hosting for Blazor, React, Angular, & more!

if you're like me you have a bunch of websites on the Internet or maybe you're just getting started and you want to put something on the Internet and the first thing you do is start to look for web hosts or different services and different things and you got to pay a bunch of money what if I told you if you just had some static content you know like HTML CSS JavaScript some images you can put them onto the internet for free with Azure static web apps that's right and in fact if you're using other Frameworks like Blazer if you're a net developer angular reacts felt view or other static site generators like Gatsby Hugo or viewpross or even next JS or nuxjs you can use Azure static web apps to host your websites for free and you can get free SSL search custom domains and so much more so today I'm going to walk you through everything you need to know about Azure static web apps to host your websites for free even with an Azure function backend so tune in [Music] foreign [Music] I'm James and I'm back today talking about the web I never talk about the web unless I need to talk about the web and in the last two weeks I've been publishing a bunch of websites onto the internet in record speed with custom domains custom certs and all sorts of goodies thanks to Azure static web apps it's my new favorite service in Azure and of course in case you don't know I work for Microsoft this is not an advertisement for Microsoft at all there's other static website things that you can use I work at Microsoft I use Azure personally and my side projects outside of work and that's where this came in I built a bunch of stuff outside of work just like this YouTube channel um and uh I just fell in love with with Azure static web apps I was up and running publishing my websites for free onto Azure in minutes with a custom domain name and free SSL certs and a Azure function backend for my application it's mind-blowing of course I'm a net developer so I use Blazer to build my application stations but if you're not a.net developer that's okay too like I mentioned in the intro there's tons of JavaScript Frameworks and static site generators different web Frameworks like next and nux that you can use with Azure static web apps to host your apps for free so when you think about it what is a static web app well it's static content or stuff that doesn't need a server to process it so stuff that runs in the browser right it's just serving static content so normally think of that as HTML or css or JavaScript or images but in the world of blazer for example there's webassembly which means you can run your code and your logic and stuff inside the browser which means you can run your Blazer app in Azure static web apps which is awesome right no server required because it's just static content now what's really great is that this integrates into different CI services like GitHub and Azure devops uh so it can automatically redeploy on demand it's globally distributed thanks to Azure which is pretty awesome and of course like I mentioned earlier free SSL search free custom domain names and a lot more now there is a free tier and a paid tier I'm using the free tier myself and we'll take a look at the differences between those two but it is super awesome I love it whether you're using visual studio vs code the command line and a text editor whatever you want you can get up and running in no time like I mentioned earlier or for Microsoft it's not sponsored this video is not sponsored by Microsoft in any way I just fell in love with this I don't work in the Azure group but I love this thing so I need to tell everyone about it and show you how it works so that's what we're going to do we're going to take a look at how to get started with Azure static web apps today so let's go ahead and do it all right so the first place to start actually is just in the documentation it's Fantastical it kind of walks you through exactly what it looks like which is you know you got code goes through some different CI services and publishes your static content up into Azure uh web apps static web apps now the cool part here is that there is this API backend with Azure functions and you can use an Azure function to actually integrate into different services and basically create an API for your website now what's nice here is there's all these tutorials so here if you're using Gatsby Hugo View Press Jackal or you're using Blazer or next or next this will show you how to do this I'd really show you how to like add a database and I'm at Azure front door so if you want to do custom routing it's a whole bunch of good stuff in here but if you pick one it's going to walk you through the process so I've gone ahead and picked a uh building a blazer application with an API and that's where we're going to get started it's going to walk you through what you need blah blah blah and there's a bunch of stuff in here it doesn't really matter but what you need to know is about this this uh static web dev GitHub thing over here and each of these have sort of templates so there's a guide here if you already have existing website of how to actually integrate and get your site ready for Azure static web apps but if you're starting from scratch like I was you just come in and basically clone a default uh getting started project so any of these have that in there and when you go to the static web dev site it kind of walks you through it here and you can look at the repositories that are in here so as an angular one there's a vanilla.js one nux starter a nux three starter an xjs a react a view all sorts of good stuff in here so if I go in here just type in blazer because that's what I'm going to get started with there's a Blazer star starter and a blazer basic which is just the Blazer web app and nothing else actually it has some playwright tests which is pretty cool too but we're going to start here with the Blazer starter because this has both an API and a front end so back-end Azure function and a front end and some shared code in between so what you got to do is just say use this template of course you could download and clone the repository not a big deal but I'm gonna say go ahead and create a new repository you could open in a code space I'm just going to open this here I'm going to select an owner which is me and I'm going to say um let's say YouTube uh static web app I don't know that sounds good let me make it private and I'm going to go ahead and say create a repository from this this kind of creates a nice little link here so I can see where it was generated from so this takes just a few seconds from scratch and just like that I have code totally ready to go so I can copy this I'm going to go and open up visual studio and just go ahead and open this up cool all right so it cloned it up and we have one solution in here so like I said I'm a net developer so I have Solutions and a few projects inside of here this one's going to be based off of dot net seven so I have a DOT Net 7 app we can see that it's using the webassembly uh package here and I also have an API which is actually an Azure function which is a weather forecast function and this is an isolated uh Azure function so it's going to run isolated mode but here it's just gonna have a single API called uh weather forecast and the really cool part about Azure functions is they're event driven they're API driven so you can actually get different connectors basically and say oh let me pull some data from table storage or from Cosmos or something else you can have inputs and outputs it's really really neat so here this is just creating a very simple HTTP trigger it's going to go get a bunch of data and return a Json you know blob to me basically and then over here inside I'm my client application I have a very simple Blazer application it just says hello world welcome to your new app there's a component in here there's a counter and then there's a fetch data and this fetch data will go off and hit the API to call it down so here we can see it's going to call slash API weather forecast and when I go into the program file we can see that it's adding a scope here it's going to try to grab this API prefix which is coming in basically automatically from the Azure static web app configuration else just the Base address now there are a few different configurations basically in here to handle fallback because it is static content so if there's navigation it'll fall back to index.html for example so it'll handle that navigation stack for you but there's really not a lot else in here to be honest there's some CSS there's some bootstrap a few properties like launch settings and that's about it so cool we just have our website so good to go it's just a you know out of the box Blazer application so now we need to set up our Azure static web app we want to get this thing onto the internet so let's do it all right so I'm in Azure and the first thing I'm going to do is create a resource Group we're doing this 100 from scratch so let's call this the YouTube static web app Resource Group now I'm on the west coast I'm going to do West us2 and I'm going to hit crew review and create and create that and we should get our Resource Group so Resource Group allows you to put multiple apps multiple things inside of it so usually you know if I have a uh you know a website it might have all my different services like my table storage my Azure functions my app service plan all that stuff like that but here we have a resource Group so I can clean this up when I'm all done and I'm going to say create now you don't have to do this from the portal you can do this 100 from you know Azure command line a bunch of other ways of doing it and the documentation but that's how I like to do it I'm just type in static web and we see static web app and I'm just going to say create Azure static web app all right cool so here this is going to say where do you want to put it in this Resource Group let's call it the YouTube static web app you know just static web app and here we go this is the hosting plan there is a free which says for hobby or personal projects and standard for general purpose production so here there's a breakdown of what this looks like so for a free hobby use or personal projects like the one that I'm using you do get a hundred gigabytes of bandwidth per subscription um I'm not sure if that's per month but it says per subscription uh maybe that's total and then there's a free uh basically or nine dollars per month for standard and then here's the bandwidth overage I guess it's free which is nice but here's the real difference in the breakdown is that you do get a custom domain name up to two per app you do get SSL certs which are free on both but if you want custom authentication and private endpoints then you're going to need the um standard plan and then of course there's the max app size So based on how big your app is 250 500 and then there's a few other things like for example inside of here you have three staging environments instead of 10 and then the Azure functions backend which you don't have to use at all you might not even need a back end you have to use managed but in the standard you can actually bring your own so you can actually use existing uh you know Azure functions that are out there and pull them in it's quite cool and then they do have this Enterprise grade Edge thing I'm not actually sure what that is but it's there if you need it there you go now this is pretty cool so I'm going to use free I'm going to go and say West us2 so it's available in a bunch of regions and then here you can do deployment so GitHub Azure devops or others you can tie it into other systems as well but this is on GitHub I have linked to my GitHub account I'm going to say me I'm going to go ahead and say YouTube static web app Boop and then branch is Main now this is where things get really really interesting I like how they did this in the Azure portal it says well what build presets do you want well what are you using well we have all these different things so there's the static site generators there's custom there's HTML there's spells there's angular there's a Blazer app so I'm going to say Blazer then it's going to ask me well we know what Blazer apps have which is a client and an API and then an output location which is the dub dub root www so all you need by default is the client and probably the www if you're not going to use the API you can remove it which means it won't get built in the CI system it'll just sort of ignore it but we're going to use the Azure function backend and what it's going to do is create a GitHub actions workflow for me automatically so it's going to say on Main over here you know when things are open synchronized reopen close all these different things and then there's all sorts of good stuff so it's only going to build and deploy in certain instances it'll configure all your Azure secrets for you automatically and then it does the same thing when there's a closed pull request it will publish it as well which is cool so you can take a look at that I'll handle for you I'm going to say review and create is where things get really really really really really cool I'm going to say create and what this is going to do since it's linked to my GitHub account is it is going to automatically uh make a pull request on my behalf and then what it's going to do is uh commit that um that workflow that we just saw so here right here here's the GitHub workflow here it is here's my yaml amazing we can see all that same exact code that's there and notice that it's using uh Secrets over here so here's the Azure static web app secrets and my GitHub token which is nice and if I go over into my settings and I go down into secrets and actions we can see there it is so it's configure that for me automatically which is really really nice now what we'll see is that I have a full URL here at the same time so I can click on that and I get that my Azure static web app is alive and waiting for my content so just give me some sweet sweet content that's all at once uh and over here on the left hand side we see that we have full uh you know ways of doing application insights apis environments identity role management uh you can control that hosting plan some of these are available in the free tier some in the standard tier and there's different you know automation tasks and things like that that you can put in there if we tap on apis we'll note that there's no apis yet because we haven't deployed that back end uh here so it's all going to be configured automatically for me and we see custom domains we're going to set this up later but right now it just has an auto-generated domain that we just saw here now if we hop back over to our GitHub actions that are deployed we can see that when it did that commit it also kicked off the GitHub action workflow so let me go ahead and tap on that and this is going to build and deploy my uh Blazer application and then what it's going to do is deploy that into my Azure static web app automatically and it's also going to build and deploy that Azure function for me and then make sure that that is all configured so what we're going to do now is wait and I'm going to speed up time to see how long this deployment takes so let's go ahead and give it a few seconds all right it's done there we go uh that took what three minutes or so to build and deploy which is cool so let's go back over here and let's go into our API all right and what we hope to see is that inside of our API that it has now deployed our Azure function uh back end which has one API to it which should be that weather here it is we have function app production manage and we have a weather forecast very cool so if I go in to here and if I ideally say slash API slash weather forecast this should give me back some weather beautiful sweet sweet weather now in fact if I go and I just delete this and I load this we have loading we have our Blazer application there we go look at this click click click you can say fetch data and that's calling that API back end if I hit F12 here and open the dev tools and I go into my network and let's go ahead and refresh this we can see right here there it is it's hitting that forecast get right there in my back end just like that which is amazing and literally in 10 minutes or so we've not only created our first project we've opened it up cloned it we took a look at the source code we integrated in and deployed our Azure resources we then created that GitHub action and then deployed not only the Blazer website but also the Azure function backend so now you saw that I have this Azure static web apps.net URL and that's where the API is and all this stuff but we probably actually want a real domain name that's what we want right we can go and put all of our source code in our images and all this other stuff but we want a real domain name so let's go now and set that up now there are great documentation resources which I'm going to put down here to do all of that but I use namecheap and I'll you know put a link down there to how if you want to sign up for a namecheap account or whatever whatever but I use namecheap for all my domains so I'm going to go ahead and walk through that process of how I set it up inside of namechip automatically so let's check it out so we took a look at the API but let's go ahead and look at the custom domains and here we can see that I can add them either a custom domain on Azure DNS or on another DNS so I have my domain name I'm going to register my life with Android this is a domain that I've had since 2017 that I didn't do anything with ever in my entire life but now I own it and now it's here so here we go all right so we're going to go ahead and register this so I'm going to go ahead and copy this and I'm going to say add I'm going to say custom domain name and I'm going to say www.mylifewithandroid.com there we go and hit next so now this is going to need me to go and enter a cname into my DNS entry in namecheap so cname www and I'm going to copy this value to my clipboard so I'm going to go into my Advanced DNS and then I'm going to go ahead and say new record here I'm going to go ahead and say cname www and enter it here and hit save all right now of course DNS is a finicky thing because it's DNS and an ideal scenario fingers cross is it's crazy super fast um and and then ideally it picks it up automatically so when I hit add here this is going to attempt to register and try to find that scene name record so again it DNS takes some time to to roll out so pretty much you're just going to kind of sit here and ideally hit add until it adds it and let's see how long it takes for me to get that up and running but again cname www cname www and the automatic there so now we're just in a waiting game for DNS but let's go ahead and see oh there we go look at that already I was gonna pause and like say let's go really really quick right uh but it only took a few minutes or so for it to sort of roll out initially and what this did is azure went and looked at those DNS records and noticed this and now it's going to go ahead and configure SSL search for me now this is going to do it for the www URL but we also have to do a fallback for non-ww addresses the Apex I believe is what it's called so we're going to show that as well now this here is going to take a few minutes four seconds or however long it takes and I'm just going to speed it up so here we go I'm gonna drink some more tea all right cool our cname has been registered uh and the SSL cert has been given all right so now I should be able to copy this and if I come back over to a new tab type that in look at that my life with Android is now my blazer application if I do slash API slash weather forecast I should also get back my weather forecast with my life with android.com which is very nice now the problem here is if I remove that www it's not going to be able to find it I need to go ahead and map that Apex sort of that root uh on there so I'm going to go ahead and add another entry and I'm going to say custom domain and this I'm going to do it without the www dot I'm going to say next now in this case it's going to basically need to validate my domain name ownership with a txt file because the dub dub is for the cname so here it's going to see I need a txt and an at sign so let's go ahead and add a new record here I'm going to say txt at then we're going to add that value in here and this is sort of a secret basically saying hey Azure I own this thing over here so this is going to take a few seconds to generate and I'm going to blur it all out and then we're going to take it and copy it into namecheap oh there we go it's already done so I'm going to hit copy I'm going to hit Advanced I'm going to paste it in here I'm going to hit go now that we have that txt record in what will happen over here is this is going to automatically start to validate my record for me and make sure that is all good to go now while that's doing that I'm going to need to do one more thing which is configure another cname or an alias okay so I can actually hit that learn more button and it's going to show me how to basically set this up so set up an Apex domain with an external provider now here this is where it's going to tell me that I need to validate my ownership with that txt file and then I'm going to need to set this Alias record as well now your host may not domain host may not have an alias record but you might need to set up a cname with it and forwarding it's going to walk you through all that luckily if you're using namecheap this works brilliantly and we're going to create an alias with the at and then we're gonna leave um the TTL as default but paste the full Azure portal like Azure domain inside of there so all that's validating I'm going to go and copy this again go back to my DNS hit a new record I'm going to say Alias record at paste that in and hit OK so a few things are going to happen here the default TTL is five minutes so it's going to take some time to start rolling out and of course it's still validating my record and while it's doing that the other thing I like to do is set the default custom domain name and I like to make the dub dub dub my default automatically so we're just going to give it some time at this point to automatically start validating this from um where we're at today and then what we're going to do is see if that all is all configured and all working and hoping DNS figures it all out automatically so let's just wait for it to validate all right it is 100 validated uh which is amazing now I sped that up really fast and you're probably like wow did that just take forever no it took about 10 minutes total right now I'm about 35 minutes into the recording even though probably you're looking at like what 20 minutes or something like that 18 minutes who knows I don't even know we'll find out when I actually edit this video but now we have two custom domain names the SSL TLS tours are automatically provided totally good to go so now when I come back over to here and I hit enter on my domain or without the domain right so if I go ahead and delete that dub dub dub it automatically reroutes me to the www because it's aliased over there if I just say my life with android.com type it in it automatically aliases it to the dub dub dub which is all we ever wanted so it goes to that c name basically it's sort of doing rerouting automatically which is nice and there we go we have our full custom domain name setup with our W route and without the www that Apex is all set up totally good to go now if I go back into my source code I start making changes that CI CD pipelines automatically pick it up and redeploy 100 you can see right here less than 29 minutes it goes when I started this whole thing which is what Paul you see there automatically so just like that we've done everything from start to finish we just took and made a website and put it on the internet with a full Azure function API backend I think you talk to anything consider serve up all sorts of goodness to our application now I did it with blazer but you can do with any different type of application uh framework out there that supports Azure static web apps so take a look at the documentation and of course check out the Azure Developers YouTube channel where they do live Community standups not only for Azure static web apps but for all the other different Azure services like container apps I have service logic apps and a bunch more these are things that I use every single day again I love it I work at Microsoft I love Azure I use Azure my spare time that's there and I just think Azure static web apps and static web apps in general are just revolutionary to me because I've been able to scale up a bunch of websites really really quick and for free which can't complain with that it's free which is awesome now if you have any questions at all leave them below if I can't answer them because I'm not a web expert I will go and ask all my friends that work on that team uh or I'll try to find someone else on the internet that knows how to answer it if you know how to answer it go ahead and answer it as well if you like this type of content let me know now I don't really do a lot of azure type of stuff on this channel but because I put it out on Twitter and said I did this everyone's like where's the video where's the thing so I just sat down for the last 38 minutes and decided to make it so I hope that you really enjoyed it and if you did made it this far please give this video a thumbs up it really helps me and the channel and of course don't forget to hit that subscribe button and ring that notification Bell um yeah thank you so much for tuning in I really hope you're doing if you have an Azure static web app or other static web app stuff put them in the comments below let me know what's going on there share it to me on Twitter and uh love to see what you built whether it's with blazer or not if it's up on Azure so definitely reach out to me thanks again for watching and have a great one foreign [Music]

Channel: James Montemagno

Views: 15,252

Keywords: .net, azure, .net core, angular, static web apps, azure static web apps, static web apps ver app service, static web apps blazor, azure static web app, javascript, blazor, next.js hosting, nuxt.js hosting, gatsby hosting, azure cloud, microsoft azure, microsoft azure tutorial, azure static web app tutorial, custom ssl certs, ssl certs, custom domains, azure free, azure basics for beginners, azure functions, github actions, web app hosting

Id: AgP4p8qhi4s

Length: 26min 32sec (1592 seconds)

Published: Thu Feb 16 2023