remix.config.js devServerPort setting not being observed and there is no configuration to alter public URL for proxied socket connections.

[laurencefass]

Have you experienced this bug with the latest version of the template?

yes

Steps to Reproduce

This is not a duplicate of remix-run/remix#2620 as it contains some nuances relating to devServerPorts vs socket ports.

ive installed and run indie project and edited remix.config.js to set devServerPort according to instructions here

/**

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

The default port is 8002 and when I run in the brower i see:

(index):26 WebSocket connection to 'wss://remix1.syntapse.co.uk:8002/socket' failed: 

which appears to imply that devServerPort is being ignored.

There is another issue here

Expected Behavior

1. devServerPort: 3301 should result in the browser attempt to connect to websocket at port 3301 and not the default 8002.
2. there is no way to separate the devServerPort from the devServer socket port though I believe they are not always the same thing.
3. Port specs on reverse proxied connections dont make sense and there is no way to override

'wss://remix1.syntapse.co.uk:8002/socket'

with a client URL similar to:
'wss://remix1.syntapse.co.uk/my-overriden-url-spec-or-nothing-at-all/socket

In previous versions of CRA and Next I have been using formats like this to access socket ports for dev purposes and in most recent versions of each there is no need because the main URL and sockets work off the same port. This I believe would be an optimium solution also for remix to enable a more seamless post-installation developer experience.

Actual Behavior

1. devServerPort: 3301 is being ignored and the default port is being used.
2. the default socket url format is inappropriate for proxied connections and it would advantageous to have some way to remove the port spec from the URL to allow nginx or other proxied router to route based on custom paths. create-react app offers a variety of environment variables to achieve this.

[laurencefass]

part of the problem is fixed by use of REMIX_DEV_SERVER_WS_PORT in .env.

Raising separate issue for the other part...