build script don't runs when creating a Node.js and React app in Visual Studio

Question

I following a step by step guide to configure Visual Studio 2019 in order develop a Node.js-React app. The guide is here: https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-nodejs-with-react-and-jsx?view=vs-2019

Briefly, the guide tells to configure an npm script (called "build") that should be fired when visual studio compiles, in order to generate app-bundle.js through typescript, using the app.tsx which contains a react component. This must be done by adding the following code snipped to package.json

"scripts": {
    "build": "webpack-cli app.tsx --config webpack-config.js" 
}

however it doesn't work, because when i change something in app.tsx and run visual studio debbugger, the web page don't change at all.

If I run the following command using the nuget package console

npm run-script build

then it works fine!

So, is this a VS2019 bug, or is there some trick i miss?

Many Thanks for the help

As a js developer, instead of using visual studio you can use vs code its much easier :) — Beginner
– Beginner, Commented Dec 30, 2019 at 16:08
I can try, but i have an enterprise license for VS2019. I should use that — ElettroAle
– ElettroAle, Commented Dec 30, 2019 at 18:34
I dont know much on Visual Studio, but since its an editor it will be similar, so let me conclude so you need to have a react js and node js project. So first thing is install node and npm, after that for easiness you can install create react app using npm i -g create-react-app , g( g flag is for global), Then in your drive create a folder as Sample, inside that folder using terminal run create-react-app client, it will install your react application name as client (your wish whichever name you want - dont use capitialize it wont work ), — Beginner
– Beginner, Commented Dec 31, 2019 at 7:59
after that create a folder called server in Sample folder , inside server folder do npm init -y (-y flag for yes to all), then install npm i express, and refer docs for simple server then expose a port in server folder and run it using npm run start (add the script in package.json) and go to client folder do npm start thats it , node will be running in 5000(whatever port you mention in code) and react will be running in 3000 (by default) — Beginner
– Beginner, Commented Dec 31, 2019 at 7:59
did you tried in this way ? if you are using the above way you can open Sample Folder in Visual Studio, and you can start coding so both client and server will be there, let me know so i will add the required steps for fast refresh and all as answer — Beginner
– Beginner, Commented Dec 31, 2019 at 7:59

subok lee · Accepted Answer · 2020-10-17 05:07:54Z

2

I had similar problems like yours. I solved this problem by this undocumented feature of visual studio 2017,2019:

BY manual editing, 
 You can add the following post-build event to package.json
 "-vs-binding": { "AfterBuild": [ "build" ] }

by GUI, 
  in task runner explorer window, 
   select "build" task and let popup context menu open using right-mouse-button,
    select bindings -> After build (make its preceding check box on)
  this will add "-vs-binding" property to your package.json

Either one is okay. This  works on vs 2017 and may works on vs 2019 either.

VS2017,2019 nodejs project build process seems 
  not to actually call my "build" script at all.
we should specify the "build" script as post-build event 
  for vs default nodejs build action.
It seems weired. I hope Microsoft solve this fault using  patches.

task runner explorer capture image

edited Oct 17, 2020 at 5:07

answered Oct 17, 2020 at 4:54

subok lee

213 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

build script don't runs when creating a Node.js and React app in Visual Studio

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related