UseBasePath and using ABP with Path #9063

martin.gemme.uzi created 3 days ago

Check the docs before asking a question: https://abp.io/docs/latest
Check the samples to see the basic tasks: https://abp.io/docs/latest/samples
The exact solution to your question may have been answered before, and please first use the search on the homepage.

Provide us with the following info:
🧐 Hint: If you are using the ABP Studio, you can see all the information about your solution from the configuration window, which opens when you right-click on the solution and click on the Solution Configuration button.

Template: microservice
Created ABP Studio Version: 0.9.21
Current ABP Studio Version: 0.9.25
Multi-Tenancy: Yes
UI Framework: blazor-webapp
Theme: leptonx
Theme Style: light
Run Install Libs: Yes
Database Provider: ef
Database Management System: sqlserver
Mobile Framework: none
Public Website: No
Include Tests: Yes
Dynamic Localization: No
Kubernetes Configuration: Yes
Use Local References: No
Optional Modules:
- OpenIddictAdmin

Exception message and full stack trace:
404 not found for images of the theme
Steps to reproduce the issue:

Create a ABP microservice with the LeptonX theme (auth server)
app.UsePathBase(new PathString(pathBase)); within the Module
The background being hardcoded to /, we get 404 with no option to override it

public override void OnApplicationInitialization(ApplicationInitializationContext context)
{
    var app = context.GetApplicationBuilder();
    var env = context.GetEnvironment();
    var configuration = context.ServiceProvider.GetRequiredService();
    
    // ...

    var pathBase = configuration["App:BasePath"] ?? "/";
    app.UsePathBase(new PathString(pathBase));
        
    // ...
}

Source (LeptonXTheme via abp get-source Volo.Abp.LeptonXTheme): \src\Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX\Themes\LeptonX\Layouts\Account\Default.cshtml

<style>
.lpx-login-bg {
    background-image: url('/LeptonX/images/login-pages/login-bg-img-@(selectedStyle).svg') !important;
}
// ...
</style>

Under there are the Logo, which I "could" override with a basepath, but I think the framework should handle the UseBasePath to make it more seamless.

If it's better to ask for a consultation let me know, but right now it's hard to customize ABP to enable basepath to work.

liangshiwei created 3 days ago

Support Team Fullstack Developer

Hi,

Yes, you are right, we will improve it.

The right way is to use Url.Content to calculate the path.

<style>
var logobgUrl = Url.Content($"~/LeptonX/images/login-pages/login-bg-img-{selectedStyle}.svg");

.lpx-login-bg {
    background-image: url('@logobgUrl') !important;
}
// ...
</style>

martin.gemme.uzi created 3 days ago

Thank you @liangshiwei, thanks for the response and acknowledgment.

This is a recurring issue (e.g. everywhere where '/xyz' is used), other examples:
1- CSS within wwwroot, in the "demo" apps. We do have the same issue (we'd probably have to tweak during the build to modify the css to update the url() based on PathBase.. if you have ideas how to do that, I'd really appreciate it).
2- as for the overriding: src\Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX\Themes\LeptonX\Layouts\Account\Default.cshtml and src\Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX\Themes\LeptonX\Layouts\Application\TopMenuLayout.cshtml

For #1 I'm refering to demo\LeptonXDemoApp.MauiBlazor\wwwroot\css\app.css, which has ":root .lpx-theme-dim, :root .lpx-theme-dark" and ":root .lpx-theme-light" (the 4 urls)

Do you know what timeline/how much time it will take to fix this? Let me know if more information is needed.

Thank you

liangshiwei created 3 days ago

Support Team Fullstack Developer

For #1 I'm refering to demo\LeptonXDemoApp.MauiBlazor\wwwroot\css\app.css, which has ":root .lpx-theme-dim, :root .lpx-theme-dark" and ":root .lpx-theme-light" (the 4 URLs)

Because it is a local file, you can directly modify it, which is the simplest method.