Add launch option that allows run node project by npm script #2726

Ciget · 2016-02-05T00:10:47Z

Hi all,

Looks like current trend to run NodeJs app via npm start or npm dev.
By default, launch.json does not allow us to do this. It`s very unusable. My suggection - to add this feature, that allow easily cconfigure how to run app and not just by parameter "node" and entry point to the site.

Thanks.

weinand · 2016-02-05T09:40:40Z

@Ciget a VS Code 'launch' configuration is used to launch 'node' in debug mode listening on a specific port. I'm not aware of a way to pass the debug-port to node via an "npm start". If you know a way how to do this, please let me know and we can consider to support "npm" as a launch option. Thanks.

Ciget · 2016-02-05T11:18:24Z

@weinand, thanks for quick reply. I`m asking this, because most of top solutions use this approach to run. So, does it means, that using VS Code we will do own way to develop app?

weinand · 2016-02-05T11:53:04Z

@Ciget no, you don't have to change the way of developing an app.

To start your app in debug mode you can use "npm dev" from the command line.

I assume that "npm dev" runs your app in debug mode like this:

"scripts": {
    "dev": "node --debug=12345 server.js"
}

In VS Code create an 'attach' configuration:

{
    "name": "Attach to server.js",
    "type": "node",
    "request": "attach",
    "port": 12345
}

Make sure that the debug port is identical to the one used in the "dev" script (or is 5858 if no port is specified in the dev script).

egamma · 2016-02-05T12:06:04Z

I was about to write the same, I've just used a more complex script as an example.
So the pattern is that you add an npm script for debugging, e.g., build_test_debug.

  "scripts": {
    "build_test": "rm -rf dist/ && npm run lint && npm run build_cjs && jasmine",
    "build_test_debug": "rm -rf dist/ && npm run lint && npm run build_cjs && jasmine --debug-brk
  }

This requires still two steps 1) npm run build_test_debug 2) F5 to attach.
@weinand would it make sense to support running an npm script as a preLaunchTask?

weinand · 2016-02-05T12:12:50Z

@egamma yes, it makes sense to run anything (including npm scripts) as a preLaunchTask. This is on our February 2016 plan (see #2263).

tbeseda · 2016-02-11T17:48:19Z

I'd also be interested in a way for the Launch feature to execute an npm task. 👍
The scripts property of a Node project's manifest is a common way to launch, build, debug, etc.

Also, FWIW, to run an arbitrary npm script like "dev" that isn't a part of the standard scripts use npm-run-script:

$ npm run dev

jpierson · 2016-03-04T16:30:35Z

I had posted on Stack Overflow about this exactly. It would be nice if this was more easily supported.

weinand · 2016-03-04T16:46:26Z

You all seem to have a clear picture how this feature should work.
I don't, so I'd appreciate if someone could help me.

A VS Code 'launch' configuration needs to pass the standard node debug argument '--debug-brk' and a port number to the runtime (e.g. 'node').

If the runtime is launched via an npm script, I still need a mechanism to pass the debug port into that script. What is the way to do this?

jpierson · 2016-03-08T15:28:48Z

I wonder if there is an environment variable alternative to --debug-brk?

Update:
Ah from the document under the configuration section.

environment variables prefixed with node-inspector_

weinand · 2016-03-08T17:23:14Z

@jpierson I don't see how node-inspector can help here? I'm looking for a way to pass a port number to an npm script. Ideally something like this:

npm run-script debug port=1234

VS Code would use this to pass a debug port to node and subsequently VS Code would try to attach to that port.

And the npm script would look like this:

    "scripts": {
        "debug": "node --debug-brk=${port} program.js",
    },

supersonicclay · 2016-03-10T04:03:27Z

I think with npm run you can pass additional arguments by appending -- arguments.

So how about npm run debug -- --debug-brk=1234?
On Mar 8, 2016 10:23 AM, "Andre Weinand" [email protected] wrote:

@jpierson https://github.com/jpierson I don't see how node-inspector
can help here? I'm looking for a way to pass a port number to an npm
script. Ideally something like this:

npm run-script debug port=1234

VS Code would use this to pass a debug port to node and subsequently VS
Code would try to attach to that port.

And the npm script would look like this:
"scripts": {
    "debug": "node --debug-brk=${port} program.js",
},
—
Reply to this email directly or view it on GitHub
#2726 (comment).

jpierson · 2016-03-23T02:02:29Z

Related information from npm:

zhouhao27 · 2016-03-30T02:12:47Z

In my package.json:

 "scripts": {
    "forever": "forever start server.js",
    "db": "mongod --dbpath ./data",
    "nodemon": "nodemon server.js",
    "debug": "concurrently \"npm run db\" \"npm run nodemon\" \"parse-dashboard --config parse-dashboard-config.json --allowInsecureHTTP\"",
    "start": "concurrently \"npm run db\" \"npm run forever\" \"parse-dashboard --config parse-dashboard-config.json\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

In my launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/server.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "sourceMaps": false,
            "outDir": null
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outDir": null,
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        }
    ]
}

I'm wondering if I can debug "npm start", "npm run debug" or not?

dmythro · 2016-04-01T11:06:02Z

Alright, +1 to this. I'm writing Electron application and launch via npm start or some Gulp task, because some stuff needs to be generated before electron main.js can be launched from the app subdir.

Any way to apply this to launch.json nicely?

weinand · 2016-04-01T15:57:57Z

@Z-AX until I find the time to add this feature here is a setup for OS X and linux that uses an npm script to launch a program in debug mode.

Unpack this project zip and make the included script fakenode.sh executable.

Open the project with VS Code and set a breakpoint in hello.js:2.

Start debugging: the breakpoint should be hit.

You will have to adapt the script fakenode.sh and the npm scripts in the package.json to your needs.

Two things are important:

the launch configuration requires a real JavaScript for the program attribute even if you don't need this because it is an implicit part of your npm script. So you can specify an empty dummy.js instead of the hello.js I am using.
VS Code passes a port number to the script that you will have to pass on to the npm script. You cannot drop this because then VS Code will time out when trying to attach to that port.

dmythro · 2016-04-01T16:13:12Z

@weinand, thanks for reply, but until it's supported, will better work as before :)

weinand · 2016-04-01T16:21:23Z

Since the port number might make it difficult to adopt my approach from above, I will add support for a port attribute in the launch configs of request type launch. With this you can specify in your launch config to which port VS Code will try to connect (instead of letting VS Code choose a port randomly).

I've created this feature request for this.

jghaines · 2016-04-06T00:16:40Z

For reference/inspiration, here is a npm runner, with debugging, that I created as a Custom Runner for Cloud9 (a competing IDE). Their feature is in turn inspired by the Sublime build system.

{
   "cmd" : ["npm", "run", "$file_name", "--", "--debug-brk=15454"],
    "info" : "Started: npm run $file_name",
    "env" : {},
    "selector" : "package.json",
    "debugger": "v8",
    "debugport": 15454,
}

unional · 2016-07-23T22:37:00Z

I've created this feature request for this.

Saw the feature request is fulfilled and closed. So how to use it?

Still can't get all the pieces together. How will the launch.json looks like if I want to run npm test?

weinand · 2016-07-23T22:40:03Z

@unional no, this issue is not closed.

unional · 2016-07-23T22:47:02Z

@unional no, this issue is not closed.

Thanks. I thought the update on microsoft/vscode-node-debug#60 would enable this. Look forward for this feature to land! 😄

I also running into difficulty in attaching debug (or launch) to karma + karma-jspm. Do you know of an example I can learn from?

Thanks,

pke · 2016-09-02T06:07:51Z

The problem is to run the script with the debugger already attached.

weinand · 2016-09-02T10:16:21Z

Try this:

In you package.json add a 'debug' script, e.g.:

  "scripts": {
    "start": "node ./bin/www",
    "debug": "node --nolazy --debug-brk=5858"
  },

In your launch config set attribute runtimeExecutable to the npm executable, specify the 'run-script' and 'debug' arguments as runtimeArgs and hardcode the port like this:

{
    "name": "Launch via NPM",
    "type": "node",
    "request": "launch",
    "stopOnEntry": true,
    "program": "${workspaceRoot}/bin/www",
    "args": [],
    "cwd": "${workspaceRoot}",
    "runtimeExecutable": "/Users/xxxxxx/.npm-packages/bin/npm",
    "runtimeArgs": [
        "run-script", "debug"
    ],
    "port": 5858
}

Please note that since the program attribute is mandatory you'll have to pass something even if the real program is already specified in the npm debug script. So you might have to create an empty 'dummy.js' file to satisfy the requirement.

omayhemo · 2016-09-08T13:23:30Z

REDACTED

I think that it's important to note. Not everyone on dev teams will use the same tooling. I don't think it can be expected to alter the launch scripts in lieu of a single IDE that doesn't support it.

weinand · 2016-09-08T13:27:18Z

@omayhemo
Do you mean the approach from my previous comment did not work for you?

omayhemo · 2016-09-08T14:19:16Z

No it doesn't work for me, unless I'm missing something. Putting the runtime path to the npm location results in the ENOENT error. I've tried several different paths here, all ultimately ending in failure.

Additionally our teams make heavy use of gulp serve and browserify.

weinand · 2016-09-08T14:33:43Z

@omayhemo if all other IDEs support npm scripts for launching the target in debug mode, then you can probably help me understanding how these IDEs run the target in debug mode through npm.

And in what ENOENT error are you running? If you use which npm to find the path, I cannot imagine how that can result in an ENOENT.

weinand · 2016-09-08T14:39:05Z

@omayhemo for the gulp serve and browserify issues I suggest to create a new issues so that we can track them individually.

omayhemo · 2016-09-08T15:01:22Z

npm-which helped me correct the path. Thanks for that suggestion. That did indeed allow me to launch with your prescribed solution. Minus, of course, the task runners. I've seen some documentation on task runners in vs code, though i wasn't sure if it was applicable to our situation given our tasks actual 'compile' and serve. It warrants a deeper look before I open an issue.

weinand · 2016-09-08T15:08:18Z

@omayhemo good to hear that my prescribed (workaround) solution was not a complete failure ;-)

weinand · 2016-09-10T21:02:53Z

You can now use any program as the runtimeExecutable and pass arguments via the runtimeArgs.
The program attribute is no longer mandatory which helps if the npm script already specifies the program to launch.
If you specify a (debug) port via the port attribute, no --debug-brk=nnnn attribute will be passed automatically (because the debug port is typically specified by the npm scripts as well).

So if your package.json has a 'debug' script, e.g.:

  "scripts": {
    "debug": "node --nolazy --debug-brk=5858 myProgram.js"
  },

the corresponding launch config could look like this:

{
    "name": "Launch via NPM",
    "type": "node",
    "request": "launch",
    "cwd": "${workspaceRoot}",
    "runtimeExecutable": "npm",
    "runtimeArgs": [
        "run-script", "debug"
    ],
    "port": 5858
}

Yahkob · 2016-12-12T17:54:42Z

This would be awesome to document @weinand . I can open a PR for this if it makes sense to add

jdnichollsc · 2016-12-14T04:10:53Z

Any example with meteor.js? for example using the command npm start. Check my scripts please https://github.com/jdnichollsc/Meteor-Starter-Template/blob/master/package.json

Regards, Nicholls

Yahkob · 2016-12-14T06:19:19Z

@jdnichollsc try wrapping the meteor script with node using the debug-brk flag:
node --debug-brk -- meteor --settings settings-development.json

jdnichollsc · 2016-12-14T15:37:51Z

@Yahkob The following error appeared:

npm run-script debug 
> example@1.0.0 debug /FrontEnd
> node --debug-brk -- meteor --settings settings.json --port 8890
Debugger listening on [::]:5858
module.js:471
    throw err;
    ^
Error: Cannot find module '/FrontEnd/meteor'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Timeout.Module.runMain [as _onTimeout] (module.js:604:10)
    at ontimeout (timers.js:365:14)
    at tryOnTimeout (timers.js:237:5)
    at Timer.listOnTimeout (timers.js:207:5)
npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run-script" "debug"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! example@1.0.0 debug: `node --debug-brk -- meteor --settings settings.json --port 8890`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the example@1.0.0 debug script 'node --debug-brk -- meteor --settings settings.json --port 8890'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the bidenergy package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node --debug-brk -- meteor --settings settings.json --port 8890
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs example
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls example
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR!     /FrontEnd/npm-debug.log

Using the following configuration

package.json:

{
  "name": "example",
  "version": "1.0.0",
  "description": "Application description.",
  "scripts": {
    "start": "meteor --settings settings.json --port 8890",
    "debug": "node --debug-brk -- meteor --settings settings.json --port 8890"
  }
}

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch via NPM",
            "cwd": "${workspaceRoot}",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "run-script", "debug"
            ],
            "port": 5858
        }
    ]
}

Thanks in advance, Nicholls

Yahkob · 2016-12-14T16:55:49Z

You'll need to provide an absolute path to meteor (i.e. /usr/local/bin/meteor) @jdnichollsc

jdnichollsc · 2016-12-14T18:33:51Z

Exist any other cross-platform option? (Mac, Linux, Windows)
PD: I'm running Meteor with the command npm start :)

electrotype · 2016-12-15T20:21:45Z

On Windows, the "runtimeExecutable" has to be "npm.cmd", not "npm". Otherwise, the Cannot launch debug target (spawn npm ENOENT). error occures!

Is there a way to make this cross-plateform?

weinand · 2016-12-15T20:26:52Z

@electrotype please see https://code.visualstudio.com/updates/v1_6#_launch-configuration-supports-npm-and-other-tools for details

electrotype · 2016-12-15T20:30:59Z

It would be nice to have a "${runtimeExtension}" variable which would be ".cmd" or "" depending on the platform, so we could simply use : "runtimeExecutable": "npm${runtimeExtension}.
Thanks @weinand

weinand · 2016-12-15T21:07:35Z

@electrotype a "${runtimeExtension}" variable would not be a general solution for all possible task runners because ".cmd" is not the only possible extension on Windows.

The following solution is already possible and works in all cases:

    "runtimeExecutable": "npm",
    "windows": {
        "runtimeExecutable": "npm.cmd"
    },

electrotype · 2016-12-16T01:29:47Z

@weinand I don't want to be too much off-topic, but with everything I've learned in this thread, I'm still not able to properly debug a Node.js application based on TypeScript with auto recompilation and application restart in VSCode. I asked my question on StackOverflow, with a project example. If you have some time to check it out, it would be really appreciated!!

weinand · 2016-12-16T08:04:26Z

@electrotype I've commented on StackOverflow.

BTW, I've created a feature request for your scenario.

jrieken assigned isidorn Feb 5, 2016

isidorn assigned weinand and unassigned isidorn Feb 5, 2016

weinand added the debug Debug viewlet, configurations, breakpoints, adapter issues label Feb 5, 2016

weinand added this to the Backlog milestone Feb 5, 2016

weinand added the feature-request Request for new features or functionality label Mar 23, 2016

weinand closed this as completed Apr 1, 2016

weinand reopened this Apr 1, 2016

weinand mentioned this issue Apr 1, 2016

How to debug node project for specific script command? #4813

Closed

weinand modified the milestones: September 2016, Backlog Sep 10, 2016

weinand closed this as completed in microsoft/vscode-node-debug@d643199 Sep 10, 2016

kieferrm mentioned this issue Sep 13, 2016

September Iteration Plan #11917

Closed

weinand mentioned this issue Sep 19, 2016

Test launch option that allows run node project by npm script #12253

Closed

1 task

bigteejay mentioned this issue Aug 2, 2017

Got Node process error: Error: spawn npm ENOENT when debug node.js #31433

Closed

burkeholland mentioned this issue Aug 7, 2017

Add script to run server and app at same time burkeholland/express-react-starter#2

Closed

vscodebot bot locked and limited conversation to collaborators Nov 18, 2017

Add launch option that allows run node project by npm script #2726

Add launch option that allows run node project by npm script #2726

Comments

Ciget commented Feb 5, 2016

weinand commented Feb 5, 2016

Ciget commented Feb 5, 2016

weinand commented Feb 5, 2016

egamma commented Feb 5, 2016

weinand commented Feb 5, 2016

tbeseda commented Feb 11, 2016

jpierson commented Mar 4, 2016

weinand commented Mar 4, 2016

jpierson commented Mar 8, 2016

weinand commented Mar 8, 2016

supersonicclay commented Mar 10, 2016

jpierson commented Mar 23, 2016

zhouhao27 commented Mar 30, 2016

dmythro commented Apr 1, 2016

weinand commented Apr 1, 2016

dmythro commented Apr 1, 2016

weinand commented Apr 1, 2016

jghaines commented Apr 6, 2016

unional commented Jul 23, 2016

weinand commented Jul 23, 2016

unional commented Jul 23, 2016

pke commented Sep 2, 2016

weinand commented Sep 2, 2016 • edited Loading

omayhemo commented Sep 8, 2016 • edited Loading

weinand commented Sep 8, 2016 • edited Loading

omayhemo commented Sep 8, 2016

weinand commented Sep 8, 2016 • edited Loading

weinand commented Sep 8, 2016

omayhemo commented Sep 8, 2016 • edited Loading

weinand commented Sep 8, 2016

weinand commented Sep 10, 2016 • edited Loading

Yahkob commented Dec 12, 2016 • edited Loading

jdnichollsc commented Dec 14, 2016

Yahkob commented Dec 14, 2016 • edited Loading

jdnichollsc commented Dec 14, 2016 • edited Loading

Yahkob commented Dec 14, 2016

jdnichollsc commented Dec 14, 2016 • edited Loading

electrotype commented Dec 15, 2016

weinand commented Dec 15, 2016

electrotype commented Dec 15, 2016

weinand commented Dec 15, 2016 • edited Loading

electrotype commented Dec 16, 2016

weinand commented Dec 16, 2016 • edited Loading

weinand commented Sep 2, 2016 •

edited

Loading

omayhemo commented Sep 8, 2016 •

edited

Loading

weinand commented Sep 8, 2016 •

edited

Loading

weinand commented Sep 8, 2016 •

edited

Loading

omayhemo commented Sep 8, 2016 •

edited

Loading

weinand commented Sep 10, 2016 •

edited

Loading

Yahkob commented Dec 12, 2016 •

edited

Loading

Yahkob commented Dec 14, 2016 •

edited

Loading

jdnichollsc commented Dec 14, 2016 •

edited

Loading

jdnichollsc commented Dec 14, 2016 •

edited

Loading

weinand commented Dec 15, 2016 •

edited

Loading

weinand commented Dec 16, 2016 •

edited

Loading