How to get the runtime host:port in vite-plugin hooks?

[MinatoHikari]

When I want to mod devServer.proxy configs in vite's config hook, it is confusing that I can't get host:port which will be used when devServer running.
http://localhost:3000 is obviously not alaways working, the port may be changed to 3001/3002/3003...etc.
So how to get the host:port of the devServer in config hook??

[gweesin]

Is anyone else paying attention to this issue?

[gweesin]

Is anyone else paying attention to this issue?

I' want to implement a fixtures directory when a request visit and then proxy to another directory.
Such as from '/api/users' to '/fixtures/api/users.json' with same port.

[rhlin]

you can use http-server middleware, such as

export function proxyToFile( fileProxyMap: { [visitPath: string]: string}) {
   return {
     name: 'vite-plugin-proxy-to-file',
     configureServer(server) {
        const proxyVisitPathList = Object.keys(fileProxyMap)
        sever.middlewares.use((req, _res, next) => {
             const visitPath = proxyVisitPathList.find(visitPath => req.url.includes(visitPath)) // you can modify the condition, here using `includes`, can also be `startsWith`, `equals` or RegExp etc.
              if (visitPath) { 
                  req.url = req.url.replace(visitPath， fileProxyMap[visitPath])  // add your own logic
              }
              next()
          });
       }
     }
  }

and apply it to your vite config

export default defineConfig({
   //...,
   plugins: [
      //....,
     proxyToFile({
         '/api/users': '/fixtures/api/users.json' 
     })
   ],
   //....
})

then the proxy works without knowing the real runtime port

At present, there is no way to know the runtime port in advance

[rob-myers]

You could e.g.

"dev": "export DEV_PORT=5173; vite --port $DEV_PORT",

then access process.env.DEV_PORT inside the plugin.

[chrisjcthomas]

I don't think you can know the final runtime port inside the config hook, because the docs explicitly note that server.port may not be the actual port Vite ends up listening on when the preferred port is occupied.

So in config, you only know the configured/intended port, not the final chosen one.

That means the answer is basically:

• if you need a deterministic port in config-time logic, set server.port and server.strictPort: true
• if you need the actual running dev server instance, use a plugin with configureServer(...) instead of trying to solve it in config

The docs point to configureServer for cases where you need access to the underlying dev server, and that is the right phase if your logic depends on the real server rather than static config.

So my read is:

• not possible reliably in config when Vite is allowed to auto-bump the port
• use strictPort if you need a guaranteed known port
• otherwise move the logic to configureServer