Web Development with Blazor: A practical guide to building interactive UIs with C# 12 and .NET 8 , Third Edition

Jimmy Engström

$19.99 per month

4 (17 Ratings)

Paperback Apr 2024 366 pages 3rd Edition

Jimmy Engström

$19.99 per month

4 (17 Ratings)

Paperback Apr 2024 366 pages 3rd Edition

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!

Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!

50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

Thousands of reference materials covering every tech concept you need to stay up to date.

Subscribe now

View plans & pricing

View table of contents

Preview Book

Web Development with Blazor

Creating Your First Blazor App

In this chapter, we will set up our development environment so that we can start developing Blazor apps. We will create our first Blazor app and go through the project structure.

By the end of this chapter, you will have a working development environment and have created a Blazor App that can run a mix of streaming server-side rendering, Blazor Server, and Blazor WebAssembly.

In this chapter, we will cover the following:

Setting up your development environment
Creating our first Blazor application
Using the command line
Figuring out the project structure

Using the command line

With .NET 5, we got a super powerful tool called dotnet.exe. Developers who have used .NET Core before will already be familiar with the tool, but with .NET 5, it is no longer exclusively for .NET Core developers.

It can do many things Visual Studio can do, for example, creating projects, adding and creating NuGet packages, and much more. In the following example, we will create a Blazor Server and a Blazor WebAssembly project using the dotnet command.

Creating projects using the command line

The following steps are to demonstrate the power of using the command line. We will not use this project later in the book, so if you don’t want to try it, go ahead and skip this section. The CLI is cross-platform, so this can be used on Linux and macOS as well.

To create a solution with a Blazor app, you can do the following:

dotnet new blazor -o BlazorWebApp

We will not go deeper into the CLI in this book but know that it is a great way...

Figuring out the project structure

Visual Studio will generate two projects: Blazor App, which is the server project, and BlazorWebApp.Client, which is where we put our WebAssembly components.

Now, it’s time to look at the different files and how they may differ in different projects. Take a look at the code in the two projects we just created (in the Creating our first Blazor app section) while we go through them.

Program.cs (BlazorWebApp project)

Program.cs is the first class that gets called. So, let’s start looking at that one.

The Program.cs file looks like this:

var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
else
{
    app.UseExceptionHandler(&quot...

Download Code

Key benefits

Create a production-ready Blazor application from start to finish
Find out how, when, and why to use Blazor Server and Blazor WebAssembly, as well as Blazor Hybrid
Explore crucial new coverage of streaming rendering, server-side rendering (SSR), flexible hosting models, and Blazor templates

Description

Web Development with Blazor is your essential guide to building and deploying interactive web applications in C# – without relying on JavaScript. Written by an early Blazor adopter and updated for .NET 8, this book takes you through the end-to-end development of an example app, helping you to overcome common challenges along the way. You’ll pick up both Blazor Server and Blazor WebAssembly and discover cutting-edge tools to enrich your development experience. Responding to evolving needs, this edition introduces flexible hosting models, allowing you to mix and match hosting approaches to create flexible and scalable Blazor applications. It also presents the new Blazor templates, which provide ready-made solutions to simplify and expedite development. You'll learn about the game-changing server-side rendering (SSR), a hybrid hosting model blending the strengths of Blazor Server and Blazor WebAssembly, as well as streaming rendering, a new technique that boosts the performance and user experience of Blazor apps. By the end of this book, you'll have the confidence you need to create and deploy production-ready Blazor applications using best practices, along with a big-picture view of the Blazor landscape.

Who is this book for?

This book is for .NET web developers and software developers who want to use their existing C# skills to build interactive web applications running either inside the web browser using Blazor WebAssembly, on the server using Blazor Server, or a combination of the two. You'll need basic knowledge of C# and prior exposure to .NET web development before you get started; the book will guide you through the rest.

What you will learn

Understand how and when to use Blazor Server, Blazor WebAssembly, and Blazor Hybrid
Learn how to build simple and advanced Blazor components
Explore how Minimal APIs work and build your own API
Discover how to use streaming rendering and server-side rendering (SSR)
Mix and match different hosting models to create flexible and scalable Blazor apps
Familiarise yourself with the new Blazor templates that simplify development
Debug your Blazor Server and Blazor WebAssembly applications

What do you get with a Packt Subscription?