Default preview host to localhost (#5753)

* Initial refactor

* Extract as vite plugin

* Cleanup vite plugin

* Reduce option passing

* Use localhost as preview default host

* Simplify base handling

* Fix host handling

* Add changeset

* Remove unused imports

* Remove unused sirv dep

* Try pin playwright to 1.28.1

* Update playwright

* Try this

* Speed up CI

* Try fix page off

* Refactor networkidle

* Ensure open connections are destroyed when the preview server is closed

* Revert debug code

Co-authored-by: Matthew Phillips <matthew@matthewphillips.info>

Author: bluwy

.changeset/lemon-bobcats-kick.md

@@ -0,0 +1,5 @@
+---
+'astro': major
+---
+
+Default preview host to `localhost` instead of `127.0.0.1`. This allows the static server and integration preview servers to serve under ipv6.

packages/astro/package.json

@@ -155,8 +155,8 @@
     "rehype": "^12.0.1",
     "resolve": "^1.22.0",
     "semver": "^7.3.7",
+    "server-destroy": "^1.0.1",
     "shiki": "^0.11.1",
-    "sirv": "^2.0.2",
     "slash": "^4.0.0",
     "string-width": "^5.1.2",
     "strip-ansi": "^7.0.1",
@@ -171,7 +171,7 @@
     "zod": "^3.17.3"
   },
   "devDependencies": {
-    "@playwright/test": "^1.22.2",
+    "@playwright/test": "^1.29.2",
     "@types/babel__generator": "^7.6.4",
     "@types/babel__traverse": "^7.17.1",
     "@types/chai": "^4.3.1",
@@ -191,6 +191,7 @@
     "@types/resolve": "^1.20.2",
     "@types/rimraf": "^3.0.2",
     "@types/send": "^0.17.1",
+    "@types/server-destroy": "^1.0.1",
     "@types/unist": "^2.0.6",
     "astro-scripts": "workspace:*",
     "chai": "^4.3.6",

packages/astro/src/core/dev/dev.ts

@@ -49,17 +49,14 @@ export default async function dev(
 	// Start listening to the port
 	const devServerAddressInfo = await startContainer(restart.container);
 
-	const site = settings.config.site
-		? new URL(settings.config.base, settings.config.site)
-		: undefined;
 	info(
 		options.logging,
 		null,
 		msg.serverStart({
 			startupTime: performance.now() - devStart,
 			resolvedUrls: restart.container.viteServer.resolvedUrls || { local: [], network: [] },
 			host: settings.config.server.host,
-			site,
+			base: settings.config.base,
 			isRestart: options.isRestart,
 		})
 	);

packages/astro/src/core/messages.ts

@@ -14,14 +14,11 @@ import {
 	underline,
 	yellow,
 } from 'kleur/colors';
-import type { AddressInfo } from 'net';
-import os from 'os';
 import { ResolvedServerUrls } from 'vite';
 import { ZodError } from 'zod';
 import { renderErrorMarkdown } from './errors/dev/utils.js';
 import { AstroError, CompilerError, ErrorWithMetadata } from './errors/index.js';
-import { removeTrailingForwardSlash } from './path.js';
-import { emoji, getLocalAddress, padMultilineString } from './util.js';
+import { emoji, padMultilineString } from './util.js';
 
 const PREFIX_PADDING = 6;
 
@@ -58,31 +55,26 @@ export function serverStart({
 	startupTime,
 	resolvedUrls,
 	host,
-	site,
+	base,
 	isRestart = false,
 }: {
 	startupTime: number;
 	resolvedUrls: ResolvedServerUrls;
 	host: string | boolean;
-	site: URL | undefined;
+	base: string;
 	isRestart?: boolean;
 }): string {
 	// PACKAGE_VERSION is injected at build-time
 	const version = process.env.PACKAGE_VERSION ?? '0.0.0';
-	const rootPath = site ? site.pathname : '/';
 	const localPrefix = `${dim('┃')} Local    `;
 	const networkPrefix = `${dim('┃')} Network  `;
 	const emptyPrefix = ' '.repeat(11);
 
 	const localUrlMessages = resolvedUrls.local.map((url, i) => {
-		return `${i === 0 ? localPrefix : emptyPrefix}${bold(
-			cyan(removeTrailingForwardSlash(url) + rootPath)
-		)}`;
+		return `${i === 0 ? localPrefix : emptyPrefix}${bold(cyan(new URL(url).origin + base))}`;
 	});
 	const networkUrlMessages = resolvedUrls.network.map((url, i) => {
-		return `${i === 0 ? networkPrefix : emptyPrefix}${bold(
-			cyan(removeTrailingForwardSlash(url) + rootPath)
-		)}`;
+		return `${i === 0 ? networkPrefix : emptyPrefix}${bold(cyan(new URL(url).origin + base))}`;
 	});
 
 	if (networkUrlMessages.length === 0) {
@@ -109,50 +101,6 @@ export function serverStart({
 		.join('\n');
 }
 
-export function resolveServerUrls({
-	address,
-	host,
-	https,
-}: {
-	address: AddressInfo;
-	host: string | boolean;
-	https: boolean;
-}): ResolvedServerUrls {
-	const { address: networkAddress, port } = address;
-	const localAddress = getLocalAddress(networkAddress, host);
-	const networkLogging = getNetworkLogging(host);
-	const toDisplayUrl = (hostname: string) => `${https ? 'https' : 'http'}://${hostname}:${port}`;
-
-	let local = toDisplayUrl(localAddress);
-	let network: string | null = null;
-
-	if (networkLogging === 'visible') {
-		const ipv4Networks = Object.values(os.networkInterfaces())
-			.flatMap((networkInterface) => networkInterface ?? [])
-			.filter(
-				(networkInterface) =>
-					networkInterface?.address &&
-					// Node < v18
-					((typeof networkInterface.family === 'string' && networkInterface.family === 'IPv4') ||
-						// Node >= v18
-						(typeof networkInterface.family === 'number' && (networkInterface as any).family === 4))
-			);
-		for (let { address: ipv4Address } of ipv4Networks) {
-			if (ipv4Address.includes('127.0.0.1')) {
-				const displayAddress = ipv4Address.replace('127.0.0.1', localAddress);
-				local = toDisplayUrl(displayAddress);
-			} else {
-				network = toDisplayUrl(ipv4Address);
-			}
-		}
-	}
-
-	return {
-		local: [local],
-		network: network ? [network] : [],
-	};
-}
-
 export function telemetryNotice() {
 	const headline = yellow(`Astro now collects ${bold('anonymous')} usage data.`);
 	const why = `This ${bold('optional program')} will help shape our roadmap.`;
@@ -228,11 +176,6 @@ export function cancelled(message: string, tip?: string) {
 		.join('\n');
 }
 
-/** Display port in use */
-export function portInUse({ port }: { port: number }): string {
-	return `Port ${port} in use. Trying a new one…`;
-}
-
 const LOCAL_IP_HOSTS = new Set(['localhost', '127.0.0.1']);
 
 export function getNetworkLogging(host: string | boolean): 'none' | 'host-to-expose' | 'visible' {

packages/astro/src/core/preview/index.ts

@@ -23,11 +23,9 @@ export default async function preview(
 		logging: logging,
 	});
 	await runHookConfigDone({ settings: settings, logging: logging });
-	const host = getResolvedHostForHttpServer(settings.config.server.host);
-	const { port, headers } = settings.config.server;
 
 	if (settings.config.output === 'static') {
-		const server = await createStaticPreviewServer(settings, { logging, host, port, headers });
+		const server = await createStaticPreviewServer(settings, logging);
 		return server;
 	}
 	if (!settings.adapter) {
@@ -55,8 +53,8 @@ export default async function preview(
 		outDir: settings.config.outDir,
 		client: settings.config.build.client,
 		serverEntrypoint: new URL(settings.config.build.serverEntry, settings.config.build.server),
-		host,
-		port,
+		host: getResolvedHostForHttpServer(settings.config.server.host),
+		port: settings.config.server.port,
 		base: settings.config.base,
 	});