HMR random port reporting for VSCode autoForwardPorts

[moncapitaine]

Because the WS ports for HMR are random as discussed in (#404) in vinxi and I am working in dev-containers I need to autoForwardPorts when starting my TanStack-Start app.

This plugin does some console output VSCode reads and opens the port if VSCode setting remote.autoForwardPorts is set to true:

export default defineConfig({
  server: {
    preset: 'node-server',
  },
  vite: {
    plugins: [
      {
        name: 'report-hmr-ports',
        configureServer: ({ config }) => {
          const hmr = config.server.hmr
          if (typeof hmr === 'object' && 'port' in hmr) {
            console.log(
              `\x1b[34mHMR\x1b[0m is listening to \x1b[32mhttp://localhost:${hmr.port}\x1b[0m`,
            )
          }
        },
      },
    ],
  },
})

http://localhost:${hmr.port} is a lie but VSCode does the right thing.

Just in case it helps if you are using devcontainers and HMR in vinxi projects.

Regards,
Michael