Hot Module Reloading with Browserify/Watchify

reactjs
javascript

#1

I have a project that uses React and browserify/watchify to do hot module reloading and other things. However, I constantly get this error when loading up my workspace: can't establish a connection to the server at wss://localhost:4474/

How can I get this working? Has anyone ever had this issue before?


Webpack hot reload not working
#2

It sounds like you might be using the wrong port and host address. Can you verify that you’re using process.env.IP as your host address and process.env.PORT as your port?

Also worth nothing that process.env.IP resolves to 0.0.0.0 and process.env.PORT resolves to 8080. So if you want a live reload situation then you might use 8080 to serve your app and 8081 or 8082 for live reload to work. Check out Multiple Ports on Cloud9 for more info.


#3

@bradydowling

Thanks for the reply. I have tried getting it to work using 8081 but that doesn’t seem to work either. Now I get this message:

LiveReactload :: “Connect reload client to wss://localhost:8081”

Is there some extra config to get secure websockets working?

Thanks


#4

Try using process.env.IP instead of localhost because localhost will most definitely not work.


#5

@bradydowling So I passed in the host parameter (set to process.env.IP) to the live react load plugin i am using and I still get the LiveReactload :: "Connect reload client to wss://localhost:8081" message in the browser console. Do I ahve any other options to try?

I also get this in the firefox console: Firefox can't establish a connection to the server at wss://localhost:8081/.


#6

Also, If i force the client to also try to connect to 0.0.0.0:8081, it just says that ff can’t establish a connection at wss://0.0.0.0:8081. Same message but different host. If I try to do regular ws, it says you can’t because its insecure.


#7

Thanks for clarifying. I’m a little stumped on this one to be honest. It seems like this is almost identical to getting Browsersync and Gulp working on Cloud9 which I’ve done several times recently.

The last two things that look off to me are the wss:// and the localhost. External ports are broadcast over http(s), which I think websockets generally run on if I’m not mistaken, but it could be that actually stating the wss:// protocol at the beginning of that URL is breaking it.

Also, maybe there’s somewhere in the config that it’s forcing to try localhost rather than your workspace URL. It should broadcast on 0.0.0.0 and then be accessed at your workspace URL (https://workspacename-username.c9users.io:8081). It almost seems like it’s trying to access it on localhost automatically which is breaking it all.


Note: In the Browsersync tutorial, there’s a part where the livereload is configured for your app URL, which may be the key for that working.


#8

I figured it out thanks to your help! I had to write a “custom client” to handle the connection from the browser to the server and replacing that and telling it to connect to wss://workspace-username.c9users.io:8081 worked.


#9

Booyah!