Running NodeJS project in Visual Studio Code with yarn - node.js

Question

I have a NodeJS project which I can start from command line with yarn start command. My package.json looks similar to this:
{
"name": "projectname",
"version": "0.0.1",
"description": "",
"author": "My Name",
"license": "",
"scripts": {
"start": "yarn dev",
"dev": "yarn stop && pm2 start pm2-dev.yaml && webpack-dev-server --progress",
"prod": "yarn stop && yarn build && pm2 start pm2-prod.yaml",
"build": "rimraf dist lib && babel src -d lib --ignore test.js && cross-env NODE_ENV=production webpack -p --progress",
"stop": "rimraf logs/* && pm2 delete all || true"
},
"dependencies": {
"body-parser": "~1.16.0",
"ejs": "2.5.5",
"express": "^4.14.1",
"pg": "^6.1.2",
"react": "^15.4.2",
"redux": "^3.6.0",
},
"devDependencies": {
"babel-cli": "^6.22.2",
"cross-env": "^3.1.4",
"eslint": "^3.13.0",
"pm2": "^2.3.0",
"redux-mock-store": "^1.2.2",
"rimraf": "^2.5.4",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.2.1"
}
}
I am trying to start this project in debugging mode with Visual Studio Code but with almost no luck. I have defined my launch configuration in VS Code launch.json file like this:
{
// Use IntelliSense to learn about possible Node.js debug attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "yarn",
"runtimeExecutable": "yarn",
"runtimeArgs": [
"start"
],
"port": 5858,
"cwd": "${workspaceRoot}",
"timeout": 10000
}
]
}
The problem with this configuration is that it usually times-out because webpack-dev-server build is longer than 10 seconds. I can increase the timeout in my configuration, but I have noticed that VS Code results with a message Cannot connect to runtime process (timeout after 30000 ms). eventually, so I assume that this is not a good solution. Also, my breakpoints are ignored with this kind of config which tells me that I am definitely doing something wrong here.
This is the first time I am trying out Visual Studio Code and I usually don't use NodeJS, but I got this project with all these scripts in package.json already defined so I'm trying to adopt to it and therefore all the confusion about how to run it properly.
Can Visual Studio Code run a project like this with full debugging functionality at all, and if so, how should I configure my launch script?

Answer 1

I ended up having the following configuration in launch.json:
{
"type": "node",
"request": "launch",
"name": "Launch via Yarn",
"runtimeExecutable": "yarn",
"cwd": "${workspaceFolder}",
"runtimeArgs": ["start:debug"],
"port": 5858
}
And the following entry in the scripts property inside package.json:
"start:debug": "node --inspect-brk=5858 ./server/index.js",
You could include a timeout key (which defaults to 10000) and increase its value if have any prestart:debug script in your package.json which could lead to delay the launch of the actual node app.

Answer 2

I can't specifically answer the webpack parts of the question. However, your script above won't work because you haven't enabled debugging. Exposing debugging allows a debugger to attach to this process, and it also blocks program execution until a debugger attaches. You'll need to make another script in your package.json that allows for debugging. Then, you can use your debugging-specific script to debug and your non-debugging script to run normally. For example:
"scripts": {
"start": "yarn dev",
"dev": "node entry.js",
"dev-debug": "node --inspect-brk=5858 entry.js",
Then, in your launch.json replace "start" with "dev-debug". The debugging port is already set to 5858 in both launch.json and package.json, so this should work. The key is running node with the --inspect-brk command, forcing the execution of the node app to stop until a debugger attaches to it.

Answer 3

Additionally to the above - to get mine working I had to add the following to my package.json (the exec was still required) -
"start:debug": "nodemon --inspect-brk=5858 --exec \"babel-node\" src/index.js"

Answer 4

Haven't used the debugged in VS Code however I'm using nodemon to debug with Chrome with a shell script.
bin_dir="$__dirname/../node_modules/.bin"
src_dir="$__dirname/../src"
"$bin_dir/nodemon" --ext js,yaml \
--watch "$src_dir/package.json" \
--watch "$src_dir" \
"$src_dir/index.js" \
--exec "yarn && babel-node --inspect=0.0.0.0:9229"
Open chrome://inspect/#devices and start up your debugger

Answer 5

Thanks for the information shared in this thread, What exactly is the 'react-scripts start' command?, by #johndpope.
Here is the setup I used in vscode's launch.json file in configurations section for launching a react process.
{
"name": "Launch: Frontend Server",
"program": "${workspaceFolder}/node_modules/react-scripts/bin/react-scripts.js",
"args": ["start"],
"request": "launch",
"type": "node",
"console": "integratedTerminal",
"localRoot": "${workspaceFolder}",
}
So, response to the original post, you may try to see what is the script used in rimraf library.