npm - Using gruntfile.js in Visual studio 2019 with SPA in the ClientApp subfolder

Question

I have been following this guide to get gruntfile working with Task runner explorer in Visual studio: Use Grunt in ASP.NET Core.

If I have Grunt.js, package.json and node_modules all in the root directory of the webapp project then this all works fine without an issue.

But when generating an SPA in either react or angular from the template provided with Visual studio, it places the SPA within the ClientApp subfolder, meaning my package.json and node_modules are in /ClientApp.

If I place the Gruntfile.js in /ClientApp then Visual studio / task runner explorer does not find it, it only finds it if placed in the root directory.

If I place Gruntfile.js in the root directory then task runner explorer detects it, but upon trying to load grunfile.js I get an error saying "grunt hasn't been installed locally", this is because it is looking for grunt to be installed in /node_modules instead of /ClientApp/node_modules where it actually is.

I can solve the problem by placing another package.json at the root folder with only devDependencies set to grunt and related dependencies, but it is a really inelegant solution to have two instances of package.json and node_modules folders in my project, it will possibly create confusion among other developers in my team unless we clearly explain to everyone it's just a workaround to get grunt working with visual studio.

Is there a way to have only one copy of package.json and node_modules, both in /ClientApp and have grunt.js working with Visual studio? Visual studio's own template to create an SPA places the SPA under /ClientApp, so surely we must have a way to use grunt.js with that without having to make dirty hacks.

question from:https://stackoverflow.com/questions/65919635/using-gruntfile-js-in-visual-studio-2019-with-spa-in-the-clientapp-subfolder

Answer 1

Waitting for answers