BlazorWebView for WPF not debuggable when blazor code is in a different project

[nvmkpk]

Description

I am unable to run/debug WPF application from Visual Studio when hosting a blazor application from another project because index.html does not exist in the output folder. I want to re-use the blazor project from my web application.

WPF's BlazorWebView uses PhysicalFileProvider to the folder of the file pointed to by the value of HostPage property. But that file is in another project and is not copied to the WPF project's output folder. If provide path to that file then the generated isolated css file will not be loaded. It should either be customizable and/or a CompositeFileProvider that uses all paths from the blazor project's static web assets xml file should be configured if that file exists.

Steps to Reproduce

1. Extract the attached zip file
2. Open the solution is Visual Studio
3. Press F5 to run it

Expected Behavior

The application runs and displays my web page as it would in web browser when the blazor project is run.

Actual Behavior

DirectoryNotFoundException is thrown pointing to BlazorWpf1\BlazorWpf1\bin\Debug\net6.0-windows\wwwroot\

Basic Information

• Version with issue: 6.0.0-preview.4.21253.5
• Last known good version: none
• IDE: Visual Studio 2019
• Platform Target Frameworks: net6.0-windows
• Nuget Packages:
  1. Microsoft.AspNetCore.Components.WebView.Wpf (version 6.0.0-preview.4.21253.5)
• Affected Devices:

Reproduction Link

BlazorWpf1.zip

Workaround

From the source of WPF WebView, I could not figure out any.

[ivanjx]

you need to change your original blazor and wpf project type to Microsoft.NET.Sdk.Razor. also the wwwroot should be placed under the wpf project instead of the previously webassembly project. idk if the wwwroot placement really matters but when i did that it works also i want my wasm and wpf project to have separate index.html files. take a closer look to both project's csproj files.
BlazorWpf1.zip

[nvmkpk]

Moving wwwroot folder to WPF project will break the blazor application. Copying the files to bin folder is only a work around. When you host the blazor application in an asp.net core application, it does not copy the files and instead uses a CompositeFileProvider with all the paths from generated static web assets xml file. Wpf's blazor web view project needs a similar mechanism rather than duplicating the files in the disk. At the very least, the file provider creation should be extensible so that I can add my own code to make it work better than the workaround you just showed.

Also, CSS isolation will not work with this current implementation. I am using it heavily in my blazor application.

[ivanjx]

if you still want to keep the blazor wasm project then all you need to do is to make a blazor wasm project and add reference to the shared project and add the wwwroot to the wasm project. of course it will break since the blazor project is not a wasm project anymore so you need to create it again. css isolation will work if you change the css file name in the index.html with the wpf assembly name and thats why we need to keep the index html separate for each wasm and wpf project. eg if your shared project is called myapp.shared and your wpf project is called myapp.wpf then the css name in index html will be myapp.wpf.styles.css.

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0#css-isolation-bundling

[nvmkpk]

No, when CSS isolation is used, it is generated in the scopedcss folder in the output path. BlazorWebView configures single folder for the static web assets, in this case wwwroot. So it fails to find the css file.

[ivanjx]

as i said all you need to do was to change the css file name in the index.html (in your case it is webview.html) to make css isolation work.

[ivanjx]

one more thing that is important is you need to remove the Main function from the BlazorApp project since the entry point now is in the BlazorWpf project.

[nvmkpk]

I don't think the Main in blazor project will have any effect to when hosted by BlazorWebView. I have much more complex blazor application than the template generates and isolated css is just not working for me (I will figure out what is causing). But I don't know how well this will work with the hot reload thing. I am not happy with copying the entire wwwroot folder to the WPF project (and then also to the output folder). I expect it to work similar to how asp.net core project works (which is via CompositeFileProvider). The team might actually want to do it based on the comment on the source of BlazorWebView.

PS: I am not looking for workarounds, I need a real fix.

[ivanjx]

mind you that this is still in a very early preview of blazor desktop so expect to do some workarounds to make things work. it is very good to me that at least things are working now but sure it would be nice if they could deliver things like project template, better hot reload, etc later on.

about wwwroot for me it already make sense to me that each project such as wpf and wasm have their own wwwroot folder. with this configuration you can share the logic and razor files to not only wpf and wasm but to blazor server (which does not even have index.html), also maui later on when it is released. if you still need to copy your wwwroot manually to output folder then you need to change the properties to Copy if Newer as shown here.

[nvmkpk]

I know it is early. I am creating this issue just so that they can fix this in time before the final release. But at the end its their call what they want to do with it.

For wwwroot folder, I agree we need the folder for the WPF project as well. I just want avoid multiple copies of the files in that folder.

[Eilon]

Hi, I know this is an older issue now, but I got the repro project working on my machine by doing the following:

1. Updating NuGet packages to the latest .NET / MAUI versions
2. Updating the WPF project's CSPROJ to have <Project Sdk="Microsoft.NET.Sdk.Razor">

The reason that (2) is needed is that the logic for making static web assets such as CSS/HTML/JS available is all part of the Razor SDK. By referencing the SDK, that brings in the MSBuild targets that place files in the correct location in order to be loaded by the system.

If you want a totally custom way of providing static assets, we recently added that feature in this PR: #3191

[nvmkpk]

Any idea when next preview is coming out?

[Eilon]

2 days ago 😁 https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebView.Wpf/6.0.101-preview.11.2349