Publishing Blazor WebAssembly Apps

After working so hard on your app and after going through all the difficult moments while debugging an error or learning a new technique to build a new feature, the feeling of seeing your app online is priceless, regardless of how big or simple it is.

Finally, it is that time for us. It’s time to put the app we have built so far online and make it accessible via a public URL and have a party after that.

In this chapter, we will introduce some final checks to do for your Blazor WebAssembly app before the release; then, I will introduce you to Blazor WebAssembly ASP.NET Core Hosted. We will also cover the concepts of continuous integration (CI) and continuous delivery (CD). Finally, we will push the project to Azure App Service and Azure Static Web Apps using the Azure portal and GitHub Actions.

In this chapter, we will go over the following topics:

• Blazor WebAssembly app prerelease checks
• Getting to know the Blazor WebAssembly...

Technical requirements

The Blazor WebAssembly code and the API project used throughout this chapter are available in the book’s GitHub repository in the Chapter 14 folder:

https://github.com/PacktPublishing/Mastering-Blazor-WebAssembly/tree/main/Chapter_14/

Also, the full version of the Blazor WebAssembly ASP.NET Core BooksStore project can be found in the following folder within the GitHub repository:

https://github.com/PacktPublishing/Mastering-Blazor-WebAssembly/tree/main/Complete/AspNetCoreHosted

An Azure account is required to use Azure App Service and Azure Static Web Apps, to which we will publish the Blazor project. If you don’t have an Azure account already, you can create a free account via the following link: https://azure.microsoft.com/en-us/free/.

Blazor WebAssembly prerelease final checks

Before releasing the Blazor WebAssembly app, it’s useful to know how the process happens and what things we need to configure. We will look at Ahead Of Time (AOT) compilation, trimming, URL rewriting, and Blazor time zone support to give you a better idea of whether there is anything you need to configure related to those topics. Let’s get started.

AOT compilation

By default, Blazor WebAssembly apps run in the browser via a .NET Intermediate Language (IL) interpreter implemented in WebAssembly.

Note

IL is the binary result of the compiled high-level .NET code, and you can learn more about IL at the following link: https://learn.microsoft.com/en-us/dotnet/standard/managed-code#intermediate-language--execution.

Since .NET code is interpreted, Blazor WebAssembly apps can be slightly slower than .NET apps that run on the server, particularly when performing complex calculations or manipulating large amounts of data...

Introducing Blazor WebAssembly ASP.NET Core Hosted

Throughout this book, we fully focused on the Blazor WebAssembly project; even when we introduced the API, I kept it away so you could just focus on what matters in Blazor WebAssembly within the browser.

What we have created during this book is called a Blazor WebAssembly standalone project, which means a project that serves itself and will be published without any server or backend to serve it.

.NET already offers an out-of-the-box template for a Blazor WebAssembly project called Blazor WebAssembly ASP.NET Core Hosted. This template creates a Blazor WebAssembly project, a shared class library project, and an ASP.NET Core API directly inside the solution. The most interesting part of this type of project is that the API project is responsible for serving the Blazor WebAssembly app to the client. In other words, you only need to host the server project and the Blazor WebAssembly project will be referenced inside it.

The Blazor...

Publishing Blazor WebAssembly to Azure App Service

In this section, we will publish the Blazor WebAssembly ASP.NET Core Hosted version to the cloud, specifically Azure, and the hosting service will be Azure App Service.

Azure App Service is a Platform-as-a-Service (PaaS) solution that allows the deployment of web apps at scale. The service is fully managed by Azure and it supports different programming languages and frameworks, in addition to supporting containers.

Azure App Service provides multiple deployment options to push your app to it:

• Continuous deployment: Azure App Service supports continuous deployment from multiple sources, such as GitHub, Azure DevOps, and Bitbucket. This means that whenever changes are pushed to the source code repository, the application will be built and deployed automatically to Azure App Service. You can learn more about continuous deployment for Azure App Service at https://learn.microsoft.com/en-us/azure/app-service/deploy-continuous...

Publishing Blazor WebAssembly to Azure Static Web Apps

Azure Static Web Apps is a recently introduced Azure resource that simplifies the building and deployment of static web apps. However, it’s important to note that it’s not suitable for publishing a Blazor WebAssembly ASP.NET Core Hosted app as it doesn’t provide a server that supports .NET. Instead, it’s designed to serve static web files and projects and is optimized for this type of application. One of its key benefits is its ability to distribute static files globally, enabling users to access an app quickly from the nearest geographic location.

One of the great features of Azure Static Web Apps is its automatic CI and CD pipeline when using GitHub or Azure DevOps. This means that whenever you submit any code changes to the repository, the pipeline is triggered to build and deploy the updated code.

Make sure that you have the latest version of the BooksStore project; you can clone it from the...

Summary

As this chapter comes to an end, our learning journey with this book is done. In this chapter, we learned how Blazor WebAssembly prepares an app for publishing, the steps it takes during this process, and how to configure them if needed. Then, we introduced the Blazor WebAsssembly ASP.NET Core Hosted project type and template, and then we deployed an ASP.NET Core Hosted Blazor project to Azure App Service. Finally, we deployed the project that we worked on during this book to the Azure Static Web Apps service.

After completing this chapter, you should be able to do the following:

• Understand AOT compilation and when to configure it
• Control publishing tasks such as trimming and compression
• Differentiate between Blazor WebAssembly Hosted and standalone projects
• Publish a Blazor WebAssembly ASP.NET Core Hosted project to Azure App Service
• Publish a Blazor WebAssembly standalone project to Azure Static Web Apps

You have put in some amazing effort...

Further reading

• Host and deploy ASP.NET Core Blazor WebAssembly: https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-7.0