dotnet/aspnetcore

Solutions with a standalone JavaScript project and an asp.net web API project seems tied to visual studio / windows

solrevdev opened this issue · 7 comments

solrevdev commented

Describe the bug

I am a .NET dev who uses VSCode on macOS/Linux and I wanted to check out the new changes to standalone JavaScript projects but could not find any material on how to do so WITHOUT vs2022/windows

I span up a Windows VM and followed a couple of tutorials:

https://www.hanselman.com/blog/javascript-and-typescript-projects-with-react-angular-or-vue-in-visual-studio-2022-with-or-without-net

https://docs.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-vue?view=vs-2022

I pushed the repo to GitHub then cloned down to my macOS dev machine and I don't seem to be able to get it to run.

Is this a Visual Studio/Windows only feature?

Output from terminal 
▲ vuedotnet [master] dotnet build
Microsoft (R) Build Engine version 17.0.0+c9eb9dd64 for .NET
Copyright (C) Microsoft Corporation. All rights reserved.

/Users/solrevdev/Dropbox/Projects/github/vuedotnet/src/frontend/frontend.esproj : warning NU1503: Skipping restore for project '/Users/solrevdev/Dropbox/Projects/github/vuedotnet/src/frontend/frontend.esproj'. The project file may be invalid or missing targets required for restore. [/Users/solrevdev/Dropbox/Projects/github/vuedotnet/vuedotnet.sln]
  Determining projects to restore...
  All projects are up-to-date for restore.
  v17.0.1
  Restoring dependencies using 'npm'. This may take several minutes...
  backend -> /Users/solrevdev/Dropbox/Projects/github/vuedotnet/src/backend/bin/Debug/net6.0/backend.dll
  npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
  npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
  npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
  npm WARN deprecated har-validator@5.1.5: this library is no longer supported
  npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
  npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
  npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
  npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
  npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
  npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
  npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
  npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
  npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
  npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
  npm WARN deprecated eslint-loader@2.2.1: This loader has been deprecated. Please use eslint-webpack-plugin
  npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
  npm WARN deprecated html-webpack-plugin@3.2.0: 3.x is no longer supported
  npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
  npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
  
  added 1691 packages, and audited 1692 packages in 1m
  
  95 packages are looking for funding
    run `npm fund` for details
  
  31 vulnerabilities (20 moderate, 11 high)
  
  To address issues that do not require attention, run:
    npm audit fix
  
  To address all issues (including breaking changes), run:
    npm audit fix --force
  
  Run `npm audit` for details.

Build succeeded.

/Users/solrevdev/Dropbox/Projects/github/vuedotnet/src/frontend/frontend.esproj : warning NU1503: Skipping restore for project '/Users/solrevdev/Dropbox/Projects/github/vuedotnet/src/frontend/frontend.esproj'. The project file may be invalid or missing targets required for restore. [/Users/solrevdev/Dropbox/Projects/github/vuedotnet/vuedotnet.sln]
    1 Warning(s)
    0 Error(s)

Time Elapsed 00:01:21.38
▲ vuedotnet [master] dotnet watch  
watch : Could not find a MSBuild project file in '/Users/solrevdev/Dropbox/Projects/github/vuedotnet'. Specify which project to use with the --project option.
▲ vuedotnet [master] dotnet watch --project src/frontend
watch : Error(s) finding watch items project file 'frontend.esproj'
watch : MSBuild output from target 'GenerateWatchList':
watch : 
watch :    Build started 07/12/2021 15:25:25.
watch :         1>Project "/Users/solrevdev/Dropbox/Projects/github/vuedotnet/src/frontend/frontend.esproj" on node 1 (GenerateWatchList target(s)).
watch :         1>/Users/solrevdev/Dropbox/Projects/github/vuedotnet/src/frontend/frontend.esproj : error MSB4057: The target "GenerateWatchList" does not exist in the project.
watch :         1>Done Building Project "/Users/solrevdev/Dropbox/Projects/github/vuedotnet/src/frontend/frontend.esproj" (GenerateWatchList target(s)) -- FAILED.
watch :    Build FAILED.
watch :           "/Users/solrevdev/Dropbox/Projects/github/vuedotnet/src/frontend/frontend.esproj" (GenerateWatchList target) (1) ->
watch :             /Users/solrevdev/Dropbox/Projects/github/vuedotnet/src/frontend/frontend.esproj : error MSB4057: The target "GenerateWatchList" does not exist in the project.
watch :        0 Warning(s)
watch :        1 Error(s)
watch :    Time Elapsed 00:00:00.41
watch : 
watch : Fix the error to continue or press Ctrl+C to exit.

^Cwatch : Shutdown requested. Press Ctrl+C again to force exit.
watch : File changed: /Users/solrevdev/Dropbox/Projects/github/vuedotnet/src/frontend/frontend.esproj
▲ vuedotnet [master] dotnet run --project src/frontend
Unable to run your project.
Ensure you have a runnable project type and ensure 'dotnet run' supports this project.
A runnable project should target a runnable TFM (for instance, net5.0) and have OutputType 'Exe'.
The current OutputType is ''.
▲ vuedotnet [master]

To Reproduce

Clone this and try to use with VS Code/macOS

https://github.com/solrevdev/vuedotnet

Further technical details

dotnet --info Output 
.NET SDK (reflecting any global.json):
 Version:   6.0.100
 Commit:    9e8b04bbff

Runtime Environment:
 OS Name:     Mac OS X
 OS Version:  11.6
 OS Platform: Darwin
 RID:         osx.11.0-x64
 Base Path:   /usr/local/share/dotnet/sdk/6.0.100/

Host (useful for support):
  Version: 6.0.0
  Commit:  4822e3c3aa

.NET SDKs installed:
  6.0.100 [/usr/local/share/dotnet/sdk]

.NET runtimes installed:
  Microsoft.AspNetCore.App 6.0.0 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 6.0.0 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]

To install additional .NET runtimes or SDKs:
  https://aka.ms/dotnet-download
pranavkm commented

Going by the error you listed:

watch : Error(s) finding watch items project file 'frontend.esproj'
watch : MSBuild output from target 'GenerateWatchList':
watch : 
watch :    Build started 07/12/2021 15:25:25.
watch :         1>Project "/Users/solrevdev/Dropbox/Projects/github/vuedotnet/src/frontend/frontend.esproj" on node 1 (GenerateWatchList target(s)).
watch :         1>/Users/solrevdev/Dropbox/Projects/github/vuedotnet/src/frontend/frontend.esproj : error MSB4057: The target "GenerateWatchList" does not exist in the project.
watch :         1>Done Building Project "/Users/solrevdev/Dropbox/Projects/github/vuedotnet/src/frontend/frontend.esproj" (GenerateWatchList target(s)) -- FAILED.
watch :    Build FAILED.

it looks like the new project type does not support hooks that dotnet-watch currently relies on to discover the list of files to be watched. This isn't unique to MacOS.

I would recommend using dotnet run until we've had a chance to address this.

solrevdev commented

Going by the error you listed:

watch : Error(s) finding watch items project file 'frontend.esproj'
watch : MSBuild output from target 'GenerateWatchList':
watch : 
watch :    Build started 07/12/2021 15:25:25.
watch :         1>Project "/Users/solrevdev/Dropbox/Projects/github/vuedotnet/src/frontend/frontend.esproj" on node 1 (GenerateWatchList target(s)).
watch :         1>/Users/solrevdev/Dropbox/Projects/github/vuedotnet/src/frontend/frontend.esproj : error MSB4057: The target "GenerateWatchList" does not exist in the project.
watch :         1>Done Building Project "/Users/solrevdev/Dropbox/Projects/github/vuedotnet/src/frontend/frontend.esproj" (GenerateWatchList target(s)) -- FAILED.
watch :    Build FAILED.

it looks like the new project type does not support hooks that dotnet-watch currently relies on to discover the list of files to be watched. This isn't unique to MacOS.

I would recommend using dotnet run until we've had a chance to address this.

Thanks so much for looking at this so quickly @pranavkm much appreciated 🙏

dotnet run doesn’t seem to help either I’m afraid

This is the output from dotnet run

dotnet run --project src/frontend
Unable to run your project.
Ensure you have a runnable project type and ensure 'dotnet run' supports this project.
A runnable project should target a runnable TFM (for instance, net5.0) and have OutputType 'Exe'.
The current OutputType is ''.
DamianEdwards commented

The new JS project system is a VS-only feature at this point of time.

  • 👀1
solrevdev commented

@DamianEdwards

The suspicion that the hot reload PR was just the start of features being Visual Studio and Windows only seems to have come true.

That’s disappointing, but me moaning about it won't help, so I wonder If I can create a cross-platform way of doing this for us macOS/Linux/VS Code users.

Any advice on how I could make it work?

So, off the top of my head I am thinking…

  • I convert the .esproj to a normal .csproj and copy the build events to make the npm run serve bits work. Maybe even just renaming the file to .csproj is enough?

  • aspnetcore-https.js seems to be needed, so copy that over

  • create a custom vue.config.js to proxy requests to the .net backend

  • wrap all this into a dotnet new template so folks can dotnet new standalone-js-vue for example

Any tips or help or pointers, and I'll happily give it a go, creating a cross-platform way of doing this.

DamianEdwards commented

The new JS project system is a Visual Studio feature, built by the VS team, and I'm afraid I'm not personally familiar with it. @timheuer @sayedihashimi @SteveSandersonMS @javiercn do we have any pointers for working with JS in a project-centric fashion for ASP.NET Core devs that is cross-plat friendly?

timheuer commented

do we have any pointers for working with JS in a project-centric fashion for ASP.NET Core devs that is cross-plat friendly?

@solrevdev your feedback is totally valid - this is an area (the new JS project system) that we're looking to improve integration with .NET projects. Simply put, we're not there yet to match the expectation you have. The pointers we have today that is x-plat friendly model the existing SPA templates (which emulate similarly what you're suggesting in a single csproj).

solrevdev commented

OK, thanks @DamianEdwards and @timheuer,

I'll take a look at the existing SPA templates as a first step and will take it from there.

I do appreciate you both getting back to me.

Can I just add a final comment and that is I get that Visual Studio and Windows licences keep the lights on, but I just want to quote something I found that resonated with me real or not:

The way we build the best Visual Studio is by having the best runtime on the planet. When the Visual Studio team adds features to the foundation of dotnet, we have a consistent base for everyone to work on and contribute. We can build the best IDE by collaborating in the runtime, not making our open-source arbitrarily products worse.

pastebin