Log which websocket port is being used by remix dev server

[cliffordfajardo]

Reproduction

Start remix app1 in terminal tab 1
Start remix app2 in terminal tab 2

Create remix app with CLI two times:

npx create-remix --template remix-run/remix/templates/unstable-vite-express

If the websocket port that is used during development is used, the server logs should log the PORT & PID associated with the occupied server port.

If remix ends up choosing another web socket port to use, also log that to the console

System Info

System:
    OS: macOS 14.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 1.59 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.5.0 - ~/.volta/tools/image/node/20.5.0/bin/node
    Yarn: 1.22.10 - ~/.volta/tools/image/yarn/1.22.10/bin/yarn
    npm: 9.8.0 - ~/.volta/tools/image/node/20.5.0/bin/npm
    bun: 1.0.3 - ~/.bun/bin/bun
  Browsers:
    Chrome: 121.0.6167.139
    Chrome Canary: 117.0.5849.2
    Safari: 17.3.1
  npmPackages:
    @remix-run/dev: 2.6.0 => 2.6.0 
    @remix-run/express: 2.6.0 => 2.6.0 
    @remix-run/node: 2.6.0 => 2.6.0 
    @remix-run/react: 2.6.0 => 2.6.0 
    @remix-run/v1-route-convention: ^0.1.4 => 0.1.4 
    vite: ^5.0.0 => 5.1.1

Used Package Manager

npm

Expected Behavior

If the websocket port that is used during development is used, the server logs should log the PORT used at a minimum & ideally also the PID associated with the occupied TCP server port.

🟡 Instead of this:

> dev
> node ./server.js

WebSocket server error: Port is already in use
Express server listening at http://localhost:3000

🫡 something like this

> dev
> node ./server.js

WebSocket server error: 
tried to initiate web socket on localhost://{PORT_VALUE} for your local development server, but it is already in use.
PID associated with localhost://{PORT_VALUE} is: PID_NUMBER

Another DX improvement:
If the web socket port is used, and the dev server defaults to choosing another open TCP port, we should also log that to the terminal during server start up time

Related commands (mac/linux):

# find process ID associated with TCP port 3000
lsof -t -i:3000 

# find and kill process ID associated with TCP port 3000
lsof -t -i:3000 && kill -9 $( lsof -i:3000 -t )

Actual Behavior

Remix dev server tells user that web socket port is occupied but does not specify which one.
I had to dig into the remix codebase to find out (at this time of writing) that websocket port defaults to8002

[cliffordfajardo]

This is not a bug perhaps but more of a DX improvement;
Ever since I've used remix (almost 2 years) I've ran into this situation a few times where the dev server's web socket is occupied (either by another remix app , etc) and finding what was occupying the port and killing the process has been a bit of a PITA 😅

Logging the used port and PIDs associated with the server(s) woulkd help the DX a lot

[pcattori]

Looks like you are using Vite, but <LiveReload /> is no longer intended to be compatible with the Remix Vite plugin. You can actually see the warning at the top of the screenshot you shared. Check out the v2.6.0 changelog for more info.