Walkthrough: Deploy a Blazor WASM app running on a Free Azure Static Webapp instance

Azure Static Web Apps are one of my new favorite things. Azure static apps are essentially static file servers - there's no compute resources available on them. They're optimized to work for front-end applications e.g. Blazor WASM, Angular, Vue, React, etc. In order to support server-side compute, Azure Static Apps integrate with Azure Functions.

What I love about this stack is that it's all free for small projects. They provide a free 'hobbyist' tier, and free SSL certificates, so the only thing you need to pay for is a domain (and even then you can skip that and use a generated *.azurestaticapps.net domain). For Azure functions, the first million requests per month are free. After that they're still dirt cheap.

Create a Blazor WASM Project and Deploy to Azure Static Webapp

Let's walk through how to deploy a blazor wasm project to an azure static webapp. I happened to recently buy the domain blankwallpaper.com, so we will make an app for generating blank wallpapers and get it deployed.

In order to start, you'll need accounts on Microsoft Azure and Github, and a blank Github repository to work with. In my case it is a private github repo called dsschnau/blankwallpaperdotcom. If you are reading this and learning to build web applications from scratch, I suggest learning Git and GitHub from another resource.

Using the dotnet CLI, I can spin up a new blazor wasm application, and push it to my repo in GitHub.

use dotnet cli to init a blazor wasm application use git to push code to github

From the azure portal, we first create a Static Web App resource, and walk through a few bits of configuration.

Create Azure Static Web App

Then we need to configure a few things. GitHub and Azure are tightly integrated (Microsoft owns GitHub after all 😅) so finding my repo is straightforward.

Configure Azure Static Web App

We can leave the 'Advanced' section by default, so here's the preview before running the deployment

Preview Create Azure Static Web App

The deployment takes about 20 seconds.

deployment complete

This deployment does two things. First, it creates the resource in Azure. Then it creates a Github Actions Job and automatically kicks off the first deployment. After about a minute, the first deploy is done, and our hello world app is deployed. Subsequent commits to main will trigger new deployments.

new azure static webapp github action hello world

Off to the races! This leaves off configuring Azure Functions as a backend and Custom Domains. I will save those subjects for another day.