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.

Resources

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 10: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 11: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 14: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 14:05
Great news! For those looking for CMS capabilities, take a look at Squidex as a back-end. https://squidex.io/
September 23, 2020 18: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 23, 2020 21: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.
ST
September 23, 2020 21: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 23, 2020 22:58
The link to https://github.com/MicrosoftDocs/mslearn-staticwebapp-dotnet/generate on https://docs.microsoft.com/en-us/learn/modules/publish-app-service-static-web-app-api-dotnet/2-exercise-get-started is giving me a 404
September 24, 2020 1: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 8: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 12:00
Interesting! Blazor is really great. Seems like it's future of web development in .NET.
September 26, 2020 7: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 6: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 9:27
its great article thanks for share
October 01, 2020 10: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 http://therapy-reviews.com/ is incredible!!!
October 02, 2020 19: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 zakruti.com Top 10 Websites You Loved
Max
October 09, 2020 13: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.
Sam

(will show your gravatar icon)
2+5=?
Comment (Some html is allowed: a@href@title, b, blockquote@cite, em, i, li, ol, pre, strike, strong, sub, super, u, ul) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.  

Live Comment Preview

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