>> Did you know you can host
a Blazor single-page application in Azure storage as
a static website and also take advantage
of Azure CDN for improved global performance?
Jeremy Likness is here to show us how he moved an Angular app to
Blazor and host it in Azure for
pocket change today on Azure Friday.
[MUSIC].
Hey everyone, Donovan Brown here with
another episode of Azure Friday.
I'm here with Jeremy and he's going to show us how to host
Blazor applications inside of Azure.
So first off what is Blazor?
>> Blazor is amazing.
Okay. That's all I have to say.
It's something I resisted at first because I said,
"Do we need another front end web framework?"
What Blazor does is it takes the.Net
Framework and using a technology called
WebAssembly which is basically a sandbox that's
supported by all modern browsers including the phone.
There's an implementation of.NET that will run on WebAssembly.
So essentially what I can do is take.NET
applications and run them in the browser without a plug-in.
>> Or I can also stop writing
JavaScript and in place write C-sharp instead.
>> Exactly. That's why people love it.
Two main drivers behind Blazor.
Number 1, I don't have to learn
JavaScript or switch to a different language.
I can use C-sharp all the way.
Number 2, is I can leverage existing code that I've
written and have that actually plug into the browser.
I can truly share code between the server and the client,
which is something developers are looking for all the time.
>> Awesome. That was the same thing that drove me to Node,
was that I could write JavaScript on the server and the client.
>> Right.
>> Now, I can write C-sharp.
So it's leveled the playing field there
on which language you're actually going to want to go choose.
>> Exactly.
>> Got it. But I can also
take these applications and I can host them inside of Azure.
>> Yes.
>> Which is what we're here to talk about today.
>> Yeah. That's actually one of the amazing thing.
So I took what was an existing JavaScript-based application,
it was an Angular app and I
ported it to Blazor just so I could learn.
>> Sure.
>> What Blazor was about. Of course,
I got to a certain point where I said you know what?
I need to have this demo app up running
if I'm going to publish a blog post.
People want to see the application.
>> Sure.
>> So I've got the application here and it's a really
just a simple health app that you can put in your gender,
your height, your weight and it uses
some popular algorithms to show target heart rate etc.
But what's really neat is that,
Anthony Chu wrote this actually right when it was first
released the fact that Azure storage supports now static websites.
>> That's pretty cool.
>> So his blog posts walks through exactly how to take
a Blazor app and publish it to a static website,
which gives me tremendous benefits.
It's not only easy and straightforward.
It's as easy as uploading files and you can do
it as part of a deployment pipeline.
>> Sure.
>> But then you can also on top of that take advantage of
the fact that you can put a CDN in front of it,
and that'll get it actually closer to
the end users who are using your application.
>> Right. So now, when you want to actually host a spot
now you don't have to spin up a VM or even an App Service.
You can literally just take a simple storage account,
copy your files there,
and then you're going to get a URL that people can hit to
access that particular application. Okay. Got it.
Because Blazor is basically just another way to write a spot,
we can use that same technology
to host our Blazor apps just like we would
our Node or Angular or React or whatever the case might be.
>> Right. Exactly. The end result of Angular or
React or Review is you get
a set of static assets that you serve up.
Now, tho9e will talk to a back-end.
>> Sure.
>> The back-end doesn't change.
But with a Blazor you get that same set of static assets.
The only difference is those assets include
DLLs that are actually pulled in and run inside of the browser.
>> Got it. Those DLLs that are going to be
required because like you said it
works on the phone then it works on Mac.
That means those are going to be hosted on
the storage account or also in a CDN.
It makes them much easier for
people all over the world to get access.
>> Absolutely.
>> Got it. Show how this works.
>> Okay. First I'm going to jump
in just to show you a little bit of code.
This is my Blazor app.
If anyone writes ASP Net MVC,
it looks very similar,
only this is code running in the browser.
What I'm pointing out here is just I have
access to dependency injection.
So I can say every time I ask for the model,
give me the main model.
I have a little height slider that this is using razor templates.
Again, these are the same templates
that you would use in an MVC app.
Only in this case,
because it's an a Blazor app,
this is going to be rendered inside of
the browser and executed on the client side.
I have straightforward C-Sharp code
that's marshaling values back and forth.
This is another control that's taken the model and outputting it,
and that all results in this application that I showed
here that I can move parameters around,
I can play around with the weight,
and everything just dynamically updates as a result of that.
So as part of my build process,
I get a set of assets that I want to host.
>> Right.
>> This is a storage account that I created.
When I go into the storage account,
I've got access to this option right here, "Static Website".
Okay. The first time I go into this option,
it's going to be disabled.
So I just simply click "Enabled",
and it's going to give me an endpoint that we can just copy
out and paste it until you get the Blazor Health App.
That's how I got to this one.
It's just the same endpoint.
>> Okay.
>> We also tell it basically what
file is the default file to serve.
That's the index.
Now, what this does when you turn it on and you enable it,
is it creates this special Blob container called dollar sign web.
What dollar sign web does is it
contains the actual assets for my project.
So the index is what kicks everything off.
The bootstrap is what starts to load pieces,
and then if we go in this framework folder,
we've got our Blazor server, our Blazor WebAssembly.
This is the actual WebAssembly file. This is the.
Net runtime in WebAssembly ready to execute in any browser.
Then if we back up and we look at our bin directory,
these are the actual DLLs that are hosted.
So when I load this application,
I can come here and open up my debug and open up the network,
and I'm just going to refresh this.
What you'll see is
essentially DLLs loaded directly into the browser.
It starts out by bootstrapping the.NET,
and then all these DLLs are pulled in and executed.
>> Okay. So we were talking about,
yeah you don't have to write JavaScript anymore,
but there's a lot of JavaScript in that folder.
Was that generated for me?
>> That was generated for you.
That is just to wire him because WebAssembly needs
to talk to the HTML DOM.
So there's a little bit of JavaScript that wires up and
sets the hooks for those to communicate between each other.
But once it loads that WebAssembly file,
you're a 100 percent.NET inside of the browser.
>> Great. But as a.NET Developer,
I'm not going to have to learn how to write
the Bootstrap JSON. I mean, JavaScript.
>> Correct.
>> That gets written for me. Got it.
>> Yeah. You do file, new,
and publish and it's all there for you.
>> It's unbelievable.
>> Then the other aspect of this is once it's
hosted inside of the storage account,
what I can do is come down here,
and I've got another option which is Azure CDN.
Now, what this is going to do for me is I've got storage accounts,
may be I have multiple storage accounts.
But what I want to do is get these files and assets.
We're downloading DLLs.
>> Sure.
>> So we want to cache them.
We want it to be fast and give a good user experience.
So by applying the CDN endpoint and I can
basically create new, pick my tear,
and this is mapping right on top of
that static website that it created for me.
This will then allow those assets
to be distributed so that if someone's in
Australia even though my app is
hosted here on storage in the states,
they're going to get a copy close to them and have that
fast latency and that fast refresh when they access the website.
>> Right. So this is the same way of using
a CDN for your images of your JavaScript files.
Right. You want that content
close to the person consuming it as possible,
so that there's little latency of the network,
and now what we're doing is enabling
that exact same functionality for your Blazor applications.
>> Correct.
>> To a CDN is just a file it needs to be served.
It really doesn't care what the file actually is.
>> Right. Perfect. I also
noticed here it says custom domain as well.
So if I wanted to go register my fancy domain name,
friendly name, I could actually go
register that to the static site as well.
>> Right. Yeah. It's not very user-friendly if
all your websites and in Azure website.
So you can take Donovan Brown or how about the black shirt-
>> There you go.
>> -and make that the custom domain.
>> Very very cool.
Then in our little package there we said,
and you could just do this for pocket change.
>> Sure.
>> Is that accurate and how do we look at it?
>> That is very accurate.
So I'll preface it by saying that I loved storage.
I do a lot of experiments and host a lot of
apps on my personal Azure account.
>> Okay.
>> I don't have a huge budget to do that.
>> Sure.
>> So I use storage because storage is incredibly inexpensive.
I have one application that has geo-replicated storage.
So I've got fail over if the West Coast slides into the ocean.
>> Right.
>> I have a backup copy on the East Coast and it
still just cost me dollar amount,
and this is the actual cost for hosting this Blazor application.
Now, this is a demo applications.
>> Sure.
>> But it is getting hits and views daily for that.
>> Okay.
>> This is at the end of my billing cycle and
its cost me less than a dime.
>> Right. So if we were to go
10 times the traffic that you have
today we'd still be talking less than a dollar.
>> Right, to host this app
>> So this is really like a big proponent to go spot right?
>>Exactly.
>> You really want to start making your apps.
Being able to be statically hosted because
the cost savings that you'd have me thinking now
because I have a couple of app running right now make it.
Well, I'm definitely pay more than a couple of dollars to host
those apps every month and you gave me a lot to think about here.
This is really cool.
I didn't know what Blazor was until
we agreed to talk about this, which is really exciting.
So I'm glad to know about that,
and the fact that I can host them for so cheap is just incredible.
So thanks for coming and showing us this.
>> My pleasure.
>> We're learning all about hosting
your BlazOr applications in Azure here on Azure Friday.
[MUSIC]