Hosting Blazor on Netlify

Since Blazor is a frontend framework, we can host our Blazor apps on any serverless or static web host. The only requirement is that we can add minor configuration to redirect URLs so that all URLs point to our index.html page. Netlify fits this perfect. Netlify also happens to be my favorite host for static websites.

Prerequisites

• .NET Core 2.1 or later

• Blazor templates should be installed. dotnet new -i Microsoft.AspNetCore.Blazor.Templates

Create a Demo Blazor App

Create a new Blazor app with the command: dotnet new blazor -o staticDemo

Make sure your app works by running dotnet run

Netlify Specific Steps

Add a file named _redirects in your wwwroot directory.

Add the following line to your _redirects file:

/*    /index.html   200

This redirects any URL to the index.html file. Since Blazor is a SPA tool, if someone enters a URL such as oursite.com/counter we don't want the server to look for a counter file. Instead the server should direct the request to index.html which will take care of the routing.

If you publish on another static host or a serverless environment, check their docs for how to write a similar redirect.

Publishing to Netlify

Once we're done with that, the easiest way to deploy to Netlify is to add this to a GitHub repo.

Netlify can't build this project for us since they can't build dotnet. We'll need to handle building & adding the files to our repository.

By default the .gitignore file created with our project ignores the default build directory. You can modify your .gitignore file to not ignore the default release directory. Then you can run dotnet publish -c release.

Another option is to publish to a different directory using the -o parameter. Here's an example: dotnet publish -c release -o ./dist

Once you've done either of the above, push your changes to a GitHub repository.

After that you can go to Netlify & create a new site from your GitHub repository. After linking your site to your repo, you're prompted with deploy settings. You can ignore the build command. For the publish directory, add the directory you published to. It should look like this:

_framework
css
sample-data
_redirects
index.html

Every time you push changes to your repository, Netlify will re-deploy them.

Error Correction

If you run into WASM: wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'. in the console logs, there is an easy fix. In the comments below noahc3 discovered this error was slowing the app down. The fix, as mentioned by noahc3, was to add the MIME type to a custom _headers file that Netlify allows you to upload with your content. You can read more about this error on Blazor's GitHub issue #46 and Netlify's Header documentation.

To add a MIME type to Netlify create a file named _headers in your wwwroot folder. This file is similar to the _redirects file. When you build your project, it should also end up in the dist folder. Add the following line to the _headers file to add a WASM MIME type:

/*.wasm
Content-Type: application/wasm

When you publish this to Netlify you can click the deployment to view a deployment summary. You should see 1 header rule processed in the summary. Your error in the console log should also disappear.