Code Repository for Web Development with Blazor Second Edition Published by Packt

License: MIT License

HTML 39.92% C# 34.56% CSS 17.83% JavaScript 6.66% TypeScript 1.02% C 0.01%

web-development-with-blazor-second-edition's Introduction

Web-Development-with-Blazor-Second-Edition

Code Repository for Web Development with Blazor, Second Edition Published by Packt

An in-depth practical guide for .NET developers to build interactive UIs with C#

About the book

Blazor is an essential tool if you want to build interactive web apps without JavaScript, but it has a learning curve. Updated with the latest code in .NET 7 and C# 11 and written by someone who adopted Blazor early, this book will help you overcome the challenges associated with being a beginner with Blazor and teach you the best coding practices.

You’ll start by learning how to leverage the power of Blazor and exploring the full capabilities of both Blazor Server and Blazor WebAssembly. Then you'll move on to the practical part, centered around a sample project – a blog engine. You'll apply all your newfound knowledge about creating Blazor projects, the inner workings of Razor syntax, validating forms, and creating your own components.

This new edition also looks at source generators, dives deeper into Blazor WebAssembly with ahead-of-time, and includes a dedicated new chapter demonstrating how to move components of an existing JavaScript (Angular, React) or MVC-based website to Blazor or combine the two. You’ll also see how to use Blazor (Hybrid) together with .NET MAUI to create cross-platform desktop and mobile applications.

When you reach the end of this book, you'll have the confidence you need to create and deploy production-ready Blazor applications, and you'll have a big-picture view of the Blazor landscape.

What you will learn

Understand the different technologies that can be used with Blazor, such as Blazor Server, Blazor WebAssembly, and Blazor Hybrid
Find out how to build simple and advanced Blazor components
Explore the differences between Blazor Server and Blazor WebAssembly projects
Discover how Minimal APIs work and build your own API
Explore existing JavaScript libraries in Blazor and JavaScript interoperability
Learn techniques to debug your Blazor Server and Blazor WebAssembly applications
Test Blazor components using bUnit

Chapters

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
Deploy to Production
Moving from, or Combining, an Existing Site
Going Deeper into WebAssembly
Examining Source Generators
Visiting .NET MAUI
Where to Go from Here

If you feel this book is for you, get your copy today!

Following is what you need for this book:

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 and Hardware List

Software covered in this book	OS requirements
Visual Studio 2022, .NET7	Windows 10 or later, macOS, Linux

Know more on the Discord server

You can get more engaged on the discord server for more latest updates and discussions in the community at https://packt.link/WebDevBlazor2e

Download a free PDF

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/9781803241494

We also provide a PDF file that has color images of the screenshots/diagrams used in this book at "https://packt.link/g0hSv"

Get to Know the Author

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 8 years in a row.

web-development-with-blazor-second-edition's People

Contributors

Stargazers

Watchers

web-development-with-blazor-second-edition's Issues

Issue in chapter 07 Adding data access to Web Assembly

I hit an issue following the code in chapter 7 when adding this code:

builder.Services.AddOptions()
.Configure(options =>
{.
options.DataPath = @"........\Data";
options.BlogPostsFolder = "Blogposts";
options.TagsFolder = "Tags";
options.CategoriesFolder = "Categories";
});
builder.Services.AddScoped<IBlogApi, BlogApiJsonDirectAccess>();

When setting the startup project to be BlazorWebAssembly.Server and running I get the following error (partially shown):

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Cannot provide a value for property '_api' on type 'Components.Pages.Index'. There is no registered service of type 'Data.Models.Interfaces.IBlogApi'.
System.InvalidOperationException: Cannot provide a value for property '_api' on type 'Components.Pages.Index'. There is no registered service of type 'Data.Models.Interfaces.IBlogApi'.
at Microsoft.AspNetCore.Components.ComponentFactory.<>c__DisplayClass7_0.g__Initialize|1(IServiceProvider serviceProvider, IComponent component)
at Microsoft.AspNetCore.Components.ComponentFactory.PerformPropertyInjection(IServiceProvider serviceProvider, IComponent instance)
.....

I suspected I had made some error in my version of the code but could not spot anything. So, I forked the code from this repository and tried running the solution for chapter 7. I hit a couple of other issues first (see below) but once I corrected those, I got the same error as above with the repository code when running the BlazorWebAssembly.Server project, so I don't believe the issue is with my version.

As an aside, if I add the code to the BlazorWebAssemblyClient project just after the add services for HttpClient the BlazorWebAssembly.Server project does then start without the error above.

I do hit another issue if it starts this way, in that no data is saved to the filesystem, but that may be a consequence of the above issue.

The two issues I had to resolve prior to being able to build the solutions in Chapter 7 were in Data.Models\Models. In both Tags.cs and Categories.cs there are two issues:

Spurious line with CustomCssClassProvider instead of closing }
Missing using System.ComponentModel.DataAnnotations;

Linux Docker Container Causes Path Issues

When I created my project I enabled the Docker container feature on the Server project. Since the container is Linux based this caused a few problems when creating the directory structure for the data. While this is not referenced in the book, I figured other people may be using the Docker container feature and learning Blazor at the same time.

I updated BlogApiJsonDirectAccess.cs to use Path.Combine() instead of the Windows specific separator. With these updates it works correctly in the container on the Windows host. Well at least as far as chapter 4 anyway. 😀

public BlogApiJsonDirectAccess(IOptions<BlogApiJsonDirectAccessSetting> option)
{
    _settings = option.Value;
    if (!Directory.Exists(_settings.DataPath))
    {
        Directory.CreateDirectory(Path.Combine(_settings.DataPath));
    }
    if (!Directory.Exists(Path.Combine(_settings.DataPath, _settings.BlogPostsFolder)))
    {
        Directory.CreateDirectory(Path.Combine(_settings.DataPath, _settings.BlogPostsFolder));
    }
    if (!Directory.Exists(Path.Combine(_settings.DataPath, _settings.CategoriesFolder)))
    {
        Directory.CreateDirectory(Path.Combine(_settings.DataPath, _settings.CategoriesFolder));
    }
    if (!Directory.Exists(Path.Combine(_settings.DataPath, _settings.TagsFolder)))
    {
        Directory.CreateDirectory(Path.Combine(_settings.DataPath, _settings.TagsFolder));
    }
}

private void Load<T>(ref List<T>? list, string folder)
{
    if (list == null)
    {
        list = new();
        var fullpath = Path.Combine(_settings.DataPath, folder);
        foreach (var f in Directory.GetFiles(fullpath))
        {
            var json = File.ReadAllText(f);
            var bp = JsonSerializer.Deserialize<T>(json);
            if (bp != null)
            {
                list.Add(bp);
            }
        }
    }
}

private async Task SaveAsync<T>(List<T>? list, string folder, string filename, T item)
{
    var filepath = Path.Combine(_settings.DataPath, folder, filename);
    await File.WriteAllTextAsync(filepath, JsonSerializer.Serialize<T>(item));
    if (list is null)
    {
        list = new();
    }
    if (!list.Contains(item))
    {
        list.Add(item);
    }
}
private void DeleteAsync<T>(List<T>? list, string folder, string id)
{
    var filepath = Path.Combine(_settings.DataPath, folder, $"{id}.json");
    try
    {
        File.Delete(filepath);
    }
    catch { }
}

Path to the Data folder

In the book you have the path in Program.cs set to

options.DataPath = @"..\..\..\Data\";

which works if you are using the repository solutions to follow along.

but if your not then the path will be incorrect, I was scratching my head for a little while till I realised this, so if you do like me created a fresh solution to follow along and the create a folder in the solution directory for the example data you will need to modify the path to

options.DataPath = @"..\{YourFolderName}\";

packtpublishing / web-development-with-blazor-second-edition Goto Github PK