Deploy a .NET 8 Blazor Site to Cloudflare Pages

Blazor is a special way to make web applications. Instead of using JavaScript, it uses C# code. That’s the dream! In this guide, you’ll learn to create a web application using Blazor and then put it online using Cloudflare Pages.

Enough introduction. Let’s get started!

Install .NET 8

Blazor works with C#. To start a Blazor project, you’ll have to get the .NET SDK installed. Just download and follow installation instructions from official website.

Creating a new Blazor WebAssembly project

Blazor projects come in two flavors: Blazor Server, which operates on the server, and Blazor WASM (WebAssembly), which runs directly in the browser. Since Blazor Server isn’t static, this guide will focus on Blazor WASM.

To start a fresh Blazor WASM application, simply execute the following command within a newly created directory.

dotnet new blazorwasm -o blazor-wasm

It is also a good idea to include a .gitignore file. By creating a .gitignore file, you ensure that only necessary files are pushed to your GitHub repository. Generate a .gitignore file by executing the following command.

dotnet new gitignore -o blazor-wasm

Create the build script

For deployment, Cloudflare Pages requires a method to compile the Blazor project. Within the root directory of the project, create a file named ci-build.sh and grant execution permission.

cd blazor-wasm
touch ci-build.sh
chmod +x ci-build.sh

Inside the file, include the following content.

#!/bin/sh
curl -sSL https://dot.net/v1/dotnet-install.sh > dotnet-install.sh
chmod +x dotnet-install.sh
DOTNET_VERSION=8.0
./dotnet-install.sh -c $DOTNET_VERSION -InstallDir ./dotnet
./dotnet/dotnet --version
./dotnet/dotnet publish -c Release -o output

Create a GitHub repository

Create a new GitHub repository by navigating to github.com/new. Once the repository is created, proceed to your recently crafted project directory to organize and upload your local application to GitHub. Execute the following commands in your terminal:

git init
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git add .
git commit -m "Initial commit"
git push origin

In this example, you can see the final Blazor git repository on github.com/godo-dev/blazor-wasm.

Deploy to Cloudflare Pages

Now let’s publish your Blazor app to the world by using Cloudflare Pages. Here is how.

1. Sign in to the Cloudflare dashboard and select your account.
2. In Account Home, click on Workers & Pages.
3. Select Create application > Pages > Connect to Git.

Select the recently created GitHub repository, then in the section for Set up builds and deployments, use the following configurations:

• Production branch: master
• Build command: ./ci-build.sh
• Build directory: output/wwwroot

Once you’ve set up your site configuration, you can initiate your deployment. Cloudflare Pages will begin by installing dotnet, handling your project dependencies, and building your site before deploying it.

Once your site is deployed, you’ll get a special subdomain for your project on *.pages.dev. Optionally, you can set it with your domain. For example, I deployed my Blazor site here on blazor.godo.dev.

Whenever you commit new code to your Blazor site, Cloudflare Pages will automatically rebuild and deploy your project.

Conclusion

That’s all you need to do to publish your Blazor site worldwide.

Now all you need to do is focus on coding, building, and shipping that app!

References

• Deploy a Blazor Site · Cloudflare Pages docs
• Download .NET (Linux, macOS, and Windows)