Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Ciget opened this issue Feb 5, 2016 · 49 comments
Closed

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

Ciget opened this issue Feb 5, 2016 · 49 comments
Assignees

Comments

@Ciget
Copy link

@Ciget Ciget commented Feb 5, 2016

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.

@isidorn isidorn assigned weinand and unassigned isidorn Feb 5, 2016
@weinand
Copy link
Member

@weinand weinand commented Feb 5, 2016

@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.

@weinand weinand added the debug label Feb 5, 2016
@weinand weinand added this to the Backlog milestone Feb 5, 2016
@Ciget
Copy link
Author

@Ciget Ciget commented Feb 5, 2016

@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
Copy link
Member

@weinand weinand commented Feb 5, 2016

@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
Copy link
Member

@egamma egamma commented Feb 5, 2016

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
Copy link
Member

@weinand weinand commented Feb 5, 2016

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

@tbeseda
Copy link

@tbeseda tbeseda commented Feb 11, 2016

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
Copy link

@jpierson jpierson commented Mar 4, 2016

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

@weinand
Copy link
Member

@weinand weinand commented Mar 4, 2016

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
Copy link

@jpierson jpierson commented Mar 8, 2016

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
Copy link
Member

@weinand weinand commented Mar 8, 2016

@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
Copy link

@supersonicclay supersonicclay commented Mar 10, 2016

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" notifications@github.com 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
Copy link

@jpierson jpierson commented Mar 23, 2016

@zhouhao27
Copy link

@zhouhao27 zhouhao27 commented Mar 30, 2016

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
Copy link

@dmythro dmythro commented Apr 1, 2016

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
Copy link
Member

@weinand weinand commented Apr 1, 2016

@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
Copy link

@dmythro dmythro commented Apr 1, 2016

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

@weinand
Copy link
Member

@weinand weinand commented Apr 1, 2016

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
Copy link

@jghaines jghaines commented Apr 6, 2016

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
Copy link

@unional unional commented Jul 23, 2016

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
Copy link
Member

@weinand weinand commented Jul 23, 2016

@unional no, this issue is not closed.

@unional
Copy link

@unional unional commented Jul 23, 2016

@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
Copy link

@pke pke commented Sep 2, 2016

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

@weinand
Copy link
Member

@weinand weinand commented Sep 2, 2016

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
Copy link

@omayhemo omayhemo commented Sep 8, 2016

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
Copy link
Member

@weinand weinand commented Sep 8, 2016

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

@omayhemo
Copy link

@omayhemo omayhemo commented Sep 8, 2016

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
Copy link
Member

@weinand weinand commented Sep 8, 2016

@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
Copy link
Member

@weinand weinand commented Sep 8, 2016

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

@omayhemo
Copy link

@omayhemo omayhemo commented Sep 8, 2016

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
Copy link
Member

@weinand weinand commented Sep 8, 2016

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

@weinand
Copy link
Member

@weinand weinand commented Sep 10, 2016

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
Copy link

@Yahkob Yahkob commented Dec 12, 2016

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

@jdnichollsc
Copy link

@jdnichollsc jdnichollsc commented Dec 14, 2016

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
Copy link

@Yahkob Yahkob commented Dec 14, 2016

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

@jdnichollsc
Copy link

@jdnichollsc jdnichollsc commented Dec 14, 2016

@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
Copy link

@Yahkob Yahkob commented Dec 14, 2016

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

@jdnichollsc
Copy link

@jdnichollsc jdnichollsc commented Dec 14, 2016

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

@electrotype
Copy link

@electrotype electrotype commented Dec 15, 2016

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?

@electrotype
Copy link

@electrotype electrotype commented Dec 15, 2016

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
Copy link
Member

@weinand weinand commented Dec 15, 2016

@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
Copy link

@electrotype electrotype commented Dec 16, 2016

@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
Copy link
Member

@weinand weinand commented Dec 16, 2016

@electrotype I've commented on StackOverflow.

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.