Live reload doesn't work with a custom Express setup

What version of Remix are you using?

1.5.1

Steps to Reproduce

Create a new Remix app and configure a custom Express server as described in this example.

Run the development server and change some code. See the error in the browser console about not being able to connect to port 8002 and see no live reloading happen.

Terminate the development server and restart it, this time with an explicitly set environment variable, REMIX_DEV_SERVER_WS_PORT=8002. See no errors in the console and see live reloading happen upon code changes.

Expected Behavior

Live reloading defaults to port 8002 and works without explicitly setting the port, even for custom Express-based server setups.

Alternatively, I’d like this behaviour to be mentioned in the README of the repos that have a custom Express server because I had to figure this out by reading the source code.

Actual Behavior

Live reloading requires extra steps on every run for custom Express-based server setups.

[illright]

Thanks for your input! I’d rather stick to a hardcoded port in remix.config.js for now to keep complexity out of my repo and keep it cross-platform.

 /**
  * @type {import('@remix-run/dev').AppConfig}
  */
 module.exports = {
   cacheDirectory: "./node_modules/.cache/remix",
+  devServerPort: 8002,
   ignoredRouteFiles: ["**/.*", "**/*.css", "**/*.test.{js,jsx,ts,tsx}"],
   serverBuildDirectory: "./server/build",
 };

P.S. I wish the Remix config would accept promises, then one could simply call getPort from inside the config and avoid the hassle with scripts.

[tarngerine]

For others who stumble here: in my particular setup with docker, the port 8002 wasn’t in the docker compose file as an allowed port, adding that to docker-compose.yml fixed LiveReload.