Create a new Blazor WebAssembly App in Visual Studio

To prepare for later user management, choose Individual Accounts.

Install RecroGrid Framework Blazor UI

RecroGrid Framework Blazor UI is distributed as the nuget package.

Install the package using .NET CLI or Package Manager

dotnet add package Recrovit.RecroGridFramework.Client.Blazor.UI

Install-Package Recrovit.RecroGridFramework.Client.Blazor.UI

Remove the Bootstrap reference from index.html if it contains it

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

Register RecroGrid Framework Services

Open ~/Program.cs file and register the RecroGrid Framework Blazor UI Services in the client web app.

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Recrovit.RecroGridFramework.Client.Blazor;
using Recrovit.RecroGridFramework.Client.Blazor.UI;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddOidcAuthentication(options =>
{
    // Configure your authentication provider options here.
    // For more information, see https://aka.ms/blazor-standalone-auth
    builder.Configuration.Bind("Local", options.ProviderOptions);
});

//await builder.Build().RunAsync();

var loggerFactory = builder.Services.BuildServiceProvider().GetRequiredService<ILoggerFactory>();
var logger = loggerFactory.CreateLogger<Program>();
builder.Services.AddRgfBlazorServices(builder.Configuration, logger);

var host = builder.Build();

await host.Services.InitializeRgfBlazorAsync();
await host.Services.InitializeRgfUIAsync();

await host.RunAsync();

Init Router

In the App.razor file, you need to configure it to use the RecroGrid Framework's Blazor components for routing.

<Router AppAssembly="@typeof(App).Assembly"
        AdditionalAssemblies="new[] { typeof(Recrovit.RecroGridFramework.Client.Blazor.Components.RgfEntityComponent).Assembly }">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Imports

Open ~/_Imports.razor file and import the RecroGrid Framework Blazor UI namespaces.

@using Recrovit.RecroGridFramework.Client.Blazor.Parameters
@using Recrovit.RecroGridFramework.Client.Blazor.UI
@using Recrovit.RecroGridFramework.Client.Blazor.UI.Components

MainLayout

Layout/MainLayout.razor

@inherits LayoutComponentBase

<RgfRootComponent >
    <MenuComponent MenuParameters="new RgfMenuParameters() { MenuId = 10, Navbar = true }" />

    <LoginDisplay />

    @Body

</RgfRootComponent>

API access

wwwroot/appsettings.json

  "Recrovit": {
    "RecroGridFramework": {
      "API": {
        "BaseAddress": "https://{API-DOMAIN}" //e.g. "https://localhost:11913" or "http://api.example.com"
      }
    }
  }

Set the client address in the API's appsettings.json

  "CorsSettings": {
    "AllowedOrigins": [
      "https://{CLIENT-DOMAIN}" //e.g. "https://localhost:11920", "http://example.com"
    ]
  }

Next step