This is the code repository for Web-Development-with-Blazor, Third Edition, published by Packt.
A practical guide to start building interactive UIs with C# 12 and .NET 8
The author of this book is - Jimmy Engström
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.
- 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
- Hello Blazor
- Creating Your First Blazor App
- Managing State – Part 1
- Understanding Basic Blazor Components
- Creating Advanced Blazor Components
- Building Forms with Validation
- Creating an API
- Authentication and Authorization
- Sharing Code and Resources
- JavaScript Interop
- Managing State – Part 2
- Debugging the Code
- Testing
- Deploying to Production
- Moving from, or Combining with, an Existing Site
- Going Deeper into WebAssembly
- Examining Source Generators
- Visiting .NET MAUI
- Where to Go from Here
The first chapter will explore where Blazor came from, what technologies made Blazor possible, and the different ways of running Blazor. We will also touch on which type (Blazor WebAssembly, Blazor Server, or Blazor Hybrid) is best for you.
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 start looking at managing state. There is also a continuation of this chapter in Chapter 11, Managing State – Part 2. There are many different ways of managing state or persisting data. As soon as we leave a component, the state is gone. If we click the counter button and then navigate away, we don’t know how many times we’ll need to click the counter button and have to start over. You can’t imagine how many times I have clicked that counter button over the years. It is such a simple yet powerful demo of Blazor and was a part of Steve’s original demo back in 2017. To get started quickly, I have split this chapter in two. In this chapter, we are focusing on data access, and we will come back to more state management in the second part. Since this book focuses on Blazor, we will not explore how to connect to databases but create simple JSON storage instead.
In this chapter, we will look at the components that come with the Blazor template and start to build our own components. Knowing the different techniques used for creating Blazor websites will help us when we start building our components. Blazor uses components for most things, so we will use the knowledge from this chapter throughout the book.
This chapter will focus on some of the features that will make our components reusable, which will enable us to save time and also give us an understanding of how to use reusable components made by others. We will also look at some built-in components that will help you by adding additional functionality (compared to using HTML tags) when you build your Blazor app.
In this chapter, we will learn about creating forms and validating them, which is an excellent opportunity to build our admin interface where we can manage our blog posts and also take a look at the new Enhanced Form Navigation. We will also build multiple reusable components and learn about some of the new functionalities in Blazor.
When running Blazor using WebAssembly (InteractiveWebAssembly or InteractiveAuto) we need to be able to retrieve data and also change our data. For that to work, we need an API to access the data. In this chapter, we will create a web API using Minimal API. When using Blazor Server, the API will be secured by the page (if we add an Authorize attribute), so we get that for free. But with WebAssembly, everything will be executed in the browser, so we need something that WebAssembly can communicate with to update the data on the server.
In this chapter, we will learn how to add authentication and authorization to our blog because we don’t want just anyone to be able to create or edit blog posts. Covering authentication and authorization could take a whole book, so we will keep things simple here. This chapter aims to get the built-in authentication and authorization functionalities working, building on the already existing functionality that’s built into ASP.NET. That means that there is not a lot of Blazor magic involved here; many resources already exist that we can take advantage of.
In this chapter, we will look at some of the things we already use when sharing components, and also at sharing CSS and other static files. In this chapter, we will cover the following topics: • Adding static files • CSS isolation
In this chapter, we will take a look at JavaScript. In specific scenarios, we still need to use JavaScript, or we will want to use an existing library that relies on JavaScript. Blazor uses JavaScript to update the Document Object Model (DOM), download files, and access local storage on the client.
In this chapter, we continue to look at managing state. Most applications manage state in some form. A state is simply information that is persisted in some way. It can be data stored in a database, session states, or even something stored in a URL. The user state is stored in memory either in the web browser or on the server. It contains the component hierarchy and the most recently rendered UI (render tree). It also contains the values or fields and properties in the component instances as well as the data stored in service instances in dependency injection.
In this chapter, we will take a look at debugging. The debugging experience of Blazor is a good one; hopefully, you haven’t gotten stuck earlier on in the book and had to jump to this chapter. Debugging code is an excellent way to solve bugs, understand the workflow, or look at specific values. Blazor has three different ways to debug code, and we will look at each one.
In this chapter, we will take a look at testing. Writing tests for our projects will help us develop things rapidly. We can run the tests to ensure we haven’t broken anything with the latest change, and also, we don’t have to invest our time in testing the components manually since it is all done by the tests. Testing will improve the quality of the product since we’ll know that things that worked earlier still function as they should.
In this chapter, we will take a look at the different options we have when deploying our Blazor application to production. Since there are many different options, going through them all would be a book all by itself. We won’t go into detail, but rather cover the different things we need to think about so that we can deploy to any provider. In the end, deploying is what we need to do to make use of what we build.
In this chapter, we will take a look at how we can combine different technologies and frameworks with Blazor. What if we already have a site? There are different options when it comes to moving from an existing site; the first question is, do we want to move from it, or do we want to combine it with the new technology? Microsoft has a history of making it possible for technology to co-exist, and this is what this chapter is all about.
In this chapter, we will go deeper into technologies that are only relevant for Blazor WebAssembly. Most things in Blazor can be applied to Blazor Server and Blazor WebAssembly. Still, since Blazor WebAssembly is running inside the web browser, we can do some things to optimize the code and use other libraries that we can’t use server side. We will also look at some common problems and how to solve them.
In this chapter, we will look at writing code that generates code. Even though this chapter isn’t directly related to Blazor development, it still has a connection to Blazor, as we’ll discover. The subject of source generators is a book on its own, but I wanted to introduce it since they are used by Blazor and, honestly, it is one of my favorite features.
So far, we have talked about Blazor WebAssembly and Blazor Server, but what about the third option? In this chapter, we will visit .NET MAUI, Microsoft’s new cross-platform development platform. This chapter will not be a deep dive into .NET MAUI, since that can be a book all in itself.
The book is coming to an end, and I want to leave you with some of the things we have encountered while running Blazor in production ever since it was in preview. We will also talk about where to go from here. In this chapter, we will cover the following topics: • Learnings from running Blazor in production • The next steps
If you feel this book is for you, get your copy today!
This book is for .NET web developers and software developers who want to use their existing C# skills to build interactive SPA applications running either inside the web browser using Blazor WebAssembly, or on the server using Blazor Server.
You’ll need intermediate-level web-development skills, basic knowledge of C#, and prior exposure to .NET web development before you get started; the book will guide you through the rest.
With the following software and hardware list you can run all code files present in the book.
| Software covered in this book | OS requirements |
|---|---|
| Visual Studio 2022, .NET8 | Windows 10 or later, macOS, Linux |
You can get more engaged on the discord server for more latest updates and discussions in the community at https://packt.link/WebDevBlazor3e
If you have already purchased a print or Kindle version of this book, you can get a DRM-free PDF version at no cost. Simply click on the link to claim your free PDF.
https://packt.link/free-ebook/9781835465912
We also provide a PDF file that has color images of the screenshots/diagrams used in this book at "https://packt.link/gbp/9781835465912"
Jimmy Engström has been developing ever since he was 7 years old and got his first computer. He loves to be on the cutting edge of technology, trying new things. When he got wind of Blazor, he immediately realized the potential and adopted it already when it was in beta. He has been running Blazor in production since it was launched by Microsoft.
His passion for the .NET industry and community has taken him around the world, speaking about development. Microsoft has recognized this passion by awarding him the Microsoft Most Valuable Professional award 10 years in a row.