Blazor Web App Template - website after publish to local IIS fails to load

[Lindsay-Mathieson]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

Created a Blazor sample application using the new Blazor Web App template - .Net Preview 7, Visual Studio Preview with Preview 7 hosting installed.

Runs fine via Visual Studio. When I published it to my local IIS via VS Web Deploy, the website failed to load/display correctly, with a bunch of 404 errors for the .css files displayed in Edge DevTools. It appears to be referencing the css from the "http://localhost", rather than "http://localhost/appname"

nb. It does work correctly if published to the root of the IIS Website

• Windows 11 Pro
• .Net Preview 7
• .Net Preview 7 Hosting
• Visual Studio Preview

Expected Behavior

The website to display as it does when run from Visual Studio

Steps To Reproduce

• Create a Blazor app using the Blazor Web App Temple
• Publish To IIS
  • "Default Web Site/AppName"

Sampe Repository:
https://github.com/Lindsay-Mathieson/BlazorWebAppTest1

Exceptions (if any)

No response

.NET Version

8.0.100-preview.7.23376.3

Anything else?

.NET SDK:
Version: 8.0.100-preview.7.23376.3
Commit: daebeea8ea

Runtime Environment:
OS Name: Windows
OS Version: 10.0.22621
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\8.0.100-preview.7.23376.3\

.NET workloads installed:
There are no installed workloads to display.

Host:
Version: 8.0.0-preview.7.23375.6
Architecture: x64
Commit: 65b696cf5e
RID: win-x64

.NET SDKs installed:
3.1.426 [C:\Program Files\dotnet\sdk]
7.0.400 [C:\Program Files\dotnet\sdk]
8.0.100-preview.7.23376.3 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
Microsoft.AspNetCore.App 3.1.32 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 6.0.20 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 6.0.21 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 7.0.9 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 7.0.10 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 8.0.0-preview.7.23375.9 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 3.1.32 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 6.0.20 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 6.0.21 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 7.0.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 7.0.10 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 8.0.0-preview.7.23375.6 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 3.1.32 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 6.0.20 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 6.0.21 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 7.0.9 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 7.0.10 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 8.0.0-preview.7.23376.1 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

Other architectures found:
x86 [C:\Program Files (x86)\dotnet]
registered at [HKLM\SOFTWARE\dotnet\Setup\InstalledVersions\x86\InstallLocation]

Environment variables:
Not set

global.json file:
Not found

[guardrex]

@Lindsay-Mathieson ... More config might be required, but start by updating the app's base path in the App.razor file. Set the href like this: <base href="/appname/" />. The trailing slash is required.

[Lindsay-Mathieson]

@guardrex

Set the href like this: <base href="/appname/" />. The trailing slash is required.

Thanks, that did the trick. Set it to:

<base href="/BlazorWebAppTest1/" />

the default was <base href="/" />

Kinda awkward to customise that for each publish though, especially if you test with multiple websites/appnames. Is there a way to fill it in with the publish web site appname?

[guardrex]

I'm glad it worked cleanly with just an app base path change. BTW, that's covered at ...

https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-7.0&tabs=visual-studio#app-base-path

... but I haven't reached that node of documents yet for content updates that will include Blazor Web Apps. I'll get there eventually tho. 🏃🏃🏃😅

WRT a transform for that element, no ... I'm not aware of one that would configure it for publish. However, the root component (App) seems† to behave like a normal component in most respects thus far in my testing, so I did a little test with ...

@inject IHostEnvironment Env

<!DOCTYPE html>
<html lang="en">

<head>
    ...
    <base href="/@appBasePath" />
    ...
</head>

...
</html>

@code {
    private string appBasePath;

    protected override void OnInitialized() => 
        appBasePath = Env.IsStaging() ? "staging/" : string.Empty;
}

... and it rendered ...

<base href="/staging/" />

... for the Staging environment 🎉.

Therefore, you could take that approach forward for your process.

†seems: I'm just a hack 🦖 doc author around here 🙈😆, so we'll need to see if the engineering 🐈🐈🐈 have any caveats on that approach or further/different remarks. They're probably all off for the weekend, so you'll probably hear back next week.

Setting the environment is covered in https://learn.microsoft.com/en-us/aspnet/core/fundamentals/environments?view=aspnetcore-7.0. Using an env var, the web.config file, or a publish profile are common approaches for Win/IIS hosting.

[guardrex]

... and I think it's a bit cleaner (less code, no hard-coded string) to obtain the value from config, so I'll probably end up writing it up along the lines of ...

appsettings.Staging.json:

{
  "AppBasePath": "staging/"
}

@inject IConfiguration Config

...

<head>
    ...
    <base href="/@(Config.GetValue<string>("AppBasePath"))" />
    ...
</head>

It doesn't throw if the value is null (i.e., missing the config value). It results in a href value of "/".

I didn't care much for using the environment value itself with coordination on the folder name because it wouldn't be common to have the environment name in the URL, but there might be an edge case for it if only the Staging environment requires the treatment with Development and Production environments using "/". I won't show/describe this in our App base path coverage, but it might go something like ...

@inject IHostEnvironment Env

<head>
    ...
    <base href="/@(Env.EnvironmentName != "Development" ? $"{Env.EnvironmentName}/" : string.Empty)" />
    ...
</head>

... for the Staging environment ...

<base href="/Staging/" />

[MackinnonBuck]

Thanks for answering this, @guardrex! 🎉