How to deploy Blazor apps to Cloudflare and Netlify

Blazor web assembly apps produce static files. These files don’t need to be run on a web server. They can be sent directly to the end-user and executed in their browser.

This makes Blazor apps super flexible in terms of hosting. We’re not stuck to the traditional hosting providers and can try out some of the more exciting ones.

Since the rise of JAMStack apps hosting has become a very slick process. A lot of providers now connect straight to your Git repo without the need to set up messy deployment pipelines.

In this post, we’re going to try and deploy the Wordle Blazor app we made previously to Cloudflare and Netlify.

Because this is a hobby project we’re going to be comparing the free plans across the providers.

Cloudflare

Cloudflare’s hosting platform is called Cloudflare Pages. It sits on top of their massive edge network so you know performance is not going to be a problem.

Their free plan is pretty amazing. They let you have unlimited sites, requests, and bandwidth. The only thing that’s limited is the builds. A max of 1 build at a time and 500 total builds per month.

Deployment

To set up the deployment I followed their Blazor guide. They recommend adding a build.sh file to your repo for the script to build the Blazor project.

The script needed is very simple. First, it downloads and installs the .net 6.0 SDK onto the Cloudflare agent. Then it runs the standard ‘dotnet publish’ command to build the project.

When you have the script added to the repo you need to add the site in the Cloudflare portal.

First, authorize Cloudflare to access your Github and select a repository:

Then click ‘Begin setup’ and fill out the build parameters like so:

At this point, by following the Cloudflare guide I ran into two errors when running the build.

First error

/opt/build/bin/build: line 39: ./build.sh: Permission denied

To fix this replace the build command “./build.sh” with “chmod +x build.sh && ./build.sh”

Second Error

curl: (51) SSL: certificate subject name (*.azureedge.net) does not match target host name 'dotnet.microsoft.com'

To fix this I edited the build.sh script and added the insecure option to the curl command so now it looks like this: “curl –insecure https://dotnet.microsoft.com/download/dotnet/scripts/v1/dotnet-install.sh > dotnet-install.sh”

View the full build.sh file here: https://github.com/Liam-Hunt/blazor-wordle/blob/main/build.sh

After fixing these errors the build was successful:

And the app was deployed: https://blazor-wordle.pages.dev yay!

Netlify

Netlify has a bunch of tools for hosting any type of SPA. Like Cloudflare pages site files are hosted on the edge and deployments can be triggered from Git.

Netlify’s free plan is more limited than Cloudflare’s. While you can still host unlimited sites, bandwidth is limited to 100GB per month. Any additional bandwidth comes at a cost of $20 per 100GB.

The limit on builds is this time measured in minutes, 300 a month. It took 1.5 minutes to build my Wordle Blazor app which equates to 200 builds per month. Less than half of Cloudflare’s 500.

Deployment

The Netlify deployment follows the same flow as the Cloudflare deployment.

First, connect Netlify to your Github:

Pick the repository you want to deploy:

Add the build command:

The Netlify agents already have the .net SDK installed. So the build command just needs the dotnet publish command. Now just need to add the public directory and click the deploy site button.

And it works first time!

By default, Netlify gives your site a random name and URL. You can change this by going to Site Settings -> General -> Change Name

Setting the name to blazor-wordle regenerates the URL to: https://blazor-wordle.netlify.app