Blazor WebAssembly on Azure Static Web Apps
Many 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.
Resources
- Guided Tutorial - Publish a Blazor WebAssembly app and .NET API with Azure Static Web Apps
- Quickstart: Building your first static web app
- Blog: ASP.NET Blog post announcement - Blazor and Static Web Apps
- How To: Chris Noring's How to deploy Blazor 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.
About Newsletter
Reece Watkins
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".)
- 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.
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.
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?
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.