WebStorm your Node app!

This is a simple tutorial on how to get started with Node.JS development in WebStorm 3.0 EAP. The same steps apply for PhpStorm 3.0 EAP or IntelliJ IDEA 11 EAP with Node.JS plugin installed.

Initially, you’ll need to configure the location of Node.JS JavaScript files in the IDE. To do that, click the icon on the toolbar. If you have Node.JS installed from sources, specify its location there. Otherwise you can always download Node.JS JavaScript source files from http://nodejs.org/dist (e.g. http://nodejs.org/dist/v0.6.2/node-v0.6.2.tar.gz).

This setting is needed for completion, validation and debugging of standard NodeJS symbols.

There are several ways to run or debug Node.JS app script. The easiest way to start is right from the editor popup menu:

Run / debug parameters can be tweaked for the created run configuration. Although NodeJS path is auto-detected, it’s possible to change it by editing the “Default” configuration.

After you’ve run the correctly created configuration, it is possible to debug Node app using breakpoints, stepping, expressions evaluation, etc.

WebStorm is aware of CommonJS module structure and suggests proper auto completion options:

Develop your Node.JS applications with pleasure!

Download WebStorm for your platform from this project EAP page.

This blog is permanently closed.

For up-to-date information please follow to corresponding WebStorm blog or PhpStorm blog.

 
This entry was posted in Cool Feature, Tutorial, WebStorm and tagged , , . Bookmark the permalink.

41 Responses to WebStorm your Node app!

  1. Not sure if I’m missing something, or using an old version, but the toolbar icon here (in both WebStorm and RubyMine) looks like “” rather than fancy JS icon showed in the article.

    Might be of use if anyone else is hunting for the icon like I was :)

  2. I don’t know if i’m the only one but this EAP is really slow compared to the other ones, There is a significant lag when generating phpdoc, autocompletion and when reformating code blocks .
    I also have reported a bug about the file tree always closing for no aparent reason:

  3. Tadek says:

    Does it work with coffee-script too?

  4. Noah says:

    How would you debug a node app that runs in the browser and get code break points to fire in webstorm debugger? The app would run on localhost or remotely.

  5. Brandon says:

    I can’t get debugging to work at all with an Express app. It stops at fs.js at line 407 and won’t go any further. Open Source doesn’t work when viewing the item. It seems to be a no go and I’m back to using Node-Inspector which is great but not in the IDE of course. Has anybody gotten the plugin working on 3.0 with an ExpressJS app?

    • Brandon says:

      Haha, the minute I sent this I found View Breakpoints and unchecked All Exceptions in there. It got me up and running so still investigating

  6. Alex says:

    Do not you plan to include such tool as
    https://github.com/remy/nodemon
    https://github.com/cenanozen/nodemonw

    to automatically restart node when code is changed?

  7. Pingback: [waiting for approval] Run nodeunit tests with WebStorm 3.0 | WebStorm & PhpStorm Blog

  8. Pingback: async I/O News » WebStorm your Node app

  9. Billy Cravens says:

    Small thing, but your example is referencing “sys”: it was changed to “util” as of v0.3.0 (late 2010). Even if it works, may lose that backwards compatibility in future version, so best practice to use current name (your examples are referencing v0.6.2)

  10. Colin Han says:

    I can’t debugging a node.js app from WebStorm. when i start debug, the application is not run, just a “debugger listening on port 4243″ message is shown in console window. And a “connecting to 127.0.0.1:4243″ message is shown in debugger’s variables window.

    My system is Windows 7, And I had install WebStorm 2.1.5 and Nodejs 0.6.6. Do I missing something?

    Thanks.

  11. Martin says:

    I get “Error: EADDRINUSE, Address already in use” from node when starting it (the green play button). So I have to stop it first using the red stop button.

    It would be great if I didn’t have to stop and restart node each time I change a file. But rather having WebStorm do it for me (like https://github.com/isaacs/node-supervisor)

  12. Antonio says:

    What if you have a node.js server in a remote server?

  13. matthew says:

    Hi, Ive just bought WS3 and Im trying to set up node. I am trying to set the node location which is in my usr/local/bin dir and the files are greyed out and the choose button does nothing. My node version is 0.6.9.

    Am I doing something wrong here?

    thanks

    Matt

  14. Maxim Mossienko says:

    2Antonio you need to use remote Node.js Remote debug

  15. Maxim Mossienko says:

    2matthew please file YouTrack (http://youtrack.jetbrains.net/dashboard#newissue=yes) ticket with image of the dialog

  16. Antonio Greco says:

    @matthew I’m having the same problem.. have you managed find a solution?

    Cheers
    Antonio

  17. Maxim Mossienko says:

    @matthew , Antonio Do you mean you have problem setting up location of Node.JS JavaScript files or specifying path to Node executable?

  18. Tim Whidden says:

    On OS X Lion, PHPStorm v 3.0.1 & NodeJS plugin 0.2.1

    Everything works as expected with run configurations. The IDE found by homebrew installed node (/usr/local/bin/node), I can debug, break, step through, etc.

    When I try to configure for ‘… completion, validation and debugging of standard NodeJS symbols’ however, the selection dialog doesn’t seem to recognize the symlink in the /usr/local/bin/ (or *any* executable file). I can’t select my node install so

  19. BenNG says:

    Really Nice work !!!
    Thank you

  20. mykola says:

    I’ve got almost everything working correctly but I can’t seem to get IntelliJ IDEA to correctly provide code completion for Node.JS projects.

    I’m able to debug a node.js application etc, that’s no problem, I can set breakpoints and they will fire, etc. But I have no idea what to plug in as the “Node JS location” when I click the Node button as described above. I used Node’s provided MacOS installer, which mounts like any other application installer and then installs node and adds it to the path. Node no longer forces you to make and build your own install.

    So the problem is, I have no idea where to point IDEA to to get code completion. I’ve tried /usr/local/bin, /usr/local/lib, /usr/local/lib/node, /usr/local/lib/node_modules – none of it seems to work.

    What am I doing wrong?

    • mykola says:

      I do have a workaround which I don’t quite like but which at least seems to do the trick.

      Even though I installed node.js on my mac using their pre-packaged installer, I was able to download the source as well. I unzipped it and stuck it in a directory in my user folder. I did not make or install this source code – I simply downloaded it.

      Then in IDEA I was able to tell Node.js to look in that source folder for its libraries.

      These libraries don’t seem to exist if you install Node.JS on a Mac using the provided installer. I mean, they must exist somewhere – but are they just compiled into the source somewhere and hidden?

    • Maxim Mossienko says:

      “Node JS location” (in Update Node.JS action) is actually path to Node.JS source code directory (right now one needs to download it manually unless Node.JS built from source), we will fix that, sorry for confusion

Comments are closed.