Deploy & Host Blazor Static Web Apps for FREE in Azure in ONE click with Visual Studio

what if I told you you could take your Blazer webassembly applications and host them in Azure completely for free and do it all from visual studio with a few button clicks that's right the new Azure static web apps integration into Visual Studio 2022 automates all of it so let's check it out [Music] hey everyone I'm James and I'm back with a video adding on to my love for Azure static web apps I did a video up over here down there wherever you're at talking all about what Azure static web apps are and how you could take the template Fork it go ahead and deploy it with GitHub actions or Azure devops go ahead and create an Azure function back end and then deploy that set up custom domains and everything it has everything check out that video it's really really good but there's new Integrations into Visual Studio 2022 that lets me do the thing that I love the most which is right click publish and if they didn't want you to right click publish they wouldn't have put it right there so easily available so let's check it out we're gonna do this from scratch let's get a timer going I'm not actually going to put a timer but let's actually do it let's create a webassembly application this runs directly in the browser no server involved or anything like that so Blazer web assembly lets me create it and it'll go ahead and create everything that I need and this is going to be my standard index fetch data razor Pages everything that I love we're not even going to run it locally we're just going to deploy it and put it up immediately up into Azure now I am on the preview version 17.7 of Visual Studio 2022 so double check that you have that I'm going to right click publish now when I get here it's going to ask me where do I want to publish I'm going to say Azure and now I can go ahead and do Azure static web apps which are completely new container apps app service registry all the things that you know and love let's go ahead and publish it to Azure static web apps I have some deployed already I'm going to do pay as you go here and I'm just going to say create a new instance just like this now I am going to have to go into the portal to create the Azure static web app but it just takes a few seconds let's go ahead and create it here in my pay as you go I'm going to say vs 2022 static web app test cool hit OK for my Resource Group let's give it a name my awesome static web app vs test I don't know any name I want now I have the option of free or standard I went through all the different comparisons in um in this before but you can go ahead and open it up and see the plans and everything like that but you do get completely for free free um 100 Gig um bandwidth two uh apps per custom domains free SSL certs and maximum app size is 250 staging environments Azure functions and a whole bunch of good stuff so I'm going to select that now you can deploy it from GitHub or Azure devops so you can put in your CI CD which is great I'm going to hit other though because we're going to use other which is Visual Studio 2022. this is going to verify everything that I need and I'm going to go ahead and hit create now this is cool because it literally just takes seconds to get up and running Azure static web apps are so fast it's already done boom it's here I have a URL it's ready to go that was just that fast all right let's go back into visual studio hit refresh I'm gonna go ahead and pick my new Azure static web app and hit finish it's going to create it for me right here now at this point you're going to see one of two things you're going to see this screen which is you're ready to publish and things are totally good to go or you're going to see a big red box that says you don't have the static web app CL I click on this button to do so so if you see that it's going to take you to the static web app CLI and you're just going to need to install it via npm now when you do this you can do it from any terminal or the one in visual studio if you install it and you haven't done so close Visual Studio reopen it up or else you're going to run into errors when you try to deploy so install it get it set up and then go ahead and restart Visual Studio 2022 because I ran into this problem if you are experiencing a deployment issue once you're done you just hit publish now this is going to go off to Azure automatically build it deploy and do everything that I need and the first thing it's going to do is authenticate so that's the CLI there and it's going to publish my app so here we go we're just going to let it build get everything all packaged up and then deploy it into Azure static web apps now this is the longest part of the process so I'm gonna fast forward through all this so we save some time so let's go ahead and wait and just like that it is deployed look how fast it is Boom here's my uh Azure static web app my blazer app my counter fetching data and I have it all up and running that was really fast in fact I timed it locally is about a minute 20 or so to actually get it deployed from visual studio 2022. now of course if I come back I make any changes I can go ahead and publish it again of course I can set up CI CD and all that stuff later on if I want but there we go in just a few minutes I am off and running it's really really neat how productive you can be with tools like this getting you all set up and deploying websites in literally minutes up into Azure I hope you like this video if you're running any issues or have any questions or any thoughts put them in the comments below if you like this type of content give it a thumbs up subscribe and hit that notification Bell so you get notified every time I put out a video right here on my channel hope that you enjoy this if you did please please let me know I really appreciate it until next time I'm James thanks for watching thank you [Music] foreign [Music]

Channel: James Montemagno

Views: 6,877

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, .net framework, .netcore, dotnet

Id: r3d9Cd5kwY0

Length: 6min 7sec (367 seconds)

Published: Sat Jun 03 2023