Getting Started with Node.js in WebStorm
Node.js is definitely a hot topic in web development. Here at JetBrains, we can really see how its adoption is growing among WebStorm users. To address this trend we’d like to make a series of posts on Node.js development with WebStorm.
Let’s start with the basics: How to configure WebStorm to work with Node.js projects?We’ll go through the steps required to create a new Express app as an example.
Click Create New Project on WebStorm Welcome screen and select Express app template:
WebStorm will locate Node.js and NPM on your computer (these must be pre-installed; if they’re not, please go to http://nodejs.org/ for more information on installation).
In the same dialog window you can select Express configuration options, for example, to specify the template language you are going to use:
Next step: WebStorm will suggest installing or locating Node.js source files that are required for proper code completion:
Important note: If you are working with a node project created from existing files, you still have to set the path to Node.js interpreter and download sources in Settings | Node.js and NPM.
Now let’s go to Settings | JavaScript | Libraries and make sure that both Node.js Globals and Node.js Core Modules libraries are checked. It will enable code completion for Node.js:
When you open a project with node_modules directory in it, WebStorm will suggest creating a Node.js Dependencies JavaScript library. This action will add these modules to the list of JavaScript libraries used WebStorm for code completion, syntax highlighting, navigation and documentation lookup:
WebStorm 7 allows you to add TypeScript community stubs to the list of JavaScript libraries used for library-specific code completion in JavaScript and TypeScript.
To enhance syntax highlighting and code completion for methods from Express module, one additional step is required. Let’s download the corresponding TypeScript definition file: Settings | JavaScript | Libraries – Download – TypeScript Community Stubs – Express.
Now WebStorm is set up to work with Node.js projects.
This tutorial is also available on WebStorm Confluence Space.
Have a look at the next post on Node.js development in our blog: “Running and debugging Node.js applications”.
Develop with pleasure!
-JetBrains WebStorm Team
Rusty says:
January 19, 2014I’ve never seen the “Node.js project detected” (running 7.03 on Windows). What is the equivalent if I have to do manually? Mark node_modules directory as Excluded then add as a JS library?
Ekaterina Prigara says:
January 19, 2014Yes, exactly.
Do you have package.json in your project?
uur says:
January 21, 2014Hi;
Is there any plan to support Node-Webkit?
Actually, it works but node-webkit require mechanism little bit different from regular node.js apps.
Ex;
MyApp strutructure;
App
— view/index.html
— js/pretty.js
when I call
require('./js/pretty.js');in index.htmlleads confusion in webstrom and directory cannot be resolved since it thinks
pretty.js it’s somewhere in
— view/js/pretty.js
I move all my node.js projects in webstorm, but I have to use sublime text for node-webkit.
It’s just a regular warning – I know – but auto-completion dont work and warnings pretty much everywhere which I hate to see those.
Ekaterina Prigara says:
January 21, 2014Thanks for your feedback.
We’ll see what we can do.
Zuriel says:
January 26, 2014I’d love to see some examples that come from projects like angular-generator. I think a lot of people are using grunt and yeoman but i think webstorm has some similar tools. I’d love for them to coexist as best as possible but thinks like live reload vs liveedit are causing me glitches.
Ekaterina Prigara says:
January 27, 2014We are working on Grunt and Yo integration. Right now you can configure Yeoman as an external tool in WebStorm: https://www.youtube.com/watch?v=KBueufmUgdw
Running and debugging Node.js application | JetBrains WebStorm Blog says:
February 14, 2014[…] Our first post covered the basic WebStorm configuration for working with Node.js projects. Now let’s move on to running and debugging Node.js apps both locally and remotely. We’ll use the same example, a simple Express app. […]
RM Ubaldo says:
March 19, 2014How does the JavaScript and Node.js feature stack of WebStorm compare to IntelliJ IDEA? Does the later lack anything the former brings to the table?
Ekaterina Prigara says:
March 19, 2014IntelliJ IDEA has all the features WebStorm has, they are either available out of the box, or as a free plugin. The only difference comes in terms of updates: new features usually come first to WebStorm and a bit later are available in IntelliJ IDEA, but the delay is minimal usually.
Scott Conklin says:
March 26, 2014In webstorm 8 on Windows 7, downloading the Typescript Community stub for Express
popups up an alert that says:
Can not download from https://github.com/borisyankov/DefinitelyTyped/raw/master/express/express.d.ts. handshake alert: unrecognized_name
Do you know why and how to fix this?
Konstantin Ulitin says:
March 26, 2014Please see WEB-11434.
Scott Conklin says:
March 26, 2014after i posed the above question, i found this
https://intellij-support.jetbrains.com/entries/23395793
Scott Conklin says:
March 26, 2014that worked, thanks! …. but the issue that i was told would be solved by downloading the typescript lib is still happening..
I still get the wavy line with invalid number of arguments in the popup..
is this not what adding the TS was supposed to resolve? …. (BTW: i am talking about express)
https://www.evernote.com/shard/s349/sh/9ee9c5c8-7a19-410e-85b1-2478eef67200/952eb87ed33298c22267a438c8123cb9
Yole says:
April 3, 2014The same with me, have you resolved this issue?
Yole says:
April 3, 2014I mean the issue for ‘ invalid number of arguments’
Ekaterina Prigara says:
April 3, 2014Like it was said in the blog post, when using Express, we recommend you to download TypeScript stubs for Express. On your screenshot it seems that you haven’t downloaded that.
They should appear in the list of JavaScript libraries.
Juan says:
May 2, 2014I get.
Error creating Node.js Express App. Wrong express generator: /Users/juansolano/Desktop/wbex/node_modules/express/bin/express
I am using Webstorm 6.0.2
Ekaterina Prigara says:
May 3, 2014With the new version of Express, there was an update in the generator. We fixed the problem, the fix will be available in the upcoming bug fix update of WebStorm 8 (http://youtrack.jetbrains.com/issue/WEB-11823).
Santosh says:
May 15, 2014Hi Ekaterina,
This is awesome. I was missing the TypeScript stub download and was getting syntax error. I am getting started with this IDE and this kind of tuts are really helpful for beginners like me.
Santosh
Ekaterina Prigara says:
May 15, 2014Great that you found it useful 🙂
Guide to Node.js Development with WebStorm | JetBrains WebStorm Blog says:
May 16, 2014[…] Tutorial: Getting started with Node.js in WebStorm […]
savior says:
June 5, 2014Get Parameters in a JavaScript Script Tag
http://code.tonytuan.org/2014/06/js-get-parameters-in-javascript-script.html
Alisha says:
August 10, 2014Quite useful! Thanks! 🙂
Keith Lawrence says:
August 30, 2014Very useful first-time usage article, got me on my way with node in a familiar JetBrains environment. Thanks!
Al Spohn says:
October 26, 2014When I followed the defaults to create a node.js – express project in WebStorm, my Mac balked since I wasn’t logged in with su privs. When I attempted to create a command line launch script (located in the default location) via the Tools menu, I get this when I run it (via sudo or not):
When I followed the defaults to create a node.js – express project in WebStorm, my Mac balked since I wasn’t logged in with su privs. When I attempted to create a command line launch script (located in the default location) via the Tools menu, I get this when I run it (via sudo or not):
Als-iMac:bin alspohn$ sudo -b ./wstorm2
Als-iMac:bin alspohn$ Traceback (most recent call last):
File “./wstorm2”, line 85, in
os.execv(RUN_PATH, [bin_file] + args)
OSError: [Errno 2] No such file or directory
Any suggestions?
Thanks,
Al
Alex Maghen says:
November 3, 2014I appreciate this blog post (“Getting Started with Node.js in WebStorm”) but for some reason, I cannot get to the most basic starting point and I’d love some help:
Configuration:
– Mac OSX (Yosemite)
– WebStorm 9.0.1
– node v 0.10.33
– npm v 1.4.28
I am just trying to get as far as building the example in your “Getting Started with Node.js in WebStorm” blog post but here’s what happens:
I create the new project exactly as shown in the step-by-step. When I click ok, an “Express Project Generator” dialog pops up and starts doing npm install stuff. After a minute or so, I get an error window is follows:
Create Express Project
Error creating Node.js Express App. Failed command:
/usr/local/bin/node /usr/local/bin/npm install
Exit code: 1
Standard error:
npm WARN deprecated static-favicon@1.0.2: use serve-favicon module
…
…
end it goes on like that with more “fetch failed” errors.
I certainly have an internet connection so it’s not that either.
I’d really love your help getting started here.
Thanks.
Alex
Ekaterina Prigara says:
November 3, 2014Seems like a problem of Express project generator. On the new project dialog what is the generator version selected?
dewald says:
November 15, 2014Who ever said I wanted to use ExpressJS?
Ekaterina Prigara says:
November 18, 2014The setup for a non-Express project is basically the same.
Tran Duc Thang says:
November 29, 2014I got it for all, very detail and full support, as well as very simple, thank you so much 🙂
bobby says:
December 11, 2014Hi,
When i create an project on Ubuntu Webstorm, got following error, could anyone give a help please?
npm ERR! Error: failed to fetch from registry: express-generator/4.9.0
npm ERR! at /usr/share/npm/lib/utils/npm-registry-client/get.js:139:12
npm ERR! at cb (/usr/share/npm/lib/utils/npm-registry-client/request.js:31:9)
npm ERR! at Request._callback (/usr/share/npm/lib/utils/npm-registry-client/request.js:136:18)
npm ERR! at Request.callback (/usr/lib/nodejs/request/main.js:119:22)
npm ERR! at Request. (/usr/lib/nodejs/request/main.js:212:58)
npm ERR! at Request.emit (events.js:88:20)
npm ERR! at ClientRequest. (/usr/lib/nodejs/request/main.js:209:10)
npm ERR! at ClientRequest.emit (events.js:67:17)
npm ERR! at CleartextStream. (http.js:1137:11)
npm ERR! at CleartextStream.emit (events.js:67:17)
npm ERR! You may report this log at:
npm ERR!
npm ERR! or use
npm ERR! reportbug –attach /tmp/intellij-express-generator2.tmp/node_modules/npm-debug.log npm
npm ERR!
npm ERR! System Linux 3.2.0-70-generic
npm ERR! command “/usr/bin/node” “/usr/bin/npm” “install” “express-generator@4.9.0”
npm ERR! cwd /tmp/intellij-express-generator2.tmp/node_modules
npm ERR! node -v v0.6.12
npm ERR! npm -v 1.1.4
npm ERR! message failed to fetch from registry: express-generator/4.9.0
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /tmp/intellij-express-generator2.tmp/node_modules/npm-debug.log
npm not ok
Sergey Simonchik says:
December 11, 2014You’re using node v0.6.12. Consider updating your Node.js installation to v0.10. It will fix the problem.
Neogene says:
December 11, 2014I’m facing same problem using node 0.10.33, the only solution was to run webstorm with sudo.
Bobby says:
December 12, 2014Solved by changing the default node pass to the correct one (v.10.17) on the project wizard dialog.
Thanks a lot!
Himanshu says:
March 13, 2016What did you do exactly. I am on (v.12) and facing the same issue on my mac.
my npm install -g needs authentication and webstorm can’t provide that. How can i fix this.
PS. i saw that we can start webstorm using sudo. I am looking for some configuration in webstorm itself.
Sergey Simonchik says:
March 14, 2016WebStorm is supposed to be run using basic permissions (without sudo). Please try to avoid starting WebStorm using sudo if possible.
Could you please describe a place in WebStorm UI where you need to install modules globally? The error message details would help too.
Meanwhile, please checkout related issues in WebStorm’s tracker:
* https://youtrack.jetbrains.com/issue/WEB-11972
* https://youtrack.jetbrains.com/issue/WEB-6632
As a possible workaround, you might consider switching to some node version manager, like NVM (https://github.com/creationix/nvm). It will install all global modules inside your home directory allowing you to avoid using sudo.
Sunil says:
December 17, 2014hi, just figuring out to import the project with yeoman and angular in it, using node.js also. but still not able to set up
Ekaterina Prigara says:
December 17, 2014What problems do you have? In general, you just need to create a new Node.js run/debug configuration for your main application file that starts server.
Bobby says:
December 18, 2014Hi again,
I have facing another problem that show me an error “Express version is unavailable” on the Node.js Express App wizard screen, even I have the latest version of express in my ./nvm/ folder.
Thanks,
Sergey Simonchik says:
December 18, 2014Hi Bobby,
What is the value of “Version of express-generator” drop down list?
Could you please file an issue in our issue tracker https://youtrack.jetbrains.com/issues/WEB ? Thanks.
Bobby says:
December 22, 2014Hi Simonchik,
It come with the version of 4.9.0, but got failed when I press OK the the dialog window.
Thanks.
Bao
Bobby says:
December 22, 2014Hi Simonchik,
My account was not permitted to submit an issue though I have a license with group user.
Thanks.
Bao
Ekaterina Prigara says:
January 30, 2015You can create a new account or login using OpenID or other systems.
You don’t have to have a product license to login to our issue tracker.
Leucir says:
January 7, 2015Same problem here. NodeJS is locally installed but WS is not able to find out the version – timeout.
Any thoughts?
Bobby says:
January 30, 2015This issue still happens on v9.3, any update from Intellije?
Ekaterina Prigara says:
January 30, 2015Please report an issue on our tracker and attach a log file (in the IDE click menu Help – Show log). Thanks!
John Matthew says:
October 22, 2016I created an nodejs application on Webstorm. Whenever I refresh my code, loaded items are shown on Terminal. How can I remove it?
GET /css/fonts/opensans/OpenSans-Semibold-webfont.woff 304 9.347 ms – –
GET /css/fonts/opensans/OpenSans-Light-webfont.woff 304 9.561 ms – –
GET /css/fontello/font/fontello.woff?13439518 304 10.144 ms – –
GET /images/portfolio/retrocam.jpg 304 10.691 ms – –
GET /images/portfolio/modals/m-console.jpg 304 1.614 ms – –
GET /images/portfolio/modals/m-judah.jpg 304 2.274 ms – –
GET /images/portfolio/modals/m-intothelight.jpg 304 2.626 ms – –
Dennis Ushakov says:
October 22, 2016That largely depends on what you’re using to serve files. What server are you using?
Erik says:
October 22, 2017Please provide a link of a tutorial compatible with the latest WebStorm. These screenshots and instructions are out of date.
Ekaterina Prigara says:
October 23, 2017You can refer to the WebStorm online help: https://www.jetbrains.com/help/webstorm/node-js.html
Stacy says:
March 15, 2020This must be the old way of doing it. I see comments from 2014 and since March 2020 you just start the WebStorm application as any other file, no configuration needed. Just create a js file, a data file(if possible) and a html(if possible). Just run it through the terminal after installing using npm install express and other configurations using npm install nameofframework.
Assign it to a port within the code and your good to go. This needs to be updated.
Gagandeep singh says:
May 31, 2020I have facing another problem that show me an error “Express version is unavailable” on the Node.js Express App wizard screen, even I have the latest version of express in my ./nvm/ folder.
Ekaterina Ryabukha says:
June 1, 2020Hi,
Please take a look at this thread: https://stackoverflow.com/questions/31237338/webstorm-cannot-recognize-node-express-both-on-windows-and-ubuntu/31242670. If it’s of no help, please collect the IDE logs (Help | Collect Logs…) and share them with support, they’ll tell you what the problem is related to: https://intellij-support.jetbrains.com/hc/en-us/requests/new.