Scott Hanselman

Blazor WebAssembly on Azure Static Web Apps

September 23, 2020 Comment on this post [17] Posted in ASP.NET | DotNetCore
Sponsored By

Blazing Pizza Blazor AppMany apps today are just static files on the front end - HTML and JavaScript - with something powerful on the server side. They aren't "static apps" as they have very dynamic front end experiences, but they are static in that their HTML isn't dynamically generated.

As such, you don't need to spend the money on an Azure Web App when an Azure Static Web App will do! These apps get free SSL certs, custom domains, web hosting for static content, and fit into a natural git-based workflow for publishing. You can build modern web applications with JavaScript frameworks and libraries like Angular, React, Svelte, Vue, or using Blazor to create WebAssembly applications, with an Azure Functions back-end or publish static sites with frameworks like Gatsby, Hugo, VuePress.

But there's big news out of Ignite this week, with Azure Static Web Apps now supporting Blazor applications. You can develop and deploy a frontend and a serverless API written entirely in .NET.

To get started "hello world style" there is a GitHub repository template that's a starting point. It's a basic web app with a client that uses Blazor and .NET that is run on the client-side in your browser using WebAssembly.

Called it! It's almost a decade later and yes, JavaScript (and WebAssembly) is the assembly language for the web!

So the client runs in the browser written in C#, the server runs as a serverless Azure Function (meaning no identifiable VM, and it just scales as needed) also written in C#, and this client and server share a data model between Blazor and Functions also written in...wait for it...C#.

An app like this can basically scale forever, cheaply. It can put the browser to work (which was basically hanging out waiting for anglebrackets anyway) and when it needs data, it can call back to Functions, or even Azure CosmosDB.

Be sure to check out this complete Tutorial: Building a static web app with Blazor in Azure Static Web Apps! All you need is a GitHub account and any free Azure Account.

If you want more guided learning, check out the 12 unit module on Microsoft Learn. It shouldn't take more than an hour and you'll learn how to Publish a Blazor WebAssembly app and .NET API with Azure Static Web Apps.


Also be sure to check out the Day 2 Microsoft Ignite Keynote by yours truly! The app I made and demo in the keynote? Made with Blazor and Azure Static Web Apps, natch! The keynote is happening in three time zones so you can see it at a time that works for you...or on-demand!

Sponsor: Upgrade from file systems and SQLite to Actian Zen Edge Data Management. Higher Performance, Scalable, Secure, Embeddable in most any programming language, OS, on 64-bit ARM/Intel Platform.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
September 23, 2020 14:57
Wow! This has many possibilities. Thanks for the tip, Scott! BTW, any chance for an update on the Dev Tool List? 2014 was a looooong time ago...
September 23, 2020 15:36
Blazor is great. It is very flexible and provides many possibilities. Need to learn that technology. Looks like it's future of .NET web development.
September 23, 2020 18:03
Many apps today are just static files on the front end - HTML and JavaScript - with something powerful on the server side.
Ironically, Microsoft coined the term "Dynamic HTML" for these apps. Now the same company is calling them static. (This is not criticism though. Language changes a lot like this. For example, what was once called "online help" is now called "offline help".)
September 23, 2020 18:05
Great news! For those looking for CMS capabilities, take a look at Squidex as a back-end.
September 23, 2020 22:03
Oh my goodness. How fantastic. WebAssembly is making things interesting. It's great that people can work in the languages they are most comfortable with and produce fast reliable systems.
September 24, 2020 1:15
Fix the web problems
- there is no direct way to bind a HTML element to a JavaScript, or other language, object without some clumsy large (Angular?) library and lots of buggy string matching
- there are too many parts of JavaScript to HTML interaction rely on string matching

Fix these two first instead of tiptoeing around and around with framework of the month, Blazor or whatever.

September 24, 2020 1:19
A caveat to this. We recently tried switching from Blazor Server to Blazor Client to take advantage of static hosting and discovered that the performance of Blazor Client is currently not good enough for apps with lots of components (such as large grids). Blazor Server was surprisingly much better.

This is due to 2 things:
1. The lack of optimisation in Blazor client for .net core 3.1. .net 5 sounds like it should improve this a lot.
2. A fundamental restriction on WebAssembly which means that it can't access the DOM directly, while JS can. So there is various serializations going back and forth between JS and WebAssembly to make DOM changes.
September 24, 2020 2:58
The link to on is giving me a 404
September 24, 2020 5:26
@Brian - the exercise page says "If you get a 404 Page Not Found error, sign in to GitHub and try again." Have you tried that? It's working for me
September 24, 2020 12:40
Could you use an Azure Static Web App if the app was virtually 99% actually static HTML files, with some JS for purely presentation purposes, i.e. image gallery?

The only server side bit is a bit of PHP to handle a contact form and email the details to me.

Would this end up being cheaper than per month than paying for hosting, SSL, storage space for HTML/JS/image/CSS files?
September 25, 2020 16:00
Interesting! Blazor is really great. Seems like it's future of web development in .NET.
September 26, 2020 11:48
I think Blazor WebAssembly is great, since it lets you run C# in the Web Browser. And Microsoft is working with Blazor for the future.
October 01, 2020 10:50
C#, .NET, ASP.NET, SQL Server lead. With each new Microsoft technology, I think is it Silverlight and Lightswitch both of which had usable lifespans of less than 5 years with actively developed new features.

October 01, 2020 13:27
its great article thanks for share
October 01, 2020 14:31
Good morning! I have been seeing my therapist for about two months now and it has been wonderful. He is very attentive and has good suggestions and tools to offer. He gave me practical things during the last week to help me heal. John knows what he is doing! So, online therapy is incredible!!!
October 02, 2020 23:20
I remember me and my friends in English class using Aim express and talked trash to each other. Our teacher didnt baseman to care much Top 10 Websites You Loved
October 09, 2020 17:26
The problem with Azure is that it is prohibitively expensive for small-to-medium sized businesses for your average website with static content / low traffic. Shared web hosts (like GoDaddy) are far cheaper but there technology is terrible.

Will Azure Static Web Apps finally fix that? I've never understood why Microsoft / Amazon / Google don't just undercut this market and take it over.

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.