Fixes custom 404 pages in astro dev (#3331)

* Fixing pathname matching for custom 404 pages * fixes custom 404 routes in dev * refactor: removing node path dependency * refactor: using core's path utils
withastro · May 10, 2022 · e22f736 · e22f736
1 parent d04928e
commit e22f736
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 1 deletion.
diff --git a/.changeset/healthy-oranges-approve.md b/.changeset/healthy-oranges-approve.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes an issue preventing custom 404 pages in dev
diff --git a/packages/astro/src/vite-plugin-astro-server/index.ts b/packages/astro/src/vite-plugin-astro-server/index.ts
@@ -3,6 +3,7 @@ import type http from 'http';
 import type { AstroConfig, ManifestData } from '../@types/astro';
 import type { RenderResponse, SSROptions } from '../core/render/dev/index';
 import { debug, info, warn, error, LogOptions } from '../core/logger/core.js';
+import { appendForwardSlash } from '../core/path.js';
 import { getParamsAndProps, GetParamsAndPropsError } from '../core/render/core.js';
 import { createRouteManifest, matchRoute } from '../core/routing/index.js';
 import stripAnsi from 'strip-ansi';
@@ -166,7 +167,7 @@ async function handle500Response(
 
 function getCustom404Route(config: AstroConfig, manifest: ManifestData) {
 	const relPages = resolvePages(config).href.replace(config.root.href, '');
-	return manifest.routes.find((r) => r.component === relPages + '404.astro');
+	return manifest.routes.find((r) => r.component === appendForwardSlash(relPages) + '404.astro');
 }
 
 function log404(logging: LogOptions, pathname: string) {

diff --git a/packages/astro/test/custom-404.test.js b/packages/astro/test/custom-404.test.js
@@ -0,0 +1,41 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('Custom 404', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/custom-404/',
+		});
+	});
+
+	describe('dev', () => {
+		let devServer;
+		let $;
+
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('renders /', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			$ = cheerio.load(html);
+
+			expect($('h1').text()).to.equal('Home');
+		});
+
+		it('renders 404 for /a', async () => {
+			const html = await fixture.fetch('/a').then((res) => res.text());
+			$ = cheerio.load(html);
+
+			expect($('h1').text()).to.equal('Page not found');
+			expect($('p').text()).to.equal('/a/');
+		})
+	});
+});
diff --git a/packages/astro/test/fixtures/custom-404/astro.config.mjs b/packages/astro/test/fixtures/custom-404/astro.config.mjs
@@ -0,0 +1,4 @@
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({});
diff --git a/packages/astro/test/fixtures/custom-404/package.json b/packages/astro/test/fixtures/custom-404/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@test/custom-404",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/astro/test/fixtures/custom-404/src/pages/404.astro b/packages/astro/test/fixtures/custom-404/src/pages/404.astro
@@ -0,0 +1,12 @@
+---
+---
+
+<html lang="en">
+<head>
+  <title>Not Found - Custom 404</title>
+</head>
+<body>
+  <h1>Page not found</h1>
+	<p>{Astro.canonicalURL.pathname}</p>
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/custom-404/src/pages/index.astro b/packages/astro/test/fixtures/custom-404/src/pages/index.astro
@@ -0,0 +1,11 @@
+---
+---
+
+<html lang="en">
+<head>
+  <title>Custom 404</title>
+</head>
+<body>
+  <h1>Home</h1>
+</body>
+</html>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml