.NET 8 Hybrid App (WPF + Vue.js + AspNetCore) no longer creates wwwroot during publish after upgrading SDK version of esproj file
- Dominant language
- C#
- Stars
- 38.4k
- Forks
- 10.9k
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 281
Description
### Is there an existing issue for this?
- [X] I have searched the existing issues
### Describe the bug
I am working on a .NET 8 WPF hybrid desktop app with 3 projects as part of the solution: a WPF project that uses WebView2, a Web project that has Controllers for API calls, and a JavaScript project (esproj) that uses Vue.js. The WPF project (Microsoft.NET.Sdk) references the Web project (Microsoft.NET.Sdk.Web), and the Web project references the JS project (Microsoft.VisualStudio.JavaScript.Sdk).
The way things worked until recently was that we would publish the WPF project, and the published output would include a wwwroot folder with the contents of the "dist" folder from running "npm run build". We'd then run our executable in the publish folder and it would be able to access the wwwroot and correctly render the site in our hybrid desktop app.
We noticed an issue in our CI pipeline with building our JS project on a Linux build server. The build server complained it needed .NET Framework installed and that was why it couldn't build the JS project. The esproj SDK version for the JS project is 0.5.94-alpha. I can't remember if it was on a whim or a recommendation I found online, but I upgraded the JS SDK version to a slightly newer version of 0.5.128-alpha and the CI pipeline build worked!
For reference, the code change in the esproj file was simply going from:
``````
to
``````
However, when we published the project, the "wwwroot" folder was no longing being added to the publish output.
I decided to make a new project in Visual Studio using the "Vue and ASP.NET Core" project template to see if the wwwroot folder was created when publishing the code from the project template. It did create wwwroot with the project template code. So, I started wondering what the difference was between my code and the template's. For starters, I found the esproj JS SDK version was higher in the project template (it used 1.0.784122). I tried the same exact version from the template and my project still did not produce a wwwroot folder when publishing.
After trying many things, I finally found a solution that worked. It required 3 changes.
1. I changed my WPF project to use the Microsoft.NET.Sdk.Web SDK. So the change in my csproj file was
``````
to
``````
2. I mentioned above that the project hierarchy we have is: WPF project references the Web project, and the Web project references the JS project. I had to make my WPF project directly reference the JS project
3. Updates to my pubxml file for Web publishing vs Desktop publishing (e.g. using the "PublishUrl" property rather than the "PublishDir" property)
After those 3 changes, I was now getting a wwwroot folder in my published output.
This would've been a working solution; however, a new problem arose. Now, the "EnvironmentName" property in my pubxml file was not overwriting the value of the "EnvironmentName" property in my WPF csproj file while publishing. That impacted a custom MsBuild target I have for post-publishing (including environment name in a zip file of our published output), and it also impacted how the environment was set during runtime.
### Expected Behavior
Publishing a non-Web SDK project that references a newer JS esproj project produces a wwwroot folder in the published output.
### Steps To Reproduce
First clone the repo on a Windows machine.
https://github.com/dustinrowland12/DotNetHybridApp
A few notes about the repo:
- The repo is setup with the old JS SDK to first demonstrate the expected working behavior.
- The repo is setup with the same project structure as described in the bug section of this ticket (WPF project with WebView2 referencing Web project referencing JS project with Vue.js)
- I started with the "Vue and ASP.NET Core" project template. It begins with 2 projects. I added a 3rd project to it for WPF / WebView2 and made minor changes so I could debug and publish to capture the spirit of my project's architecture.
After cloning the repo, follow the steps below:
Success behavior:
1. Publish the VueApp1.Desktop app with the FolderProfile.pubxml
2. Observe the published folder has a "wwwroot" folder in it
3. Double-click "VueApp1.Desktop.exe" in the published folder to verify the app is working
Failure behavior:
1. Update "vueapp1.client.esproj" to use a newer SDK (e.g. 1.0.784122 instead of 0.5.94-alpha)
2. Publish the VueApp1.Desktop app with the FolderProfile.pubxml
3. Observe the published folder does NOT have a "wwwroot" folder in it
4. Double-click "VueApp1.Desktop.exe" and see that the app is failing because wwwroot is missing
### Exceptions (if any)
_No response_
### .NET Version
8.0.300
### Anything else?
IDE: Visual Studio 2022 v17.10.1
Contributor guide
Assessment
This issue has not been assessed yet.