Getting Started with Node.js in WebStorm

Ekaterina Prigara

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

Comments below can no longer be edited.

53 Responses to Getting Started with Node.js in WebStorm

  1. Rusty says:

    January 19, 2014

    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?

    • Ekaterina Prigara says:

      January 19, 2014

      Yes, exactly.
      Do you have package.json in your project?

  2. uur says:

    January 21, 2014

    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.

    • Ekaterina Prigara says:

      January 21, 2014

      Thanks for your feedback.
      We’ll see what we can do.

  3. Zuriel says:

    January 26, 2014

    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. 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. […]

  5. RM Ubaldo says:

    March 19, 2014

    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:

      March 19, 2014

      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:

    March 26, 2014

    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?

    • Konstantin Ulitin says:

      March 26, 2014

      Please see WEB-11434.

  7. Scott Conklin says:

    March 26, 2014

    after i posed the above question, i found this

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

  8. Scott Conklin says:

    March 26, 2014

    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:

      April 3, 2014

      The same with me, have you resolved this issue?

      • Yole says:

        April 3, 2014

        I mean the issue for ‘ invalid number of arguments’

        • Ekaterina Prigara says:

          April 3, 2014

          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:

    May 2, 2014

    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

    • Ekaterina Prigara says:

      May 3, 2014

      With 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).

  10. Santosh says:

    May 15, 2014

    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

    • Ekaterina Prigara says:

      May 15, 2014

      Great that you found it useful 🙂

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

    May 16, 2014

    […] Tutorial: Getting started with Node.js in WebStorm […]

  12. savior says:

    June 5, 2014

    Get Parameters in a JavaScript Script Tag
    http://code.tonytuan.org/2014/06/js-get-parameters-in-javascript-script.html

  13. Alisha says:

    August 10, 2014

    Quite useful! Thanks! 🙂

  14. Keith Lawrence says:

    August 30, 2014

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

  15. Al Spohn says:

    October 26, 2014

    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

  16. Alex Maghen says:

    November 3, 2014

    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:

      November 3, 2014

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

  17. dewald says:

    November 15, 2014

    Who ever said I wanted to use ExpressJS?

    • Ekaterina Prigara says:

      November 18, 2014

      The setup for a non-Express project is basically the same.

  18. Tran Duc Thang says:

    November 29, 2014

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

  19. bobby says:

    December 11, 2014

    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

    • Sergey Simonchik says:

      December 11, 2014

      You’re using node v0.6.12. Consider updating your Node.js installation to v0.10. It will fix the problem.

      • Neogene says:

        December 11, 2014

        I’m facing same problem using node 0.10.33, the only solution was to run webstorm with sudo.

      • Bobby says:

        December 12, 2014

        Solved 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, 2016

          What 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, 2016

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

  20. Sunil says:

    December 17, 2014

    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:

      December 17, 2014

      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.

  21. Bobby says:

    December 18, 2014

    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,

    • Sergey Simonchik says:

      December 18, 2014

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

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

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

          You 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, 2015

      Same problem here. NodeJS is locally installed but WS is not able to find out the version – timeout.
      Any thoughts?

      • Bobby says:

        January 30, 2015

        This issue still happens on v9.3, any update from Intellije?

        • Ekaterina Prigara says:

          January 30, 2015

          Please report an issue on our tracker and attach a log file (in the IDE click menu Help – Show log). Thanks!

  22. John Matthew says:

    October 22, 2016

    I 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, 2016

      That largely depends on what you’re using to serve files. What server are you using?

  23. Erik says:

    October 22, 2017

    Please provide a link of a tutorial compatible with the latest WebStorm. These screenshots and instructions are out of date.

  24. Stacy says:

    March 15, 2020

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

  25. Gagandeep singh says:

    May 31, 2020

    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.