Running Webpack-dev-server on run in visual studios - .net core project

Question

I'm trying to set up my environment so when I click run in Visual Studio 2015 it will install my node modules, and then run the front-end webpack-dev-server.

I added

"precompile": [ "yarn install", "yarn run start" ]

to my scripts in my project.json

If you want to see the Start Script that I'm running: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/scripts/start.js

It works, kinda. It will start the server, but doesn't open it in the browser, and it kinda breaks VS to the point where I can't stop debugging, and can't close VS because it's debugging.

So is there anyway I can make this work the way I want it to, or should I just resort to using cmd to start the webpack-dev-server?

---

I just tried:

"precompile": [ "yarn install", "start cmd /k yarn run start" ]

hoping I could get VS to open a command prompt and run the start script, but that didn't work.

---

I found an answer. Going to keep this open to see if anyone has a better solution.

In my Startup.cs I added:

Process.Start("CMD.exe", "/K yarn run start");
Process.Start("cmd", "/C start http://localhost:3000");

The first line running my command in cmd, and the second opening my default browser at the port of my webpack-dev-server.

---

A second solution that may work depending on the use case.

Download the node tools for VS and create a new empty Node project in your solution. You can go to the project's properties and there's an input called Script (startup file). You can point that to your start up script, in my case it was scripts/start.js

Answer 1

Here's the solutions that I came up with:

In my Startup.cs I added:

Process.Start("CMD.exe", "/K yarn run start");
Process.Start("cmd", "/C start http://localhost:3000");

The first line running my command in cmd, and the second opening my default browser at the port of my webpack-dev-server.

---

A second solution that may work depending on the use case.

Download the node tools for VS and create a new empty Node project in your solution. You can go to the project's properties and there's an input called Script (startup file). You can point that to your start up script, in my case it was scripts/start.js

Answer 2

Another approach is to start the webpack development server by binding its startup to the Project Open binding in the Task Runner Explorer, versus the After Build binding. In this manner, the webpack development server it already running before you build the Solution using Visual Studio.

This approach has the advantage of not hanging up the VS build sequence because the webpack server process is still running.

I use the VS NPM Task Runner extension to do the binding and have an NPM script command, as:

"watch": "webpack-dev-server --hot --inline"

Then I bind the script to the Project Open binding

You could also incorporate your yarn install command as part of the NPM script that is run on Project Open.

Answer 3

Install Command Task runner, which will allow you to run commands on certain events.

In the new commands.json file, define a script like this:

{
  "commands": {
    "InstallPackages": {
      "fileName": "cmd.exe",
      "workingDirectory": ".",
      "arguments": "/K yarn run start"
    },
    "OpenSite": {
      "fileName": "cmd.exe",
      "workingDirectory": ".",
      "arguments": "/C start http://localhost:3000"
    }
  },
  "-vs-binding": { "AfterBuild": [ "InstallPackages", "OpenSite" ] }
}

You can also remove the "-vs-binding" lineand manually do the bindings through the Task Runner Explorer UI.

This beats changing your code to explicitly launch the web server each time.

I should add that I found that Visual Studio won't exit while the command prompt window for the web server is still open. I suppose that's fair, but it's caught me out a few times (I start the web server this way and leave it running). The easy solution is to just close the web server window and VS will close as normal without further prompting.