Skip to content
Demo application for my writings about Blazor
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
BlazorAzure.Functions azure functions and adal.js demo works May 21, 2019
BlazorAzure.WebApp removed old projects May 21, 2019
BlazorLibrary.AspNetCoreHostedBlazor.Client removed old projects May 21, 2019
BlazorLibrary.AspNetCoreHostedBlazor.Server new server-side and asp.net core hosted projects for preview5, reorga… May 20, 2019
BlazorLibrary.AspNetCoreHostedBlazor.Shared new server-side and asp.net core hosted projects for preview5, reorga… May 20, 2019
BlazorLibrary.Components added share component and blazor app to demonstrate it May 21, 2019
BlazorLibrary.Data new server-side and asp.net core hosted projects for preview5, reorga… May 20, 2019
BlazorLibrary.ServerSideBlazor removed old projects May 21, 2019
BlazorLibrary.Shared
External Files database with more data Jul 9, 2018
OutOfBox.AspNetCoreHostedBlazor.Client added out-of-box blazor projects to solution May 20, 2019
OutOfBox.AspNetCoreHostedBlazor.Server added out-of-box blazor projects to solution May 20, 2019
OutOfBox.AspNetCoreHostedBlazor.Shared added out-of-box blazor projects to solution May 20, 2019
OutOfBox.ClientSideBlazor azure functions and adal.js demo works May 21, 2019
OutOfBox.ServerSideBlazor added out-of-box blazor projects to solution May 20, 2019
OutOfBox.SharedBlazorComponent added share component and blazor app to demonstrate it May 21, 2019
OutOfBox.SharedComponentDemoApp added share component and blazor app to demonstrate it May 21, 2019
.gitattributes first commit May 9, 2018
.gitignore first commit May 9, 2018
BlazorDemo.sln added share component and blazor app to demonstrate it May 21, 2019
README.md updated readme May 20, 2019

README.md

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:

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

You can’t perform that action at this time.