Run npm command prebuild Visual Studio 2019

Question

I am using Visual Studio 2019 to create a new Core RazorPage application. I need to run the following commands inside my WWWRoot folder

npm install
npm run build

I tried to add the following commands inside my pre-build script

<Target Name="PreBuild" BeforeTargets="PreBuildEvent">
    <Exec Command="npm i $(ProjectDir)wwwroot" />
  </Target>

but nothing happen and i am getting the folowing warning

npm WARN saveError ENOENT: no such file or directory, open 'E:\Dev\package.json'

it seems that it completely ignores the wwwroot in the path

Ensure dependencies described correctly on `package.json` – Rashed Hasan Sep 25 '19 at 19:17 — Rashed Hasan, Sep 25 '19 at 19:17

score 8 · Answer 1 · answered Sep 23 '19 at 21:35

VS19 doesn't like not having the package.json at the root of the project. I was able to add a package.json at the root of the project, and add the script:

"scripts": {
    "build": "cd wwwroot && npm i && npm run build"
  },

the node_modules folder was then created in the wwwroot folder and the npm run build command was run inside the child folder. I would also recommend the Extension "NpmTaskRunner" (https://github.com/madskristensen/NpmTaskRunner). You can then bind the root build script to the VS Build event.

score 3 · Answer 2 · edited Dec 12 '20 at 06:38

After moving an ASP.NET Web Application to ASP.NET Core Application I had, almost, the same problem with npm. If I created the package.json file inside a Project I end up with:

npm installing a lot of packages
npm command does not run in Package Manager Console
I would need package.json (and node_modules directory) inside other Web Application in the same Solution

After struggling for a while I followed a different approach, and it is working up to now:

Create a package.json (and node_modules) at the Solution level
Install dependencies here
Copy path you need to wwwroot using Gulp
Create an EMPTY package.json at the Project Level
Install del and gulp globally (DEV dependencies)
Create a symlink for del and gulp at project level

There is a detailed description of this approach (compared to the usual) at the link below:

A better way to use Visual Studio with npm (and Gulp)

Please let me now if this works for your problem ?

score 0 · Answer 3 · answered Feb 01 '23 at 15:31

You can also use .bat file and run it in Debug mode

open build events and add this to pre-build events

if $(ConfigurationName) == Debug (
   call "$(ProjectDir)prebuild.bat"
)

then open up prebuild.bat file and add yarn or npm command like this

cd .. 
call yarn install 

cd project1
call yarn install 
call yarn build 
cd .. 

cd project2
call yarn install 
call yarn build 
cd .. 

cd project3 
call yarn install 
call yarn build 
cd ..

cd project4
call yarn install 
call yarn build 
cd ..

And for sure you can replace calling the .bat file with its content

Run npm command prebuild Visual Studio 2019

3 Answers3

Linked