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.

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. Bookmark the permalink.

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

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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>