Node.js Code Change Not Reflected in Localhost Browser Unless Webstorm is Restarted

I've spent a day on this already.  Because I can't continue to develop code if I have to keep restarting webstorm every time I make a node.js code change.

Here is a 1 minute screen cast of my problem: https://www.youtube.com/watch?v=xg_k8M0VwBI and here are my webstorm settings https://www.youtube.com/watch?v=hX3I1AWMLT8

A few initial facts:

  • I'm using Webstorm 10.0.3
  • I'm using nodemon which watches my code and stops and starts (creates a new node process) after I make changes to code
  • I've got my debugger | Live Edit set to Auto in Preferences.  I tried manual but it didn't make any difference in terms of my problem below
  • I've attached the code for you to try to reproduce


Here is what is happening:

1) I open webstorm (lets say it was already closed)
2) I run debug on my express.js app and it fires up fine meaning I can go to localhost:3000 and it loads fine
3) I make a breaking change to code such as what you see in the video above
4) I refresh the browser page, now I get a 404 error and that's actually expected because I broke the code with the breaking change I made
5) I now go back and undo that breaking change, back to where the code was working before
6) I refresh debug or click debug again or whatever
7) I refresh the browser, but still it's a 404, this makes no sense!
8) I ultimately have to restart Webstorm (including the invalidate cache) and start it up again for the localhost:3000 to load without the 404 error after making that change back to working code

I can't believe this happens.  I can't believe I'm the only one who has seen this problem.  But I also can't believe I can't resolve this!  is this a bug?  I'm using Webstorm 10.0.3.



Attachment(s):
ExpressApp.zip
6 comments
Comment actions Permalink

Please can you make your video public? Can't watch it, it's reported to be private

0
Comment actions Permalink

ok it's public now...

0
Comment actions Permalink

Looks really strange. Just one thing: in youir video, at 0.59, I can see '404 Error' in the browser with 'WebStorm 10.0.3' below it. This indicates that WebStorm is actually listening on this port, so your express app can't listen on it - as it's occupied. Not sure how it can happen (as your app seems to start on this port first...) Please can you check the built-in port number specified in Settings/Build, Execution,Deployment/Debugger?

0
Comment actions Permalink

hehe the built-in port is set to 3000.  If I don't hard code that here too, my app runs on a random port and so the browser never loads the web page, it doesn't work.

Screen Shot 2015-06-03 at 11.35.52 AM.png

Under deployment I have no configured web servers:

Screen Shot 2015-06-03 at 11.36.10 AM.png

0
Comment actions Permalink

Please try a different free port (8000, for example). Or change your Express app to listen to a different one

0
Comment actions Permalink

I think that was it.  It's one of those things where you forget you changed something a while back....thanks for helping to trigger my memory.

I'm confused then how the debugger is attaching / communicating with the express app if the debugger is on a diferrent port.

0

Please sign in to leave a comment.