WSL2 Binding issues - with LiveReload

[Brian-McBride]

What version of Remix are you using?

1.13.0

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

Using the basic installer (express), the server and the WebSocket service for LiveReload aren't accessible.
WebSocket

Expected Behavior

The ports would be accessible outside of the WSL2 environment.
The way to handle this according to Microsoft is to bind the services to 0.0.0.0 instead of localhost

For instance:

remix/packages/remix-dev/devServer/liveReload.ts

Line 26 in f5236c1

let wss = new WebSocket.Server({ port: config.devServerPort });

We can modify this line to be;

let wss = new WebSocket.Server({ port: config.devServerPort, host: '0.0.0.0' });

It would probably be even better to have something like;

let wss = new WebSocket.Server({ port: config.devServerPort, host: config.devServerHost' });

Then make the host an argument like --port

Actual Behavior

The code just binds on localhost by default. I just went into my node modules and slightly modified the code for my own personal fix. it is WSL2 issues though. The network bridge is not as clean as one might expect.

[pcattori]

With v2_dev, #6724 added the REMIX_DEV_ORIGIN env var that lets you configure this:

REMIX_DEV_ORIGIN="0.0.0.0/3003" remix dev --port 3003

That said, I'd be great to get this working without the need for you to configure the origin and match up the configured ports. Can you share a link to Microsoft's recommendation?

Also would 127.0.0.0 work instead of localhost? 0.0.0.0 is overly permissive for other use-cases.