Merge branch 'slash-404-hint' into trailing-magic

.changeset/many-fans-battle.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Returns a more helpful 404 page in dev if there is a mismatch in trailing slashes

packages/astro/src/template/4xx.ts

@@ -1,3 +1,4 @@
+import { appendForwardSlash, removeTrailingForwardSlash } from '@astrojs/internal-helpers/path';
 import { escape } from 'html-escaper';
 
 interface ErrorTemplateOptions {
@@ -129,11 +130,17 @@ export function subpathNotUsedTemplate(base: string, pathname: string) {
 	});
 }
 
-export function notFoundTemplate(pathname: string, message = 'Not found') {
+export function trailingSlashMismatchTemplate(pathname: string, trailingSlash: 'always' | 'never' | 'ignore') {
+	const corrected =
+		trailingSlash === 'always'
+			? appendForwardSlash(pathname)
+			: removeTrailingForwardSlash(pathname);
 	return template({
 		pathname,
 		statusCode: 404,
-		title: message,
-		tabTitle: `404: ${message}`,
+		title: 'Not found',
+		tabTitle: '404: Not Found',
+		body: `<p>Your site is configured with <code>trailingSlash</code> set to <code>${trailingSlash}</code>. Do you want to go to <a href="${corrected}">${corrected}</a> instead?</p>
+<p>Come to our <a href="https://astro.build/chat">Discord</a> if you need help.</p>`,
 	});
 }

packages/astro/src/vite-plugin-astro-server/base.ts

@@ -6,10 +6,14 @@ import path from 'node:path';
 import {
 	appendForwardSlash,
 	collapseDuplicateTrailingSlashes,
+	hasFileExtension,
 } from '@astrojs/internal-helpers/path';
 import { bold } from 'kleur/colors';
 import type { Logger } from '../core/logger/core.js';
-import notFoundTemplate, { subpathNotUsedTemplate } from '../template/4xx.js';
+import notFoundTemplate, {
+	subpathNotUsedTemplate,
+	trailingSlashMismatchTemplate,
+} from '../template/4xx.js';
 import { writeHtmlResponse, writeRedirectResponse } from './response.js';
 
 export function baseMiddleware(
@@ -21,6 +25,7 @@ export function baseMiddleware(
 	const devRootURL = new URL(config.base, 'http://localhost');
 	const devRoot = site ? site.pathname : devRootURL.pathname;
 	const devRootReplacement = devRoot.endsWith('/') ? '/' : '';
+	const { trailingSlash } = settings.config;
 
 	return function devBaseMiddleware(req, res, next) {
 		const url = req.url!;
@@ -36,6 +41,14 @@ export function baseMiddleware(
 			return next(e);
 		}
 
+		if (
+			(trailingSlash === 'never' && pathname.endsWith('/')) ||
+			(trailingSlash === 'always' && !pathname.endsWith('/') && !hasFileExtension(pathname))
+		) {
+			const html = trailingSlashMismatchTemplate(pathname, trailingSlash);
+			return writeHtmlResponse(res, 404, html);
+		}
+
 		if (pathname.startsWith(devRoot)) {
 			req.url = url.replace(devRoot, devRootReplacement);
 			return next();