Host Your Blazor Client on Netlify

This week I’ve been looking into moving my blog from wordpress self-hosted to a generated static site hosted on netlify. I was literally blown away at how dead simple it is to get up and running on netlify.

Unfortunately that migration process slowed down when I started converting wordpress posts to markdown format (even with the exitwp tool), however, a seed was planted.

Later this week when I was getting started creating my first Wasm/Blazor client from the VS2019 templates I had a hunch that I could host this on netlify. Once again, it was easier than I could have imagined.

Sidebar: Blazor is changing so quickly right now. And I’m using sdk 3.0 preview 4. I’m sure any screenshots will be outdated within a week or so.

Create a Basic Blazor Client Project Using the VS2019 Template

First get the latest update of VS2019 then make sure you have the latest .Net Core SDK 3.0 PREVIEW. Enable the preview in visual studio so you can actually use 3.0. In my opinion to get the best Blazor at the moment you have to be close to the front lines.

Checkbox for enabling preview versions of .Net Core SDK in Visual Studio 2019
Enable .Net Core SDK Preview Usage in Tools Menu > Options > Projects and Solutions > .Net Core

Now install the Blazor extension for Visual Studio. This isn’t necessary to build Blazor projects but it has some handy tools like a template for creating a client-side only Blazor app.

Use Manage Extensions to into the Blazor extension for Visual Studio
Extensions Menu > Manage Extensions

Create a ASP.NET Core Application. You may have to select ASP.NET Core 3.0 from the sdk dropdown menu.

Use the New Project Wizard to create a project using the Blazor (Client-side) template.

Publish the Blazor Client Site and Upload to Netlify

You can run the project from visual studio using the run button. Do that. Then right click on the project in Solution Explorer and select Publish. Use the folder option and select a location for the static output files (I use the default location).

Use the Publish wizard to save the wasm and associated static files for a local folder.

And now the fun part. Navigate to that folder where the static files were created and drag the dist folder into the browser of your netlify account. Magic. Deployment is automatic. It even handles SSL for you.

Drag the dist folder from your publish location into the Sites page of your Netlify account.