OS – Window 7 , Browser – Chrome 47.0.2526.80m , Livereload – 2.0.8
You have set up gulp with react and when you make changes in HTML it is not getting refreshed once you hit save button. Hmm then debugging this is a challenge because console will not show any error and you will keep on looking in your code to find some issue.
After, making sure that nothing is wrong in code and googling you might end up to read unanswered threads and information here and there. I spend almost 2 days to debug and fix the issue.
Here are some steps which helps me to debug this issue
- http://localhost:9005/?LR-verbose – Add LR-verbose to your url
- In console you will see – “LiveReload cannot connect to localhost:35729 (handshake timeout), will retry in 1000 sec.”
After maximum attempt to connect to LiveReload following error will be displayed in console(F12 in Chrome)
WebSocket connection to ‘ws://localhost:35729/livereload’ failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
Now, we know the actual problem is setting up the WebSocket for livereload. let’s debug the network , Please note I am working on Window 7. I defined the network rule to allow traffic to port 35729.
If this solve your problem, good ! but, it didn’t helped me so I started looking for other solution which was turning of firewall. that’s Risky! but you have to take some risk ;)
If this solve your problem, you are lucky and I mean it ! Because, this didn’t even solved anything for me so my journey continued to read more about debugging livereload.js and reading on error ERR_CONNECTION_REFUSED ! Here is a sweet summary.
- Clear browser cache , cookies in chrome
- Run window defender
- Un-installed “Adware” anti virus ( anti virus are culprits sometimes, mine was free version so I did)
- Make sure port 80, 8080, 35729 is not blocked ( in windows netstate -na)
- Restart the computer
- run the cmd under administrator
- hit the command >gulp
And finally I too got lucky :).
It was a real journey with great lesson and I will share a good info to you which is usually not highlighted in online course or tutorials.
When you are using gulp-connect you make sure you switch off the web browser extension of LiveReload in chrome and firefox.
From livereload.js redme – “note: if you use this middleware, you should make sure to switch off the Browser LiveReload Extension if you have it installed.”
Hope these notes might help someone. This post doesn’t ensure that it will solve but I think It will give you some direction to solve the problem.