I ❤️ .NET

In this article, let's learn about Publishing Blazor apps to Azure Static Web Apps.

Note: If you have not done so already, I recommend you read the article on Blazor WASM Dockerizing.

Table of Contents

1. Introduction
2. Publishing to Azure Static Web Apps
3. Summary

Introduction

With ASP.NET Blazor WebAssembly (WASM) you can create .NET web applications that run completely inside of the browser sandbox. The publish output of a Blazor WASM project are all static files. Now that you can run .NET web applications without server-side code, you can deploy these applications to various static site hosts, such as Azure Static Web Apps and AWS Amplify. With the Blazor WebAssembly hosting model:

• The Blazor app, its dependencies, and the .NET runtime are downloaded to the browser in parallel.
• The app is executed directly on the browser UI thread.

Publishing to Azure Static Web Apps

Prerequisites

1. Create a Blazor Wasm Project.

2. Application source code must be inside of a GitHub repository. So, you need to create a local Git repository and commit your source code to the repository using these commands.

   Code Sample - Create Local Repository
3. Create a Azure Account

Push Blazor Project to GitHub

Create a new GitHub repository (instructions) and copy the commands to "push an existing repository from the command line" from the empty GitHub repository page, here's what it should looks like but with a different URL:

Create a Azure Static Web App

Now that your source code has been pushed to GitHub, you'll need to create a Azure Static Web App that provision your pipeline, build the project and publishes the code to a random https URL.

Start by navigating to the Azure portal and search for Static Web Apps and click on it:

Clicking that link will take you to the Static Web App section. Now click on Create under Static Web Apps.

Now select Subscription and Resource Group and give your static web app a nice name and select plan and select GitHub as the Git source code provider.

And select the organization, repository, and branch where your Blazor WASM project is located. Now Azure Static Web Apps will determine the Build Preset (project type) as blazor and auto populate the App Location, Api Location and Output Location. Simply Clear the Api Location and Output Location and click the next button:

Note: I'm clearing Api Location because I'm not going to use Azure Functions and Output Location because I'm going to use the custom build.

Now review the details and click on create.

On the next page, Azure will show the Static Web Apps deployment progress.

Now click on Go to resource. Here you can pretty much do all possible things in your static web apps like managing deployment token, configuring custom domain etc..

Now lets switch back to github repo to see the changes made by Azure Static Web Apps. You can see a new workflow file named azure-static-web-apps-gray-coast-0ac087f10.yml added by static web apps. This file is responsible for building and deploying the app to Azure Static Web Apps. I'm going to ignore this file and delete it as the build made by this file fails (in most of the cases if your app needs custom build steps) and its not needed for my app.

So Instead I'm going to simply update my existing workflow file with azure deployment step as shown below.

If you notice in the above code snippet, I have configured skip_app_build to true because I'm not going to use the default build provided by Azure Static Web Apps and I'm going to use the custom build. I have already published my app and placed it in dist/Web/wwwroot so I'm going to use that as app_location and use empty values for api_location and output_location.

Note: You can find more options in the following link Build configuration for Azure Static Web Apps

You can get the deployment token from the below screen in azure portal and add it to your github secrets.

Now when you commit the code the deployment will be triggered and you can see the deployment logs in the actions tab in github.

Once Azure finished deploying, visit your Blazor app hosted in Azure by clicking on the URL in the Azure Static Web Apps Overview screen or the URL shown in Github Actions Logs as shown above.

Thats it. Your app will now be deployed in the above mentioned URL with https enabled.

Verify the Blazor WASM application is working as expected. Even when you navigate or refresh, the Blazor WASM application is returning as expected. But when you look in the browser developer tools, you will see the page is actually returned with an HTTP status code 404.

Rewrite all requests to index.html

To fix the 404 issues, you need to tell Azure Static Web Apps to rewrite all requests to index.html. You need to add Redirect rules in staticwebapp.config.json and place it in the root of your Blazor WASM project as shown below.

This rule will match all requests except if they end with the listed file extensions. This rule is based on the rule provided by Azure's documentation "Configure Azure Static Web Apps", but with extra file extensions required by the Blazor WASM application. You can find out all the extensions used in your Blazor WASM application using PowerShell. Open a PowerShell window, publish the Blazor WASM application using the .NET CLI, and the last command will recursively look for all files and list out all unique extensions.

When you navigate back to the Blazor WASM application hosted in Azure Static Web Apps, the 404 response codes should now be 200.

Configure Domain

You can also use custom domain to load your blazor wasm app.

1. Purachse your custom domain.
2. Add your domain name in the custom domain section in Azure Static Web App Overview.
3. After some time your site will be published under your domain.

Summary

Blazor WebAssembly can be served as static files. These files can be hosted in static hosting sites such as Azure Static Web Apps. Using Azure Static Web Apps you can create a app and select GitHub as source provider to automatically deploy the Blazor application to Azure Staitc Web Apps. Out of the box, when you refresh the Blazor WASM application while not at the root path, Azure Static Web Apps will return the index.html file but with a 404 status code. You can use Azure's staitcwebappconfig.json functionality to return the index.html file with status code 200 for all requests not requesting a specific list of extensions.