Azure Static Web Apps, Blazor, Authentication and Visual Studio 2022

Azure Static Web Apps is a very easy way to create a secured Blazor Web Assembly application with a backend API based on Azure Functions. I will walk you through getting this all setup and running on your local workstation using Visual Studio 2022.

Azure App Services

I have a public repo that is up and working, but I suggest you walk through this yourself so you can better understand it.

You will need the following to complete these steps:

1. Visual Studio 2022 installed on your workstation with the Azure development and ASP.NET and web development workloads.
2. A GitHub account.
3. Node.js installed on your workstation.
4. An Azure account to deploy your solution to the web.

Starting Template

Microsoft has a GitHub repository that you can use to get up and running quickly with Blazor and Azure Static Web Apps.

1. Create your own GitHub repository by using the Blazor Starter Template.
2. Follow the Getting Started steps in the repo.

Azure Static Web Apps CLI

The README suggests setting both the API project and Client as startup projects. When you run the application and access the site on port 5000 it will work until you try to authenticate a user. For that we need to run the CLI above as a proxy listening on port 4280.

3. Install the Azure Static Web Apps CLI globally by running:

npm install -g @azure/static-web-apps-cli

Configure the Project

Let’s update the client project settings to open the browser on the correct port.

4. Update the Client launchSettings.json file to launch the browser on port 4280 instead.

"BlazorApp.Client": {
  "commandName": "Project",
  "dotnetRunMessages": true,
  "launchBrowser": true,
  "launchUrl": "http://localhost:4280/",
  "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
  "applicationUrl": "http://localhost:5000",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
  }
}

Configure Visual Studio

You can run the CLI manually, but we can make this easier with Visual Studio.

5. Install the Command Task Runner (64-bit) extension.

6. Add a file called StaticWebApp.cmd to your solution folder and include the following command in it.

swa start http://localhost:5000 --devserver-timeout=6000000

(That timeout is in milliseconds and set to give you plenty of time between project open and first launch. Feel free to adjust it.)

7. Open the Task Runner Explorer window in Visual Studio. Find your StaticWebApp command and set it to open on project open.

Task Runner Explorer

Or you can add a commands.json file to the solution folder manually and include the following:

{
  "commands": {
    "StaticWebApp": {
      "fileName": "cmd.exe",
      "workingDirectory": ".",
      "arguments": "/c StaticWebApp.cmd"
    }
  }
, "-vs-binding":{"ProjectOpened":["StaticWebApp"]}
}

This will now launch the SWA CLI when you open the project and leave it running the background.

You should now be able to work with Visual Studio and Azure Static Web Apps using authentication by simply clicking the Start button.

Adding Authentication Code

When running the application locally you do not need to manage any users or roles. The CLI provides a mock interface for logging in for development and testing.

Mock Security Provider UI

This video will guide you through updating the user interface to add a login page, secure the user interface and secure the API.

How to secure your C# API with Azure Static Web Apps video

Optional: Windows Terminal

The Function app will launch a terminal Window that will stay open after you stop debugging. One way to fix this is to change the setting in Windows Terminal to Close when process exits, fails, or crashes. You will find this setting under Defaults > Advanced.

Windows Terminal Setting

Summary

My goal here is to get your Blazor Azure Static Web App up and running locally in Visual Studio with authentication and running with a single click providing as little friction as possible. Hopefully, this will give you a development experience that is as easy as the deploy experience found with Azure Static Web Apps.