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.
Steven Robbins says:
November 22, 2011Not 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, 2011Steven, make sure you have the latest NodeJS plugin (>= 0.1.3b).
Steven Robbins says:
November 22, 2011I 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, 2011Yes, it is relating to WebStorm 3.0 EAP. I’ve updated post accordingly.
Thanks!
Francis Bélanger says:
November 23, 2011I 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, 2011Please add comment to appropriate blog post
Tadek says:
November 23, 2011Does it work with coffee-script too?
Maxim Mossienko says:
November 23, 2011Completion will work, debugging will not work, we are investigating how to support it
Maxim Mossienko says:
November 24, 2011Take latest WebStorm 3 beta for CoffeeScript completion
Tadek says:
November 24, 2011Thanks. Any chances that nodejs with coffee-script support will be available in v3.0?
Maxim Mossienko says:
November 24, 2011No, that will happen after 3.0. AFAIK right now nobody can debug CoffeeScript because it is translated to JavaScript 🙂
Tadek says:
November 24, 2011Yes, 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
Noah says:
November 28, 2011How 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, 2011To 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?
Maxim Mossienko says:
November 29, 2011You can debug client site JavaScript nearly the same way as server side one, the only difference is in type of client configuration. See following post on how to debug JavaScript in Chrome https://blog.jetbrains.com/webide/2011/04/debugging-javascript-in-google-chrome/ We also support debugging in FireFox.
Brandon says:
December 2, 2011I 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, 2011Haha, the minute I sent this I found View Breakpoints and unchecked All Exceptions in there. It got me up and running so still investigating
Alex says:
December 4, 2011Do 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?
Maxim Mossienko says:
December 5, 2011this is nice feature, please create ticket in YouTrack
David Rees says:
May 11, 2012nodemon like support is http://youtrack.jetbrains.com/issue/IDEA-82601
[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 […]
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 […]
Billy Cravens says:
December 26, 2011Small 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, 2012Yep, you are right, node-chat we are using for the demo should be fixed
Colin Han says:
December 31, 2011I 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, 2012NodeJS plugin for WebStorm 2.1.X does not support Node 0.6.6
Please use WebStorm 3
Martin says:
January 4, 2012I 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)
Antonio says:
January 19, 2012What if you have a node.js server in a remote server?
matthew says:
January 27, 2012Hi, 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
Maxim Mossienko says:
January 30, 20122Antonio you need to use remote Node.js Remote debug
Kato says:
April 4, 2012Doesn’t work remotely because of this bug. Upvote it! : )
Maxim Mossienko says:
January 30, 20122matthew please file YouTrack (http://youtrack.jetbrains.net/dashboard#newissue=yes) ticket with image of the dialog
Antonio Greco says:
February 2, 2012@matthew I’m having the same problem.. have you managed find a solution?
Cheers
Antonio
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?
Tim Whidden says:
February 6, 2012On 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, 2012this should really go into tracker!
BenNG says:
February 13, 2012Really Nice work !!!
Thank you
mykola says:
February 21, 2012I’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, 2012I 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?
mykola says:
February 21, 2012Just for clarification, is what I did above the proper way to make this work? It feels kinda hacky, but if that’s what we have for now then that’s fine.
I ask because I want to add this information to a blog post I did about configuring IntelliJ IDEA to develop Node.JS + HTML projects.
http://mykola.bilokonsky.net/2012/02/using-intellij-idea-to-build-html5-apps-on-a-node-js-server/
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