What if I told you you could take your Blazer web assembly 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.
Hey everyone.
I'm James and I'm back with a video adding onto 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
backend 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 gonna put a timer, but let's actually do it.
Let's create a web assembly 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 gonna gonna be my standard index fetch data, razor
pages, everything that I love.
We're not even gonna run it locally, we're just gonna 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 gonna right click.
Publish now, when I get here, it's gonna ask me where do I wanna publish?
I'm gonna 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.
Now I have some deployed already.
I'm gonna do pay as you go here.
And I'm just gonna say create a new instance just like this.
Now I am gonna 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 gonna say VS 2022 static web app test.
Cool.
Hit.
Okay.
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 from completely for free.
Free, um, a hundred gig, um, um, bandwidth, two, uh, apps per, uh,
custom domains free SSL certs and maximum app sizes, two 50 staging
environments, Azure functions, and a whole bunch of good stuff.
So I'm gonna select that now.
You can deploy it from GitHub or Azure DevOps, so you can put
in your C I C D, which is great.
I'm gonna hit other though.
Because we're gonna use other, which is Visual Studio 2022.
This is gonna verify everything that I need, and I'm gonna
go ahead and hit Create.
Now this is cool because it literally just takes seconds to get up and running.
Azure Set Web apps are so fast, it's already done.
Boom.
It's here.
I have a r l.
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 gonna create it for me right here.
Now at this point, you're gonna see one of two things.
You're gonna see this screen, which is you're ready to publish
and things are totally good to go.
Or you're gonna see a big red box that says you don't have the static web app,
C l I click on this button to do so.
So if you see that, it's gonna take you to the Static Web app cli and you're
just gonna 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 gonna run into errors when you try to deploy.
So install it, get it set up, and then go ahead and restart Visual Studio 2022.
Cause I ran into this problem.
Uh, if you are experiencing a deployment issue, Once you're
done, you just hit publish.
Now this is gonna go off to Azure, automatically build it, deploy,
and do everything that I need.
And the first thing it's gonna do is authenticate.
So that's the CLI there, and it's gonna publish my map.
So here we go.
We're just gonna let it build, get everything all packaged up, and then
deploy it into Azure setting web apps.
Now this is the longest part of the process, so I'm gonna fast forward
through all of this so we save some time.
So let's go ahead and wait.
And just like that, it is the deploy.
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.
It 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 is 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 run into any issues or have any questions or any thoughts,
put 'em 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 enjoyed this.
If you did, please, please let me know.
I really appreciate it.
Until next time, I'm James.
Thanks.