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.

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

    Thanks,

    • 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
    c:\Users\ich\WebstormProjects\meantest\server\server.js
    c:\Users\ich\WebstormProjects\meantest\public\app.js
    c:\Users\ich\WebstormProjects\meantest\public\index.html

    With bower I added AngularJS to:
    c:\Users\ich\WebstormProjects\meantest\public\bower_components\angular

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

    and to my (User-) Path;
    C:\Users\ich\AppData\Roaming\npm

    Now to the sourcecode:
    Because of the new Express-Version I have changed in server.js
    from:
    app.use(bodyParser());

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

    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

    Result:
    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.

    Reason:
    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 = req.body.name’ in server.js
    and
    a second breakpoint to the line ‘$http.post(url + “/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 127.0.0.1 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 = req.body.name;” was dark blue.
    After clicking on “Step next” I could see in the Variables-Window under Local->name my new Productname.

    IMPORTANT FACT:
    In the video the debugger jumps to the breakpoint at $http.post(…..in 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 $http.post – line!

        in

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

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

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

        http://stackoverflow.com/questions/16299362/angular-js-http-post-not-working-no-error

        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){
          $http.post(url + “/add”, {name:newProduct}).sucess(function(){
          loadProducts();
          })
          }

          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:

    Hi

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

    “Uncaught Error: No module: jetbrains ”

    Plz give the solution

    thanks
    Priya

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