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.

25 Responses to Guide to Node.js Development with WebStorm

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.

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.

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.

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

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?

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

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!

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

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.

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

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.

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.

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.