Guide to Node.js Development with WebStorm

In this short blog post we would like to put together all the tutorials we have so far on Node.js development workflow with WebStorm and other JetBrains’ IDEs.
Hope that it would help you to get started with Node.js in WebStorm and master your workflow.

Getting started with Node.js

The following videos are available in this playlist.

Running and Debugging Node.js apps

Getting started with Express

Debugging Express apps

Working with Jade templates in Express app

List of available tutorials on Node.js support in WebStorm:

Here is also a link to the recording of the webinar on Node.js that we had some time ago, in addition to running and debugging Node.js it briefly covers Node.js testing with Mocha.

Please note that Node.js support is available as a free plugin for IntelliJ IDEA, PhpStorm, RubyMine and PyCharm.

Let us know if you have any other questions about Node.js support in WebStorm, we’ll try to answer them in the comments or future posts.

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

24 Responses to Guide to Node.js Development with WebStorm

  1. Pingback: MEAN Stack Walkthrough and Tips | JetBrains WebStorm Blog

  2. Alex James says:

    Great post here,

    I would like to know the possible errors that one might see when debugging the app, I recently encountered an issue while doing the same and i would like to resolve it. I believe that the other visitors of this post will also be benefited if you include the answer to this query.

    Thanks in advance,

  3. Alex James says:

    Hey Ekaterina,

    I apologize for my late response, I’m happy to inform you that i resolved the issues that i had with the development process, However, as i said earlier, it will be good if you could just highlight some of the common issues with this development process, it can help the readers.


    • Ekaterina Prigara says:

      I would be happy to address common issues, but right now I believe that these videos cover the most common cases and answer the most common questions)
      That is why I ask you about your issue – it would help me understand what is missing in the tutorials.

  4. Alex James says:

    Hey Ekaterina,

    Its fine then, if anything comes up ill contact you and let you know if something is missing from this tutorials.

    Thank you for your valuable time.

  5. Anton says:

    Dear Ekatarina,
    after trying out your walktrough-video I was confused.
    The debugger ignores the app.js-breakpoint. Maybe I have a configuration-problem.

    Now my observations -step-by-step:

    My OS is Windows 7, yours in the video is MacOS. Could this make the diffence?

    I have deinstalled all further Versions (Webstorm 8.0 – Tryout), Chrome and Chrome Canary.

    After a Reboot I installed:
    - Webstorm 8.04
    - Chrome 35.0.1916.153 m with JetBrains IDE Support 2.0
    - node.exe V0.10.28 in c:\Program Files\nodejs
    - mongo (shell version) 2.6.1 in c:\mongodb\bin

    Then I created a new Project named “meantest” (Type:Nodejs Express app) in c:\Users\ich\WebstormProjects
    the 3 well-known files are

    With bower I added AngularJS to:

    And I added:
    to my (System-) Path;
    C:\Program Files\nodejs\;C:\mongodb\bin\

    and to my (User-) Path;

    Now to the sourcecode:
    Because of the new Express-Version I have changed in server.js

    app.use(bodyParser.urlencoded({extended: true}));

    The other code is 100% your example-code

    Now to the behaviour:

    with Webstorm:

    RUN – Mode:
    1. Click on ‘Run “Server.js”‘
    2. Click on ‘Open in Browser: -> Chrome

    Chrome Browser opens with: http://localhost:63342/meantest/public/index.html
    All “Product”-Items from mongodb are listed
    After typing a new Product in the textbox and clicking the add-button nothing has changed.
    After refreshing the browser with the reload button the new entry ist listed.

    There was no app.SaveProduct-Event -> loadProduct() can not be triggered.

    Question: The Port in app.js and server.js is set to 3000
    Webstorm opens the Browser with Port 63342. Is this OK?

    DEBUG – Mode:
    As shown in the video I set a breakpoint to the line: ‘var name =’ in server.js
    a second breakpoint to the line ‘$ + “/add”, {name:newProduct}).sucess(function(){‘ in app.js

    1. Click on ‘Debug “Server.js”‘
    Info: In the Webstorm-Debugger-Variables Window a line is shown: Connected to “(DNS-Name):Portnummer and not localhost
    I have some entries different from localhost in my host-file. Is this important??

    2. Click on ‘Debug “Index.html”‘
    Chrome Browser opened again with: http://localhost:63342/meantest/public/index.html
    and a yellow line:
    “JetBrains IDE Support” führt eine Problembehebung für diesen Tab durch” -> “JetBrains IDE Support” is debugging this tab
    I closed this on “x”.
    All Products had been listed again.
    Then I entered a new Product and clicked the add-button.
    Now the UI-Window switches to Webstorm. The debugger has stopped on the stop-mark in server.js.
    The line “var name =;” was dark blue.
    After clicking on “Step next” I could see in the Variables-Window under Local->name my new Productname.

    In the video the debugger jumps to the breakpoint at $… app.js and on my PC to the breakpoint in server.js
    I think this is why there is no loadProducts(), but what is going wrong on my System???

    Another Fact:
    I started my App without Webstorm. I have started the server in a command-window: c:\Users\ich\WebstormProjects\meantest\server>node server.js

    Then I opened the chrome-browser and typed: http://localhost:3000/
    Result: All Product-Entries in JSON-Format.
    Then I tried: http://localhost:3000/index.html -> Cannot GET /index.html and http://localhost:3000/public/index.html -> Cannot GET /public/index.html
    Then I modified the code in server.js. I added the line: app.use(express.static(__dirname + ‘../../public’));
    Back in the browser it looked a little bit better;-) I saw the content of the index.html, but without the product list. And like in the other cases I can add a new Product to mongodb.

    What is going wrong?
    Do I have a Webstorm-Config-Problem? Must I buy a mac?

    Thanks for any idea!!

    • Ekaterina Prigara says:

      Hello Anton,
      Question: The Port in app.js and server.js is set to 3000
      Webstorm opens the Browser with Port 63342. Is this OK?”

      Yes, that’s right. localhost:3000 is where your server-side code is running, your client-side is running on a WebStorm built-in webserver – in your case it’s localhost:63342/.
      URL localhost:3000 is used by your client-side code to “communicate” with the backend (you defined a variable url in app.js with this url).

      “JetBrains IDE Support” führt eine Problembehebung für diesen Tab durch” -> “JetBrains IDE Support” is debugging this tab
      I closed this on “x”.

      When you hit Close, you disconnected WebStorm debugger from the browser and JavaScript debugging session ended. That’s why the breakpoint wasn’t hit. Don’t hit close in the browser tab, if you want to debug your code!

      • Anton says:

        Hello Ekatarina,
        thank you for the quick answer!

        I could swear, that I tried to debug with the unclosed “yellow bar” ;-)

        … but OK, you are right. Now, the debugger stops at the $ – line!


        app.saveProduct = function (newProduct){
        $ + “/add”, {name:newProduct}).sucess(function(){

        Hurray…. , but I can’t find the reason why success() is not executed?

        I think, that I’m not allone with this. Look here:

        Why is your video-example working without this problem???

        The info that webstorm is using a build-in webserver was very helpful, but what’s about the difference between taking this webserver and executing the little app in a realworld nodejs scenario.

        Do I need a kind of “runtime-enviroment-detector-switch” with using app.use(express.static(__dirname + ‘../../public’)) outside of webstorm?

        Or is this a webstorm-setting problem?

        • Ekaterina Prigara says:

          The code in the video is working correctly, but unfortunately right now I could not share it with you.

          app.saveProduct = function (newProduct){
          $ + “/add”, {name:newProduct}).sucess(function(){

          You have a typo in .success.

          WebStorm’s web server is used for serving your static client-side files. When you Run server.js from WebStorm command “node server.js” is executed and Express server is started.
          In the original version of the code presented in the video Express backend is not used to render your pages or for routing “/”. You need to modify your server.js code to serve your client-side.
          If you need the original app to be executed outside of WebStorm, you need to use other web server to serve your client-side (like Apache HTTP server).

      • Anton says:

        Hi Ekatarina,
        succccess – you made my day!!!

        First thougth: I need a date with my optician.

        Second thought: Why is there no red and blinking syntaxerror?

        Seriously – I have installed angularjs-DefinitelyTyped. Is this only for code-completion? Do I have to install an additional parser or syntax-checker for angularjs ?

        I wish you a pleasant weekend!

        • Ekaterina Prigara says:

          Unresolved functions by default are highlighted with a grey line since it’s weak warning. You could go to Settings | Inspections and select a different level of warnings for Unresolved JavaScript function inspection.

          Angularjs-DefinitelyTyped is enough for code completion and resolving functions.

          Have a good weekend.

  6. priyanka says:


    I tied to develop the same code in my system but i am getting error

    “Uncaught Error: No module: jetbrains ”

    Plz give the solution


  7. zakir says:


    I have been using intellij idea from the past one year, It works fine for me.
    I had used it for node.js and its awesome. But after using it for 4 moths Currently I am facing an issue related to break points.
    I am running my project in debug mode and Mute break points is not enabled, Even though my break points are getting hit. I had placed the break points in the correct code flow. please help me, I am facing the issue for the last two days

  8. Dave says:

    Why did you not check the box “with javascript debugger” in the live edit settings in debug config for express debugging? And if you leave the “after launch” on, is that going to be a problem if debugging express apps when refreshing the browser? I mean is there any side-effects if I just leave that on? I know you unchecked that because you said you wanna refresh the browser, not relaunch it every time which is what I wanna do.

    • Ekaterina Prigara says:

      That’s simple: if you want to debug your client-side JavaScript as well, you check that checkbox, if you just want to debug you Node.js code, then you don’t.
      If you check that, put some breakpoints in your client-side code, the debugger will stop on it. If you then refresh the page in the browser, the debug session for the client-side will stop.

  9. Bruno Oliveira says:

    Hello Ekaterina,

    I would love to be able to start following your tutorials listed here, but, unfortunately, I’m facing a bigger problem.

    I can’t even start opening a new blank app in node.JS in WebStorm because it says that I need to run it as root, however, I can’t figure out how to do that, and the command line launcher is not working for some reason… Maybe its wrong (its defaulting to /usr/local/bin which seems okay to me? :/ ) and i cant fix it.

    My main issue is that I’m just coding in HTML/JS/CSS now, preparing some tables and now I want to send an email to a list of users that will fill in those tables and will save them in a database, all from the link Ill send them.

    Which means that using nodeJS might be the smartest move here…

    Any tips on how to set it up with webstorm?


    • Ekaterina Prigara says:

      Please make sure that you have Node.js installed correctly and you can actually run node from the command line.

      • Bruno Oliveira says:

        Hey again,

        Thanks for the fast reply! I have everything setup and running from the terminal:

        Maybe the problem is in Webstorm?

        • Bruno Oliveira says:

          That was another project I did as an experiment to try and learn node.JS but it was developed outside WebStorm, only by github/text editors…

          • Ekaterina Prigara says:

            Can you run this project if you open it in WebStorm using the Run configuration?
            Check that the path to node interpreter in this Run configuration is specified correctly.

  10. Bruno Oliveira says:

    I’ll try it as soon as possible and will get back to you…

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="">