Table of Contents

Create the Blazor Application

The backend API, database integration, and API authentication are now in place. This step creates the browser-facing Blazor host and interactive client parts that connect to that server-side foundation through SessionAuth and the host-side API proxy.

This step covers the host and client application shape used by the recommended SessionAuth and server-side proxy model.

Create the browser-facing Blazor application after the backend API, database integration, and API authentication are in place.

Purpose

The recommended application model uses an ASP.NET Core host, a Blazor application, SessionAuth, and server-side proxying as one integrated browser-facing application connected to the dedicated RecroGrid Framework backend API.

This setup is the preferred starting point for new RecroGrid Framework applications because it keeps authentication and downstream API access under central server control.

Create the Blazor Web App

In Visual Studio, add a Blazor Web App project to the solution and configure the project template with these options:

  • Authentication type: None.
  • Interactive render mode: Auto.
  • Interactivity location: Global.

The Blazor Web App template creates the ASP.NET Core host project together with the associated .Client WebAssembly project required by this application model.

The resulting solution structure contains the browser-facing projects alongside the backend API project created earlier:

Solution
├── Application.Api
├── Application
└── Application.Client

Application represents the Blazor Web App host project and Application.Client represents its interactive WebAssembly client project. Use the actual application name selected in Visual Studio in place of Application.

Project shape

Use a server-hosted application structure where the ASP.NET Core host owns the application origin.

At minimum, the Blazor application should provide:

  • An ASP.NET Core host application.
  • A Blazor application rendered from that host.
  • The RecroGrid Framework client packages needed by the interactive UI.
  • The host-side OpenID Connect and proxy integration.

Together with the backend API project created earlier in the workflow, these projects form the complete modern Server-side Application solution.

Package selection

Use these packages according to their responsibilities:

  • Recrovit.RecroGridFramework.Client.Blazor.Host.OpenIdConnect on the server-side host.
  • Recrovit.RecroGridFramework.Client.Blazor.UI for the higher-level Blazor UI integration.
  • Recrovit.RecroGridFramework.Client.Blazor.SessionAuth for the SessionAuth-aware client behavior.

The host package is the recommended app-level entry point for this application model because it brings in the server-side OpenID Connect infrastructure, the SessionAuth SSR registration, and the downstream proxy wiring used by RecroGrid Framework applications.

Host registration

In the host Program.cs, register the host package and the route infrastructure used by the shared application.

using Recrovit.AspNetCore.Components.Routing.Configuration;
using Recrovit.AspNetCore.Components.Routing.Models;
using Recrovit.RecroGridFramework.Client.Blazor;
using Recrovit.RecroGridFramework.Client.Blazor.Host.OpenIdConnect.Configuration;
using Recrovit.RecroGridFramework.Client.Blazor.UI;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRecrovitComponentRouting(options =>
{
    options.AddRouteAssembly(typeof(App).Assembly);
    options.AddRouteAssembly(typeof(BlazorApp.Client._Imports).Assembly);
    options.DefaultLayout = typeof(MainLayout);
    options.SetNotFoundPage(RecrovitRoutesKind.Host, typeof(BlazorApp.Client.Pages.NotFound));
});

builder.AddRgfBlazorServerProxyOpenIdConnectRazorComponents();
builder.AddRgfBlazorServerProxyOpenIdConnectHost();

Host startup

Map the host endpoints and initialize the RecroGrid Framework runtime before serving requests.

var app = builder.Build();

app.UseHttpsRedirection();

app.MapRgfBlazorServerProxyOpenIdConnectEndpoints("/not-found");

await app.Services.InitializeRgfBlazorServerAsync();
await app.Services.InitializeRgfUIAsync(loadResources: false);

app.MapRgfBlazorServerProxyOpenIdConnectComponents<App>(typeof(BlazorApp.Client._Imports).Assembly);

await app.RunAsync();

What to configure next

After the Blazor application shape exists, continue with:

  • SessionAuth client behavior.
  • The host-side OpenID Connect and downstream proxy configuration.
  • The interactive client routing and initialization.

The database connection and Entity Framework ownership belong to the backend API foundation configured earlier in the complete solution workflow.

Next step