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:

express-generator

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

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Tutorials and tagged . Bookmark the permalink.

38 Responses to Getting Started with Node.js in WebStorm

  1. Rusty says:

    I’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?

  2. uur says:

    Hi;

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

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

  3. Zuriel says:

    I’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.

  4. Pingback: Running and debugging Node.js application | JetBrains WebStorm Blog

  5. RM Ubaldo says:

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

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

  6. Scott Conklin says:

    In 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?

  7. Scott Conklin says:

    after i posed the above question, i found this

    https://intellij-support.jetbrains.com/entries/23395793

  8. Scott Conklin says:

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

      The same with me, have you resolved this issue?

      • Yole says:

        I mean the issue for ‘ invalid number of arguments’

        • Ekaterina Prigara says:

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

  9. Juan says:

    I 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

  10. Santosh says:

    Hi 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

  11. Pingback: Guide to Node.js Development with WebStorm | JetBrains WebStorm Blog

  12. Alisha says:

    Quite useful! Thanks! :)

  13. Keith Lawrence says:

    Very useful first-time usage article, got me on my way with node in a familiar JetBrains environment. Thanks!

  14. Al Spohn says:

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

    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

  15. Alex Maghen says:

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

      Seems like a problem of Express project generator. On the new project dialog what is the generator version selected?

  16. dewald says:

    Who ever said I wanted to use ExpressJS?

  17. Tran Duc Thang says:

    I got it for all, very detail and full support, as well as very simple, thank you so much :)

  18. bobby says:

    Hi,

    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

  19. Sunil says:

    hi, 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:

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

  20. Bobby says:

    Hi 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,

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">