How can I make VSCode run a node app like "npm start"? - node.js

I have a node app with the package.json like so:
{
"name": "myexpressapp",
"version": "0.0.99",
"scripts": {
"start": "node ./bin/www" },
//etc
}
and in app.js I have
console.log ("Running version: "+process.env.npm_package_version);
When I run npm start in the command prompt this logs
Running version: 0.0.99
When I start (press F5) in VS Code this logs
Running version: undefined
What change do I need to make to launch.json to start the app in VS Code as if I had entered npm start in the command prompt?

I can now get it to run (but not debug) using the following launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch via NPM#3",
"runtimeExecutable": "npm",
"windows": {
"runtimeExecutable": "npm.cmd"
},
"runtimeArgs": [
"start"
],
"port": 5858,
"cwd": "${workspaceRoot}"
},
{
"type": "node",
"request": "launch",
"name": "Launch Program#1",
"program": "app.js",
"cwd": "${workspaceRoot}"
}
]
}

Related

How to pass arguments to node script from launch configuration in vscode

Why isn't my launch configuration in vscode picking up on args key?
vscode Version: 1.63.2
launch.json
"version": "0.2.0",
"configurations": [
{
"command": "node ${workspaceFolder}/test.js",
"args": ["foo"],
"name": "test",
"request": "launch",
"type": "node-terminal",
},
]
}
test.js
console.log("running script");
console.log(process.argv);
I press play from debug sidebar and get this in console:
$ node /Users/acohen/mp/mobileapp-client-tests/test.js
Debugger attached.
running script
[
'/Users/acohen/.nvm/versions/node/v12.16.2/bin/node',
'/Users/acohen/mp/mobileapp-client-tests/test.js'
]
Waiting for the debugger to disconnect...
Why isn't "foo" passed as an argument?
Here is a config example that worked for me:
{
"configurations": [
{
"name": "Launch Program",
"args": ["foo"],
"program": "${workspaceFolder}/test.js",
"request": "launch",
"type": "pwa-node"
}
]
}
Ok, what I ultimately wanted to do was run a complex npm script and debug it. I re-installed vscode, and found some good docs here:
https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_launch-configuration-support-for-npm-and-other-tools
and here for using nvm:
https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_multi-version-support
My launch.json looks like this:
where test_ios is the npm script to debug and 14.17.3 is the version of node (installed with nvm) to use:
"version": "0.2.0",
"configurations": [
{
"name": "Launch via npm",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "test_ios"],
"runtimeVersion": "14.17.3"
}
]
}

How to debug Typescript code in Visual Studio Code with ts-node-dev and correct line numbers

I have a Typescript project that is launched as follows:
ts-node-dev --preserve-symlinks --inspect=0.0.0.0 -- src/server.ts
I can debug it with Visual Studio Code, but the debugger breaks at the wrong lines. The only reasonable explanation I can think of, is that ts-node-dev does not point the debugger to the source maps (which are there).
How can I correctly debug Typescript code executed by ts-node-dev?
Configuration for debugging in vs code with ts-node-dev to attach and launch debugger:
package.json:
{
"scripts": {
"dev:debug": "ts-node-dev --transpile-only --respawn --inspect=4321 --project tsconfig.dev.json src/server.ts",
"dev": "ts-node-dev --transpile-only --respawn --project tsconfig.dev.json src/server.ts",
}
}
launch.json:
{
"version": "0.1.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach to dev:debug",
"protocol": "inspector",
"port": 4321,
"restart": true,
"cwd": "${workspaceRoot}"
},
{
"type": "node",
"request": "launch",
"name": "Debug",
"protocol": "inspector",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "dev"]
}
]
}
I had the same question, which brought me to this (old) post. I found the solution to my problem at https://gist.github.com/cecilemuller/2963155d0f249c1544289b78a1cdd695 so am posting it here in case anyone else finds themselves here!
This VS Code configuration allowed me to stop at breakpoints on the correct lines in my TypeScript code:
{
"version": "0.2.0",
"configurations": [
{
"name": "Example",
"type": "node",
"request": "launch",
"runtimeExecutable": "node",
"runtimeArgs": ["--nolazy", "-r", "ts-node/register/transpile-only"],
"args": ["src/script.ts", "--example", "hello"],
"cwd": "${workspaceRoot}",
"internalConsoleOptions": "openOnSessionStart",
"skipFiles": ["<node_internals>/**", "node_modules/**"]
}
]
}
This is what worked for me. attach type debugger was not working for me but launch type is working fine. Breakpoints works as well even though sometimes it goes to the ts-node-dev source files and I guess we can't do anything about it.
It runs tsnd which is just the alias for ts-node-dev.
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"name": "launch",
"request": "launch",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/tsnd",
"program": "${file}",
"args": [
"--transpile-only",
"--respawn",
"--project",
"tsconfig.dev.json",
],
"skipFiles": [
"<node_internals>/**"
],
},
}
"program" could be changed to run a specific file by replacing ${file} with that filename but with the above config, it will run the opened file with the debugger.

VS Code debug with --experimental-modules flag

I can run my node.js application with es6 modules with the --experimental-modules flag as follows:
node --experimental-modules ./bin/www
How can I do the same when debuggging the application from VS Code, which uses the launch.json configuration file?
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}\\bin\\www",
}
]
}
Instead of using the "program" key you can pass the needed flag in "args" before you pass it your module.
node --experimental-modules ./myModule
{
"version": "0.2.0",
"configurations": [
{
"name": "run module",
"type": "node",
"request": "launch",
"args": ["--experimental-modules", "${workspaceFolder}/myModule"]
}
]
}
I only learned this last week trying to do the same thing with a Python program.
The official guidance is to use the runtimeArgs attribute like this:
{
"name": "Launch Program",
"request": "launch",
"type": "node",
"runtimeArgs": ["--experimental-modules"],
"program": "${workspaceFolder}\\bin\\www"
}
Which will run the following terminal command:
node.exe --experimental-modules .\bin\www
See Also: How to start nodejs with custom params from vscode

vscode How to change `package scripts` to` launch debug`?

package.json
"scripts": {
"start": "node -r dotenv/config index.js dotenv_config_path=.env",
.vscode\launch.json
{
// https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "debug",
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceFolder}\\index.js",
"args": ["-r dotenv/config index.js dotenv_config_path=.env"]
}
]
}
I want to debug, but he can't work, How do I configure launch.json?
Please check Add Configuration button on lower right corner of launch.json.
Sample npm task configuration generated from same:
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"debug"
],
"port": 9229
}
Screenshot:
Adding additional configuration:

VSCode debug configuration for Next.js Frontend with Node.js backend

In my project directory I have a frontend in next.js and a backend in Node.js it looks as follows:
I now would like to debug the program, so both backend and frontend have to run, and I don't know how to create the corrent debug launch.json configuration which I have in my top-level project, to launch and debug both programs.
{
"version": "0.2.0",
"compounds": [
{
"name": "Client+Server",
"configurations": [ "DCBACKEND", "DCFRONTEND" ]
}
],
"configurations": [
{
"type": "node",
"request": "launch",
"name": "DCBACKEND",
"cwd" : "${workspaceFolder}\\dcbackend",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script", "start"
]
},
{
"type": "node",
"request": "launch",
"name": "DCFRONTEND",
"cwd" : "${workspaceFolder}\\dcfrontend",
"program": "${workspaceFolder}\\dcfrontend\\pages\\index.js",
"runtimeExecutable": "next",
"runtimeArgs": [
"--inspect"
]
}
]
}
EDIT: Now, I get the following error:
My start script for my backend is:
"scripts": {
"start": "node index.js -p 7766"
},
so there is something wrong with the port maybe? Also, it runs another script for debug in cmd-line:
C:\Program Files\nodejs\npm.cmd run-script start --inspect-brk=39777
I don't know what it has to do with --inspect-brk=39777, do I need that

Resources