Web Development with Blazor

Web Development with Blazor

by Jimmy Engström Engström
Released June 2021
Publisher(s): Packt Publishing
ISBN: 9781800208728

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Develop modern web UIs quickly with server-side Blazor and Blazor WebAssembly

Key Features

  • Create and deploy a production-ready Blazor application from start to finish
  • Learn Blazor fundamentals, gain actionable insights, and discover best practices
  • Find out how, when, and why to use server-side Blazor and Blazor WebAssembly

Book Description

Blazor is an essential tool if you want to build interactive web apps without JS, but it comes with its own learning curve. Web Development with Blazor will help you overcome most common challenges developers face when getting started with Blazor and teach you the best coding practices.

You’ll start by learning how to leverage the power of Blazor and explore the full capabilities of both Blazor Server and Blazor WebAssembly.

Then you’ll move on to the practical part, which is centred around a sample project – a blog engine. This is where you’ll apply all your newfound knowledge about creating Blazor Server and Blazor WebAssembly projects, the inner working of Razor syntax, and validating forms, as well as creating your own components. You’ll learn all the key concepts involved in web development with Blazor, which you’ll also be able to put into practice straight away.

By showing you how all the components work together practically, this book will help you avoid some of the common roadblocks that novice Blazor developers face and inspire you to start experimenting with Blazor on your other projects.

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

What you will learn

  • Understand the different technologies that can be used with Blazor, such as Blazor Server and Blazor WebAssembly
  • Find out how to build simple and advanced Blazor components
  • Explore the differences between Blazor Server and Blazor WebAssembly projects
  • Discover how Entity Framework works and build a simple API
  • Get up to speed with components and find out how to create basic and advanced components
  • Explore existing JavaScript libraries in Blazor
  • Use techniques to debug your Blazor Server and Blazor WebAssembly applications
  • Test Blazor components using bUnit

Who this book is for

If you’re a .NET web or software developer who wants to build web UIs using C#, then this book is for you. You’ll need intermediate-level web-development skills and basic knowledge of C# before you get started; the book will guide you through the rest.

Table of contents

  1. Web Development with Blazor
  2. Foreword
  3. Contributors
  4. About the author
  5. About the reviewers
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Download the color images
    6. Conventions used
    7. Get in touch
    8. Share Your Thoughts
  7. Section 1:The Basics
  8. Chapter 1: Hello Blazor
    1. Technical requirements
    2. Preceding Blazor
    3. Introducing WebAssembly
    4. Introducing .NET 5
    5. Introducing Blazor
      1. Blazor Server
      2. Blazor WebAssembly
      3. Blazor WebAssembly versus Blazor Server
      4. WebWindow
      5. Blazor Mobile Bindings
    6. Summary
    7. Further reading
  9. Chapter 2: Creating Your First Blazor App
    1. Technical requirements
    2. Setting up your development environment
      1. Windows
      2. macOS
      3. Linux (or macOS or Windows)
    3. Creating our first Blazor application
      1. Creating a Blazor Server application
      2. Creating a WebAssembly application
    4. Using the command line
      1. Creating a Blazor Server project using the command line
    5. Figuring out the project structure
      1. Program.cs
      2. Startup
      3. Index/_host
      4. App
      5. MainLayout
      6. Bootstrap
    6. Summary
  10. Section 2:Building an Application with Blazor
  11. Chapter 3: Introducing Entity Framework Core
    1. Technical requirements
    2. Creating a data project
      1. Creating a new project
      2. Adding NuGet packages
      3. Creating data classes
      4. Creating the Database Context
      5. Creating a migration
      6. Creating an interface
      7. Implementing the interface
    3. Adding the DbContext to Blazor
    4. Summary
  12. Chapter 4: Understanding Basic Blazor Components
    1. Technical requirements
    2. Exploring components
      1. counter
      2. FetchData
    3. Learning Razor syntax
      1. Razor code blocks
      2. Implicit Razor expressions
      3. Explicit Razor expressions
      4. Expression encoding
      5. Directives
      6. Understanding dependency injection
      7. Figuring out where to put the code
      8. Lifecycle events
    4. Parameters
      1. Cascading parameters
    5. Writing our first component
    6. Summary
  13. Chapter 5: Creating Advanced Blazor Components
    1. Technical requirements
    2. Exploring binding
      1. One-way binding
      2. Two-way binding
    3. Adding Actions and EventCallback
    4. Using RenderFragment
      1. ChildContent
      2. Default value
      3. Building an alert component
    5. Exploring the new built-in component
      1. Setting the focus of the UI
      2. Influencing HTML head
      3. Component virtualization
    6. Summary
  14. Chapter 6: Building Forms with Validation
    1. Technical requirements
    2. Exploring form elements
      1. EditForm
      2. InputBase<>
      3. InputCheckbox
      4. InputDate<TValue>
      5. InputNumber<TValue>
      6. InputSelect<TValue>
      7. InputText
      8. InputTextArea
      9. InputRadio
      10. InputRadioGroup
    3. Adding validation
      1. ValidationMessage
      2. ValidationSummary
    4. Custom validation class attributes
    5. Building an admin interface
      1. Listing and editing categories
      2. Listing and editing tags
      3. Listing and editing blog posts
    6. Summary
  15. Chapter 7: Creating an API
    1. Technical requirements
    2. Creating the service
      1. Adding database access
      2. Adding the API controller
    3. Creating the client
    4. Summary
  16. Chapter 8: Authentication and Authorization
    1. Technical requirements
    2. Implementing authentication
      1. Adding tables to the database
      2. Configuring the Blazor Server project
      3. Configuring the Blazor WebAssembly project
    3. Adding authorization
      1. Adding roles from the server
      2. Adding roles to the client
      3. Adding a role to the database
    4. Summary
  17. Chapter 9: Sharing Code and Resources
    1. Technical requirements
    2. Cleaning up the project
    3. Setting up the API
    4. Moving the components
      1. Cleaning up the shared files
      2. Adding the API
    5. Adding static files
      1. CSS versus LESS versus SASS
      2. Preparing CSS/SASS
      3. Adding CSS to MyBlogServerSide
      4. Adding CSS to MyBlogWebAssembly.Client
      5. Making the admin interface more useable
      6. Making the menu more useful
      7. Making the blog look like a blog
      8. Sharing problems
    6. CSS isolation
    7. Summary
  18. Chapter 10: JavaScript Interop
    1. Technical requirements
    2. Why do we need JavaScript?
    3. .NET to JavaScript
      1. Global JavaScript (the old way)
      2. JavaScript Isolation
    4. JavaScript to .NET
      1. Static .NET method call
      2. Instance method call
    5. Implementing an existing JavaScript library
    6. Summary
  19. Chapter 11: Managing State
    1. Technical requirements
    2. Storing data on the server side
    3. Storing data in the URL
      1. Route constraints
      2. Using a query string
      3. Scenarios that are not that common
    4. Implementing browser storage
      1. Creating an interface
      2. Implementing Blazor Server
      3. Implementing WebAssembly
      4. Implementing the shared
    5. Using an in-memory state container service
      1. Implementing real-time updates on Blazor Server
      2. Implementing real-time updates on Blazor WebAssembly
    6. Summary
  20. Section 3:Debug, Test, and Deploy
  21. Chapter 12: Debugging
    1. Technical requirements
    2. Making things break
    3. Debugging Blazor Server
    4. Debugging Blazor WebAssembly
    5. Debugging Blazor WebAssembly in the web browser
    6. Hot reload (almost the real thing)
    7. Summary
  22. Chapter 13: Testing
    1. Technical requirements
    2. What is bUnit?
    3. Setting up a test project
    4. Mocking the API
    5. Writing tests
      1. Authentication
      2. Testing JavaScript
    6. Summary
  23. Chapter 14: Deploy to Production
    1. Technical requirements
    2. Continuous delivery options
    3. Deploying the database
    4. Hosting options
      1. Hosting Blazor Server
      2. Hosting Blazor WebAssembly
      3. Hosting on IIS
    5. Summary
  24. Chapter 15: Where to Go from Here
    1. Technical requirements
    2. Learnings from running Blazor in production
      1. Solving memory problems
      2. Solving concurrency problems
      3. Solving errors
      4. Old browsers
    3. Next steps
      1. The community
      2. The components
    4. Summary
    5. Why subscribe?
  25. Other Books You May Enjoy
    1. Packt is searching for authors like you

Product information

  • Title: Web Development with Blazor
  • Author(s): Jimmy Engström Engström
  • Release date: June 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781800208728