Deploy a .NET 10 Blazor WebAssembly App to Cloudflare Pages

Blazor is a modern way to build web applications. Instead of relying on JavaScript, it allows you to use C#. That’s the dream! In this guide, you’ll learn how to create a web application using Blazor and deploy it online using Cloudflare Pages.

Enough introduction. Let’s get started!

Install .NET 10

Blazor works with C#. To start a Blazor project, you need to install the .NET SDK. Simply download it and follow the installation instructions from the official website.

Creating a new Blazor WebAssembly project

Blazor projects come in two flavors: Blazor Server, which runs on the server, and Blazor WASM (WebAssembly), which runs directly in the browser. Since Blazor Server apps are not static, this guide focuses on Blazor WASM.

To create a new Blazor WASM application, execute the following command inside a newly created directory:

dotnet new blazorwasm -o BlazorApp

It’s also a good idea to include a .gitignore file. By adding a .gitignore, you ensure that only necessary files are pushed to your GitHub repository. Generate one by running the following command:

dotnet new gitignore -o BlazorApp

Create the build script

For deployment, Cloudflare Pages needs a way to build the Blazor project. In the root directory of the project, create a file named ci-build.sh and grant it execution permission.

cd BlazorApp
touch ci-build.sh
chmod +x ci-build.sh

Add the following content to the file:

#!/usr/bin/env bash
DOTNET_VERSION=10.0

curl -sSL https://dot.net/v1/dotnet-install.sh > dotnet-install.sh
chmod +x dotnet-install.sh

./dotnet-install.sh -c $DOTNET_VERSION -InstallDir ./dotnet
./dotnet/dotnet --version
./dotnet/dotnet publish -c Release -o publish

Replace DOTNET_VERSION with the version of .NET you want to use. In this guide, .NET 10 is used, so the value is set to 10.0.

Create a GitHub repository

Create a new GitHub repository by visiting github.com/new. Once the repository is created, go to your project directory and push all changes to GitHub by running the following commands:

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

Remember to replace <username> and <repo> with your actual GitHub username and repository name. As an example, you can view the final Blazor repository at github.com/pages-templates/blazor-app.

Deploy to Cloudflare Pages

Now it’s time to publish your Blazor app using Cloudflare Pages.

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

Choose the GitHub repository you just created. In the Set up builds and deployments section, use the following configuration:

• Production branch: master (or main, depending on your preference)
• Build command: ./ci-build.sh
• Build directory: publish/wwwroot

After saving the configuration, start the deployment. Cloudflare Pages will install dotnet, restore dependencies, build your project, and deploy the site.

Once deployed, Cloudflare Pages provides a default subdomain on *.pages.dev. You can also connect a custom domain if you like. For example, this Blazor app is deployed at lab.junian.net.

Whenever you push new commits to your repository, Cloudflare Pages will automatically rebuild and redeploy your site.

Conclusion

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

Now you can focus on coding, building, and shipping your app!

References

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