Run dev server in IPv4 AND IPv6 simultaneously?

[MarcusCaspeco]

Description

We use a custom domain for developing locally, let's say it's local.example.com, so that we can share cookies with api.example.com in a first-party context (as third party cookies are being phased out).

In the DNS, local.example.com resolves to 127.0.0.1 or ::1 depending on if the operating system defaulted to use IPv4 or IPv6. The problem is that some of our developers have operating systems (Windows 10) that always uses IPv6 for localhost, and IPv4 for everything else. So when they start the dev server with the following config:

export default defineConfig({
	plugins: [tsconfigPaths(), react()],
	server: {
		port: 3000,
	},
});

It starts on localhost:3000 (which is [::1]:300, there is nothing on 127.0.0.1:3000). But when they go to local.example.com:3000, it resolves to 127.0.0.1:3000, which again, has nothing on it.

Now, I understand that I could force vite to start on 127.0.0.1 with the server.host option, but what I really want is for the server to run on both 127.0.0.1 AND ::1 so that it would pick "the right one" out of the box for everyone. I don't want to start tweaking the DNS resolution for everyone, and I don't want to force either IPv4 or IPv6 (e.g. via dns.setDefaultResultOrder("ipv4first") or the aforementioned server.host). I just want to support both.

Suggested solution

The most convenient thing for me would be either if
a) If the server.host is localhost, vite starts on IPv4 and IPv6
b) Let me pass an array of strings to server.host (so I could pass both 127.0.0.1 and ::1)

Alternative

Maybe my suggested solution cannot be done because of a limitation of node (or more likely, a lack of my knowledge of how these things work), and if so, are there any good workarounds for my use case?

I saw #16522 which seemed like a similar issue, and there the suggested workaround was essentially to force it to run on IPv4. But in my case, that wouldn't work either, because someone could (for some reason) have their localhost resolve with IPv4 and local.example.com with IPv6 and have the same problem again.

Workaround

This workaround should work until this is implemented in vite.

+ const { family } = await dns.promises.lookup("local.example.com");

export default defineConfig({
	plugins: [tsconfigPaths(), react()],
	server: {
		port: 3000,
+		host: family === 6 ? "::1" : "127.0.0.1",
	},
});

Additional context

Node version: 22.2.0
Vite version: 5.4.9

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.

[bluwy]

a) If the server.host is localhost, vite starts on IPv4 and IPv6

One of the reasons we switched to localhost is to start on whichever the dns resolves to, so I'm not sure we should break this behaviour and listen on extended hosts without users opt-ing in to it via config or via the dns config.

b) Let me pass an array of strings to server.host (so I could pass both 127.0.0.1 and ::1)

I think this was requested at #16350

[MarcusCaspeco]

Gotcha! I added a workaround that works for my particular use case:

const { family } = await dns.promises.lookup("local.example.com");

export default defineConfig({
	plugins: [tsconfigPaths(), react()],
	server: {
		port: 3000,
		host: family === 6 ? "::1" : "127.0.0.1",
	},
});

I'll add a comment on the issue you linked and close this one, it's essentially a duplicate.