WebStorm your Node app!

Posted on by Maxim Mossienko

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.

Comments below can no longer be edited.

41 Responses to WebStorm your Node app!

  1. Steven Robbins says:

    November 22, 2011

    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 🙂

    • Sergey Simonchik says:

      November 22, 2011

      Steven, make sure you have the latest NodeJS plugin (>= 0.1.3b).

      • Steven Robbins says:

        November 22, 2011

        I installed it for the first time when I read this blog post.. latest one showing for me is 0.1.2 (in both RubyMine and WebStorm).. is this relating to an EAP I’m not using?

        • Sergey Simonchik says:

          November 22, 2011

          Yes, it is relating to WebStorm 3.0 EAP. I’ve updated post accordingly.
          Thanks!

  2. Francis Bélanger says:

    November 23, 2011

    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:

    • Maxim Mossienko says:

      November 23, 2011

      Please add comment to appropriate blog post

  3. Tadek says:

    November 23, 2011

    Does it work with coffee-script too?

    • Maxim Mossienko says:

      November 23, 2011

      Completion will work, debugging will not work, we are investigating how to support it

    • Maxim Mossienko says:

      November 24, 2011

      Take latest WebStorm 3 beta for CoffeeScript completion

      • Tadek says:

        November 24, 2011

        Thanks. Any chances that nodejs with coffee-script support will be available in v3.0?

        • Maxim Mossienko says:

          November 24, 2011

          No, that will happen after 3.0. AFAIK right now nobody can debug CoffeeScript because it is translated to JavaScript 🙂

          • Tadek says:

            November 24, 2011

            Yes, currently nobody can debug coffeescript, but I was thinking about some kind of transparent compilation of coffeescript to js and then debugging it in webstorm
            Btw. in the future it will be possible to debug coffee-script directly https://github.com/jashkenas/coffee-script/issues/558

  4. Noah says:

    November 28, 2011

    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.

    • Noah says:

      November 29, 2011

      To clarify, I’m building a website with the express.js node framework. Can I run the site over localhost and debug the node.js scripts in webstorm? If so, how?

  5. Brandon says:

    December 2, 2011

    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:

      December 2, 2011

      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:

    December 4, 2011

    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. [waiting for approval] Run nodeunit tests with WebStorm 3.0 | WebStorm & PhpStorm Blog says:

    December 8, 2011

    […] you know Node.js support has been already presented in WebStorm 3.0. Now we would like to introduce integration with nodeunit — unit testing framework for […]

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

    December 13, 2011

    […] Read full article Categories: All, NodeJS Tags: IDE, JavaScript, Node.JS, WebShtorm Comments are closed. memcache internals RSS […]

  9. Billy Cravens says:

    December 26, 2011

    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)

    • Maxim Mossienko says:

      January 1, 2012

      Yep, you are right, node-chat we are using for the demo should be fixed

  10. Colin Han says:

    December 31, 2011

    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.

    • Maxim Mossienko says:

      January 1, 2012

      NodeJS plugin for WebStorm 2.1.X does not support Node 0.6.6
      Please use WebStorm 3

  11. Martin says:

    January 4, 2012

    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:

    January 19, 2012

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

  13. matthew says:

    January 27, 2012

    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:

    January 30, 2012

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

  15. Maxim Mossienko says:

    January 30, 2012

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

  16. Antonio Greco says:

    February 2, 2012

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

    Cheers
    Antonio

  17. Maxim Mossienko says:

    February 2, 2012

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

    February 6, 2012

    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

    • Alexey Gopachenko says:

      February 7, 2012

      this should really go into tracker!

  19. BenNG says:

    February 13, 2012

    Really Nice work !!!
    Thank you

  20. mykola says:

    February 21, 2012

    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:

      February 21, 2012

      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:

      February 21, 2012

      “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