Check 0.0.0.0 as well as localhost/127.0.0.1 when checking for used port

[thomasballinger]

Description

When a developer already has a dev server running (say with Next.js) that uses 0.0.0.0:3000, Vite doesn't notice and starts a dev server at localhost:3000.

It's a special case, but a common one. It'd be great it Vite could notice this.

Possible dup of #5241, but it wasn't clear to me in that issue that the solution below was explicitly discarded.

Suggested solution

Could Vite could check 0.0.0.0 as well? edit: happy to make a PR, wanted to hear whether this is felt to be a good idea first

Alternative

In #5241 the solution is proposed #5241 (comment)

This problem is solved，set server.host = 0.0.0.0，example config:

server: {
  host: '0.0.0.0',
},

which does sound like the real fix! But for this common case it might be worth checking 0.0.0.0.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sapphi-red]

When

• a server is running at 0.0.0.0:3000
• Vite is running on default host with 3000 port

, the current behavior is:

	1	2	3	4
your name resolver resolves localhost to ...	127.0.0.1	127.0.0.1	[::1]	[::1]
You are using Node.js ...	17<	17 >=	17 <	17 >=
Vite will listen to ...	127.0.0.1	127.0.0.1	127.0.0.1	[::1]
Vite will show the address as ...	localhost	localhost	127.0.0.1	localhost

As long as you are accessing with the address shown on start up, it will work.
When is this not working?

[thomasballinger]

What isn't working is that vite doens't notice that it shouldn't use port 3000.

For example, running

npx create-next-app my-next-app
cd next-app
npm run dev

in one terminal, and then

npm create vite@latest my-vite-app -- --template react
cd my-vite-app
npx vite --port 3000

results in Vite starting a dev server at http://127.0.0.1:3000/ instead of choosing another port. When I access localhost:3000, I get responses from the other dev server instead of Vite..

If the first server had been Vite server as well, the second Vite server would have noticed and chosen another port

Port 3000 is in use, trying another one...

[sapphi-red]

I might got what you mean. You don't want Vite to hijack the 3000 port. Am I correct?

[thomasballinger]

Right, I'd like Vite to choose another port.

[sapphi-red]

It makes sense to me 👍

[github-actions]

Hello @thomasballinger. We like your proposal/feedback and would appreciate a contribution via a Pull Request by you or another community member. We thank you in advance for your contribution and are looking forward to reviewing it!

[Scttpr]

@thomasballinger I was looking at your issue but I did not reproduce, Vite started a server on a different port without any issue even with a 0.0.0.0 host. Do you still reproduce ?

[thomasballinger]

@Scttpr How did you start the first server? edit: note that new versions of Vite seem to choose a random port by default, so you have to specify port 3000.

[Scttpr]

What isn't working is that vite doens't notice that it shouldn't use port 3000.

For example, running

npx create-next-app my-next-app
cd next-app
npm run dev

in one terminal, and then

npm create vite@latest my-vite-app -- --template react
cd my-vite-app
npx vite --port 3000

results in Vite starting a dev server at http://127.0.0.1:3000/ instead of choosing another port. When I access localhost:3000, I get responses from the other dev server instead of Vite..

If the first server had been Vite server as well, the second Vite server would have noticed and chosen another port

Port 3000 is in use, trying another one...

I did exactly this

[thomasballinger]

What operating system (I tried on mac), maybe we're seeing differences there? Anyone else see this?

[Scttpr]

I'm on Archlinux with NodeJS 16.18.0, I tried as well with a basic :

python -m http.server 3000

One side and :

npx vite --port 3000

On the other hand and it automatically started on 3001, am I in the right scenario ?

[Scttpr]

Ok I reproduce with NodeJS 19.0.0, according to Vite inner code I would say this issue is related to how Node is able to detect used ports from its http core lib

[sapphi-red]

I guess it didn't happen with python because python's http.server doesn't use SO_REUSEADDR by default.

I think it reproduced with Node.js 19 because Node.js 17+ resolves localhost to ::1 in some cases and python uses IPv4.

[vlmlee]

Ok I reproduce with NodeJS 19.0.0, according to Vite inner code I would say this issue is related to how Node is able to detect used ports from its http core lib

This is what I suspected as well although looking through the docs, node:http doesn't seem to distinguish the hostname alias localhost from one another, i.e. check if they're being set to 0.0.0.0 to detect collisions.

[Profesor08]

Can this to be merged in v3 too?

[Profesor08]

As a workaround, you can use this package https://www.npmjs.com/package/portfinder-sync
It works perfect on all my projects. I don't know why vite is doing this in other way

import portfinder from "portfinder-sync";

const config = defineConfig({
  server: {
    host: "127.0.0.1",
    port: portfinder.getPort(3000),
  }
});

export default config;

For better typescript support you can add a declaration file.

declare module "portfinder-sync" {
  export function getPort(port: number): number;
}