BlazorDemo

This is my simple Blazor application that demonstrates how to build SPA on Blazor and how to communicate with ASP.NET Core backend. Demo application is simple books database.

Solution contains:

• Sample database BACPAC file (can be imported to MSSQL using SSMS)
• Client application with Blazor UI
• Basic select and CRUD operations are implemented in UI and in back-end
• Displaying of delete confirmation dialog and deleting of books
• Fully functioning add/edit form
• Pager component and support for data paging
• Dependency injection with custom service classes
• Protecting Blazor application and Azure Functions based back-end using Azure AD

Azure AD example

For Azure AD there are two project in solution:

• BlazorDemo.AdalClient - Blazor web application that supports Azure AD
• BlazorDemo.AzureFunctionsBackend - Azure Functions project with all functions that form back-end for Blazor application

On Azure the following services are needed:

• Azure AD - free one is okay
• Azure SQL - instance with minimal size is okay
• Azure Search - free tier is okay
• App regitration on Azure AD - Web/Web API type of application
• Azure Functions - minimal App Service where functions run is okay
• Azure Storage GPv2 with static websites enabled (optional)

Configuration in code files:

• BlazorDemo.AdalClient project wwwroot/js/app.js - Azure AD tenant ID and application ID
• BlazorDemo.AdalClient project BooksAzureFunctionsClient.cs - Azure Functions host and Azure AD application ID
• BlazorDemo.AzureFunctionsBackend project AzureSearchClient - Azure Search service and index name, access key

To use search you have to comment in calls to search service in BooksAzureFunctionsClient.cs (BlazorDemo.AdalClient project)

BACPAC for SQL Server is in External Files folder. After creating database on SQL Azure it is possible to import it as a data-tier application. Same way it is possible to import it to SQL Server LocalDb used by BlazorDemo.Client project.

More information is available in my blog post Azure AD authentication in Blazor using ADAL.js.

Tools

As of 2019-05-20 the following tooling is needed to build and run this solution:

• .NET Core 3.0 Preview 5 SDK
• Visual Studio 2019 Preview
• ASP.NET and web development workload for Visual Studio (activate during VS installation)
• ASP.NET Core Blazor Language Services extension
• Getting started with Blazor

Your opinion matters

If you tried out this solution and you understand how Blazor works then please find some moments to take brief survey by Microsoft helping to make Blazor even better.

References

• Azure AD authentication in Blazor using ADAL.js
• Hosting Azure Functions backed Blazor application on Azure Storage static website
• Building confirm delete dialog on Blazor
• Dependency injection in Blazor
• Building Blazor pager component
• Separating code and presentation of Blazor pages
• WebAssembly apps with Blazor