How to use Blazor and C# to host a static website in Azure Storage | Azure Tips and Tricks

>>Learn how to use Blazor
and C-sharp to host a static website in Azure Storage in this episode of Azure
Tips and Tricks. Blazor is a cool new
feature of ASP.NET that allows you to build
client web apps using C-sharp. We’ll create a client-side
Blazor Web Application and host it in Azure storage using
the static websites feature. I’ll use Visual Studio 2019 to
create the blazer app with. To find out what you need
to install to use blazer, visit this URL. Here we go. I’ll do File New Project, and here I select the ASP.NET
Core Web Application. Now I’ll give it a name,
MystaticBlazorApp. All right. “Create”. Here, I can choose
the client-side Blazor template, here it goes, and this is
the Blazor Application, it has files in it with
the razor extension. If we take a look inside one, we can see that it uses C-sharp. Here I call a C-sharp method from the Onclick events of
the button. Cool, right? Let’s run this locally. Here it goes. Let’s go to the Counter page and see, it increments the number when
I click the button, very cool. All right. To run this in Azure, we need to get files that we can run. Right-click the project
and click “Publish”. Now select “Folder”. This is the folder where it will
be published and “Publish”. There we go. Let’s see
the results in the File Explorer. It should be in been
release in this one and it should be in the published folder
and almost there and that’s it. The result is in the dist folder. This is the stuff that we
need to copy to Azure to run it and see it has an
index.html in it, which will be the starting point
of the application. Before we can run the app, we need a storage account. So here in the Azure portal, I’ll create a new Azure
storage account. Here we go. First, I’ll create
a new resource group. All right, and give
it a name like this. The rest seems good. Make sure that you create
a V2 storage account. This has the static website feature. Now created. All right. This can take awhile, so I’ll
skip ahead until it’s done. Here is the Azure storage
accounts that we’ve just created, and here is the Static
website feature. Let’s take a look. By
default it’s disabled, so let’s change that. The only thing that we
need to do is fill in the index document name
which is index.html. This is the default page
that the website will start on, and now save it. It’s now enabled and we can use
this URL to go to the website. There’s nothing in there yet, so let’s go and put our files
in the storage account. Will do that with the Azure Storage
Explorer which you see here, this is a free tool that
you can download here. Here is the account
that we’ve created, and this is the web container that the Static websites
feature created. So now I can just drag
the files for our web app in here and they will
be uploaded, that’s it. All right. Let’s go back. I’ll copy this URL
and paste it in here. Here it is, our Blazor App as a Static websites that runs
in Azure, and let’s see. Yeah. It actually works. So this is C-sharp running
in the browser. The website runs very inexpensive, very performance and
very reliable because it runs on Azure Storage.
Go check it out.

Leave a Reply

Your email address will not be published. Required fields are marked *