Blazor Pages displaying incorrectly in production mode

Question

I have a Blazor .net 7 webpage project tin visual studio 2022. When running the executable from the Visual studio environment in a Development profile (in launchsettings.json) everything works as expected.

However, once I change this to “Production”, while keeping everything else the same, the pages do not render correctly. The navigation menu is missing and the rest of the page looks more basic.

I suspect that it cannot see the CSS and other pages and this is causing the problem, however this is just my guess.

I've included a copy of the profiles below, the profile one works correctly, and the profile production one causes the error.

"profiles": {
  "Project": {
    "commandName": "Project",
    "dotnetRunMessages": true,
    "launchBrowser": true,
    "applicationUrl": "https://localhost:7254;http://localhost:5254",
    "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
    }
  },
  "Project-Production": {
    "commandName": "Project",
    "dotnetRunMessages": true,
    "launchBrowser": true,
    "applicationUrl": "https://localhost:7254;http://localhost:5254",
    "environmentVariables": {
      "ASPNETCORE_ENVIRONMENT": "Production"
    }
  }
}

Here is the relevant code for creating the web application:

var builder = WebApplication.CreateBuilder(args);
builder.Logging.AddLog4Net();
// Add services to the container.
Configure(builder.Services);
var app = builder.Build();
ConfigureApp(app);
app.RunAsync();

private static void Configure(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddHttpClient();
    services.AddMudServices();
    services.AddScoped<DialogService>();
    services.AddScoped<NotificationService>();
    services.AddScoped<TooltipService>();
    services.AddScoped<ContextMenuService>();
}

private static void ConfigureApp(WebApplication app)
{
    // Configure the HTTP request pipeline.
    if (!app.Environment.IsDevelopment())
    {
        app.UseExceptionHandler("/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }
    app.UseHttpsRedirection();
    app.UseStaticFiles();
    app.UseRouting();
    app.MapBlazorHub();
    app.MapFallbackToPage("/_Host");
}

I'm fairly new to programming with web projects, so I imagine that it's something fairly basic that I have missed, but I cannot seem to find it! I have checked other posts on Stack overflow and couldn't find anything that has helped me.

Thanks for any help in advance!

Answer 1

So after the helpful prompts from @henk and @bennyboy1973, the issue was that some css and js files were not being found and therefore causing issues.

Bit of research located this blog: https://dev.to/j_sakamoto/how-to-deal-with-the-http-404-content-foo-bar-css-not-found-when-using-razor-component-package-on-asp-net-core-blazor-app-aai

The issue appears to be that StaticWebAssetsFileProvider is only used in Development mode and not in Production.

The blog above provides some code, which I modified into the following code and fixed the issue:

builder.WebHost.ConfigureAppConfiguration((ctx, cb) =>
{
    if (!ctx.HostingEnvironment.IsDevelopment())
    {
        StaticWebAssetsLoader.UseStaticWebAssets(
      ctx.HostingEnvironment,
      ctx.Configuration);
    }
}
);

Thanks for the help guys