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 need to 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.

If you run into issues or you deploy this elsewhere, let me know in the comments below.

Originally posted on mattferderer.com.

Comments

[Josiah Bradbury]

Thanks for this tutorial! I learned how to deploy and also learned about netlify all in one place!

[Matt Ferderer]

Thanks for sharing! I'm glad it was helpful. Netlify is by far the most amazing host for static content I've found. The fact that they give away a large chunk of great features for free is icing on the cake. They've also got an amazing community built up & have had one for years now.