4

I have followed the steps outlined in this so post, and have successfully created a React Application inside Visual Studio from the "Blank Node.js Web Application".

Everything works except debugging from VS!

I have also followed this Microsoft article here which describes exactly what I want to do!!! - It walks you through "how to setup a react app in Visual Studio using the node web app template". On that article they show debugging working, but it doesn't work for me.

I am using the standard npm command to create an application inside the visual studio solution directory. I have created myself a batch file that does the heavy lifting for me. 

npx create-react-app ssm-app --typescript

At this point, everything works fine and I can even interact with the NPM packages from inside VS.

enter image description here

I have even installed NPM Task Runner inside Visual Studio which allows you to run the commands (such as Start) from the package.json.

enter image description here

Everything works except debugging from inside Visual Studio!

I have then attempted to wire up the "Start Debugging" button in VS to attach it the npm start command.

enter image description here

I did that by adding by finding this Microsoft article on how to extend the build process. I added the following code to the project file which works can calls npm start for me.

  </ProjectExtensions>
    <Target Name="AfterBuild">
         <Exec Condition="'$(EnableTypeScript)' == 'true'" Command="npm start" />
    </Target>
</Project>

It kinda works and does kick off a web browser and launch the app but Visual Studio toolbar just hangs. I think this is because npm start hasn't exited. I have tried changing the command to call npm start but it still hangs to toolbar.

enter image description here

Usually when you launch the debugger, the toolbar changes and you can see the stop button like below. That never happens

visual studio stop button

Any help would be greatly appreciated. Am I doing something wrong or am I approaching this from the wrong angle?

Thanks

Ocean Airdrop
  • 2,793
  • 1
  • 26
  • 31

1 Answers1

5

Just closing the loop on this question.

In the end, I found out that the reason why Visual Studio hangs when you extend an .csproj file to call "npm start".

The reason is because the MSBuild "Execute" command blocks and does not exit. I tried prefixing the command with "start" but this has no effect.

https://learn.microsoft.com/en-us/visualstudio/msbuild/exec-task?view=vs-2019

So if you run notepad after the build, the vs output window will hang until you close notepad!

<!-- This wil block! -->
<Target Name="AfterBuild">
     <Exec Command="start notepad.exe" /> 
</Target>

I gave up on my dream of debugging inside visual studio but I still wanted to create a react app using the official npm packages as well as setup a visual studio solution that tied the build command up with "npm start" and and "npm build"

Fortunelty I found this stack overflow post which provided an answer to the Execute Command.

MSBuild exec task without blocking

This allowed my to associate the "debug build" and "release build" in Visual studio to custom build targets in the project file.

Finally, because I wanted to to be able to generate a visual studio solution for every new React project I created, I knocked up a quick tool which wraps up everything I wanted all together:

The project:

  1. Generates a visual solution project file

  2. Sets up the "build/debug" command in visual studio to "npm start"

  3. Sets up the "build/release" command in visual studio to "run build"

The project can be found here: https://github.com/OceanAirdrop/CreateReactAppVisualStudio

Ocean Airdrop
  • 2,793
  • 1
  • 26
  • 31