Auto-start NPM when debugging React app in Visual Studio Code

Viewed 265

When I wish to debug my React application in Visual Studio Code, I have to open VS Code's terminal and then type:

npm start

Then click the Run menu and "Start debugging".

Is there any way I can combine the npm start and browser launch in one go?

Ideally I'd like to hit Run | Start Debugging and, if NPM hasn't started, VS Code will execute npm start. Once npm is started, launch Edge with localhost:3000 as the start page and attach the debugger.

My launch.json is:

{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
    {
        "type": "pwa-msedge",
        "request": "launch",
        "name": "Launch Edge against localhost",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceFolder}"
    }
]
}

And the scripts part of package.json is:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:integration": "env-cmd -f .env.integration npm run build",
    "build:uat": "env-cmd -f .env.uat npm run build",
    "build:preProd": "env-cmd -f .env.preProd npm run build",
    "build:production": "env-cmd -f .env.production npm run build",
    "test": "react-scripts test",
    "test:ci": "react-scripts test --watchAll=false --testPathIgnorePatterns=src/tests/App.test.js",
    "eject": "react-scripts eject"
  },
1 Answers

You can add "preLaunchTask": "npm: start" in your launch.json. But have to terminate this process manually before next debug run

Related