Features Tutorials WebStorm

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.

Comments below can no longer be edited.

41 Responses to WebStorm your Node app!

  1. Avatar

    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 🙂

    • Avatar

      Sergey Simonchik says:

      November 22, 2011

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

      • Avatar

        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?

        • Avatar

          Sergey Simonchik says:

          November 22, 2011

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

  2. Avatar

    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:

    • Avatar

      Maxim Mossienko says:

      November 23, 2011

      Please add comment to appropriate blog post

  3. Avatar

    Tadek says:

    November 23, 2011

    Does it work with coffee-script too?

    • Avatar

      Maxim Mossienko says:

      November 23, 2011

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

    • Avatar

      Maxim Mossienko says:

      November 24, 2011

      Take latest WebStorm 3 beta for CoffeeScript completion

      • Avatar

        Tadek says:

        November 24, 2011

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

        • Avatar

          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 🙂

          • Avatar

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

    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.

    • Avatar

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

    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?

    • Avatar

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

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

    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)

    • Avatar

      Maxim Mossienko says:

      January 1, 2012

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

  10. Avatar

    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.

    • Avatar

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

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

    Antonio says:

    January 19, 2012

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

  13. Avatar

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

    Maxim Mossienko says:

    January 30, 2012

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

  15. Avatar

    Maxim Mossienko says:

    January 30, 2012

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

  16. Avatar

    Antonio Greco says:

    February 2, 2012

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

    Cheers
    Antonio

  17. Avatar

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

    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

    • Avatar

      Alexey Gopachenko says:

      February 7, 2012

      this should really go into tracker!

  19. Avatar

    BenNG says:

    February 13, 2012

    Really Nice work !!!
    Thank you

  20. Avatar

    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?

    • Avatar

      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?

    • Avatar

      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