Allow to run this extension when package.json is in subfolder instead of the root folder of the project.

[martijnboland]

Installed product versions

• Visual Studio: 2015 Professional
• This extension: 1.3.70

  Description

Only the package.json in the root folder of the project is scanned by the extension.

Steps to recreate

1. Create a subfolder in the project
2. Create a package.json file in the subfolder
3. The file is not detected in the task runner explorer and the context menu option does not show up

   Current behavior

See steps to recreate. I ran into this when adding a client app to an existing ASP.NET Web Api project in a subfolder and the npm script tasks where not detected. Also: when using a cli tool as create-react-app or angular-cli, you'll need the client app in a subfolder to prevent conflicts.

Expected behavior

The extension should detect package.json files in subfolders.

[madskristensen]

Unfortunately, this is not up to this extension but a limitation in the Task Runner Explorer in Visual Studio. the VS Web Team is aware of the issue

[mrns]

Hi, thanks for the extension!

After looking at the code, I understand that this attribute required by ITaskRunner is responsible for the limitation [TaskRunnerExport(Constants.FILENAME)].

I am wondering if it would be possible to add a setting to NpmTaskRunner defaulting to Constants.FILENAME so that we could set a single file path to be evaluated; no subfolder support would be needed in this case.

Thanks again ;)

[scottaddie]

@madskristensen Any updates to provide on the TRX limitation?

[madskristensen]

It's on our backlog to add, but no timeline yet

[mrns]

@madskristensen Is the approach I described feasible? If so I can give it a try and create a pull request. I worked with vsx in the past for the SSIS VS Tooling a few years ago.

[madskristensen]

@mrns No, extensions can't change the behavior. It can only be fixed by Microsoft. However, it may work for known sub folders. It might be worth trying

[clement911]

Also hitting this issue. It makes this extension unusable with the asp.net core angular spa template which places the client app under a subfolder ClientApp. Where is the right place to let Microsoft know?

[objectstudio]

Also an issue for me - have a single repository with multiple related by separate packages with package.json files in package-specific subfolders and can't execute any of the tasks.

[scottaddie]

Adding @justcla to answer the question from @clement911 regarding the limitation in Task Runner Explorer.

[justcla]

Thanks for bringing me in , @scottaddie.

Everyone, I will keep this issue on my radar and try to report status regularly. Right now we are focusing on other priorities, but I expect we'll have more bandwidth in a few months, so will try to address this then.

Please ping this thread as required to generate further attention.

[justcla]

@clement911 , the "correct place" to let MS know about VS issues is through Developer Community.

But.... this is more effective. :-) I've got the message now.

[posthuma]

Any updates on this @justcla ?

[seanzi86]

I am also facing this issue when trying to build a .net core webapi using the new vue cli 3 template. What are people using as a work around? Currently i am using command task runner to run a bat file, as this allows the package.json file to stay in the sub folder whilst using commands.json in the root of the visual studio project.

Does anyone else have another/more elegant solution?

[jsanjuan2016]

I think that a more elegant solution is to use grunt to execute an npm task. This way you will have a Gruntfile.js in the root folder and the "task runner explorer" will show the grunt task. See: https://stackoverflow.com/questions/47299845/how-to-execute-npm-script-using-grunt-run

[riipah]

Since this is still not supported even in VS 2019 preview, do you know if there's an existing task where I could vote on?

[htmnk]

I'm using vue cli 3 in my existing .net project and I needed to bind my scripts before build, I have my main package.json in a subfolder. So as a simple workaround I created a separate package.json in the root folder so that NPM Task runner picks it up and from there I just run my tasks by changing directory into my subfolder.

root package.json

{
  "scripts": {
    "serve": "cd [subfolder] && npm run serve",
    "build": "cd [subfolder] && npm run build",
  },
  "-vs-binding": {
    "BeforeBuild": [
      "build"
    ]
  }
}

[seanzi86]

This is a nice and simple solution! The solution we came up with was to write some custom middleware which is only run in development mode. This opens a command line window and executes the npm run serve command. This can be left open and will continue to hot reload. If the developer stops the application and starts it again the middleware will only open the command line if the port isn't in use by another process. (we assume that the previous command line is still open)

[realsircodesalot]

I recently came across this myself in a .Net Core 3.1 SPA application that places scripts in the ClientApp folder in the root of the project.

@htmnk & @seanzi86 Nice workarounds! I think I'll go with one of those to resolve this issue.

@madskristensen I realize this is on the backlog of features, however, I wonder if a potential short-term solution could be using path patterns that .gitignore uses? eg: public const string FILENAME = "**/package.json"

On the task runner side, it could recognize the path matching pattern(s) allowing it to search project folders. Optimally, though, this could be configurable. I'm not sure how much things would change on the TaskRunner side of the equation, my hope is that it isn't too painful. What are your thoughts?

[radleta]

I found a simple way and a more elegant way to have multiple package.json within the VS project.

You have a package.json at the root. It should be empty except for the scripts then you set up the scripts to change directory to the correct directory executing whatever command you'd like.

Example package.json at the root of the project:

{
  "name": "example",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "cd sub-folder\\ && npm run build",
    "watch": "cd sub-folder\\ && npm run watch"
  },
  "devDependencies": {},
  "dependencies": {}
}

You'd then have a sub-folder with the child package.json within it.

My.Web.Site\package.json
My.Web.Site\sub-folder\package.json 

[alfr3c0d3]

After reading the proposals @mrns and @mikhey regarding making some changes in the Source Code, I found a solution by replacing [TaskRunnerExport(Constants.FILENAME)] with [TaskRunnerExport("package.json", "ClientApp/package.json")] in line 13 of the TaskRunnerProvider.cs file.

After changing the code, just Build/Rebuild the solution and run the "NpmTaskRunner.vsix" located in bin/Release or bin/Debug, depending on which Configuration you Build/Rebuild.

There are better solutions for this as @mrns and @mikhey proposed but this one works for the template I am using which have the "package.json" inside the "ClientApp" subfolder and also works for the ones that have the "package.json" on the root folder.

By the way, if you do this, unselect the Extension option to Autoupdate.

[jbress]

using [command task runner] to run a bat file, as this allows the package.json file to stay in the sub folder whilst using commands.json in the root of the visual studio project.

Thank you for this @seanzi86. This is the only working solution for my ASP.NET MVC Core project under Visual Studio 2022. I tried the @htmnk solution (using a separate package.json in the root folder) but the problem is that the npm packages declared in sub-folder\package.json are not picked up by VS (Dependencies\npm is empty).