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.
Blazor templates should be installed.
dotnet new -i Microsoft.AspNetCore.Blazor.Templates
Create a new Blazor app with the command:
dotnet new blazor -o staticDemo
Make sure your app works by running
Add a file named
_redirects in your
Add the following line to your
/* /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.
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 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.
One Last Thing...
If you have a question or see a mistake, please comment below.
If you found this post helpful, please share it with others. It's the best thanks I can ask for & it gives me momentum to keep writing!