Visual Studio Code is not npm start-ing my React JS app when debugging

Question

I want to debug a React JS app on Visual Studio Code so i'm following this tutorial: https://code.visualstudio.com/docs/nodejs/reactjs-tutorial

I'm stuck at:

Ensure that your development server is running ("npm start"). Then press F5 or the green arrow to launch the debugger and open a new browser instance.

A new Chrome instance is being opened requesting "http://localhost:3000" but my app is not really running, it seems it just ran the debugger.

If i mannually npm start my app it runs. So i guess that launch.json is missing something for Visual Studio Code to start the app with the debugger. That's why i'm stuck at ensuring that my development server is running the command, because i don't know where exactly i check this

This is my launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

And this is my package.json:

{
  "name": "tic-tac-toe",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-scripts": "1.0.11"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Rajce · Accepted Answer · 2020-01-14 15:10:39Z

7

You can set preLaunchTask in your launch.json to automatically run npm start.

Create tasks.json in .vscode folder.

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "start",
            "group": {
                "kind": "test",
                "isDefault": true
            },
            "isBackground": true,
            "problemMatcher": {
                "owner": "custom",
                "pattern": {
                    "regexp": "ˆ$"
                },
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "Compiling...",
                    "endsPattern": "Compiled .*"
                }
            }
        }
    ]
}

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "preLaunchTask": "npm: start",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

Press F5 to start debugger, npm start will be executed.

edited Jan 14, 2020 at 15:10

answered Jan 14, 2020 at 7:59

Rajce

862 silver badges4 bronze badges

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

2 Comments

Igor F. Over a year ago

Code-only answers are not encouraged, please add some context to explain how this answer will solve the problem in question.

GabrielBB Over a year ago

Nice. Switching the selected answer to this one since this does exactly what I needed at that time

Dávid Molnár · Accepted Answer · 2017-08-20 08:59:49Z

1

I'm not sure if that's even possible. The tutorial clearly says you should ensure that the development server already runs. So, you'll have to first run npm startand debug afterwards.

answered Aug 20, 2017 at 8:59

Dávid Molnár

11.7k7 gold badges33 silver badges60 bronze badges

Collectives™ on Stack Overflow

Visual Studio Code is not npm start-ing my React JS app when debugging

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related