Replace razor Dashboard to Vue

[yang-xiaodong]

Motivation

The old dashboard originally came from Hangfire. It used Razor page compilation technology to compile .razor into classes. Since this method requires the help of a third-party visual studio plug-in to generate ( .generated.cs ), it does not seem to be particularly convenient now, and the plug-in no longer maintained at present, so we need to use more modern technology to rewrite dashbaord

Behavior

Use vue to build the front-end page, then embed the published page file into the assembly, use the StaticFile middleware to intercept the request and output it to the page

Use middleware to provide a sample web api interface for front-end page call

Usage

services.AddCap(x=>
{
    x.UseDashboard(d =>
    {
        d.MatchPath = "/cap"
        d.UseChallengeOnAuth = true;
        d.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
    });
    
  // ………
}

Unimplemented

• Home page metrics, needs to be discussed
• multi-language

[MahmoudSamir101]

I'm just curious why we don't build the dashboard with a Razor Class Library instead of vue js. I believe the old dashboard can be converted to an RCL project,
All issues and limitations of the previous dashboard are already addressed in the RCL project template.
I used RCL to build such things and reusable UI components easily.

https://docs.microsoft.com/en-us/aspnet/core/razor-pages/ui-class?view=aspnetcore-5.0&tabs=visual-studio

[yang-xiaodong]

Hello @MahmoudSamir101 ,

The main reason for not using Blazor or RCL is that they all need to add additional configuration items in the Mvc or WebApi framework, and cannot simply complete all the configuration work in services.AddCap.

For example, in RCL, we need to add

public void ConfigureServices(IServiceCollection services)
{
     services.AddControllersWithViews();
     services.AddRazorPages();  // Additional configuration  here
}

public void Configure(IApplicationBuilder app)
{
     app.UseStaticFiles();
     app.UseRouting();
     app.UseEndpoints(endpoints =>
     {
         endpoints.MapControllerRoute(
             name: "default",
             pattern: "{controller=Home}/{action=Index}/{id?}");

         endpoints.MapRazorPages();    // Additional configuration  here
     });
}

[MahmoudSamir101]

What sbout using RCL as MVC Paradigm not razor pages, the configuration of controllers and views are already registered with in the startup class, does this solve it ?

[yang-xiaodong]

I have not investigated whether this is possible, but Vue seems to be simpler. As a beginner, I refactored the dashboard in only a week of free time.