From e22f7364ceb3e4b057d89bbb32111bcffb7ae967 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Tue, 10 May 2022 21:05:30 +0000
Subject: [PATCH] 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
---
 .changeset/healthy-oranges-approve.md         |  5 +++
 .../src/vite-plugin-astro-server/index.ts     |  3 +-
 packages/astro/test/custom-404.test.js        | 41 +++++++++++++++++++
 .../test/fixtures/custom-404/astro.config.mjs |  4 ++
 .../test/fixtures/custom-404/package.json     |  8 ++++
 .../fixtures/custom-404/src/pages/404.astro   | 12 ++++++
 .../fixtures/custom-404/src/pages/index.astro | 11 +++++
 pnpm-lock.yaml                                |  6 +++
 8 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/healthy-oranges-approve.md
 create mode 100644 packages/astro/test/custom-404.test.js
 create mode 100644 packages/astro/test/fixtures/custom-404/astro.config.mjs
 create mode 100644 packages/astro/test/fixtures/custom-404/package.json
 create mode 100644 packages/astro/test/fixtures/custom-404/src/pages/404.astro
 create mode 100644 packages/astro/test/fixtures/custom-404/src/pages/index.astro

diff --git a/.changeset/healthy-oranges-approve.md b/.changeset/healthy-oranges-approve.md
new file mode 100644
index 000000000..69dc4a450
--- /dev/null
+++ 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
index 5c8cafd77..bcbbfd35f 100644
--- 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
new file mode 100644
index 000000000..4651d7f20
--- /dev/null
+++ 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
new file mode 100644
index 000000000..882e6515a
--- /dev/null
+++ 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
new file mode 100644
index 000000000..73ef4171b
--- /dev/null
+++ 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
new file mode 100644
index 000000000..85b800bc9
--- /dev/null
+++ 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
new file mode 100644
index 000000000..cf5ef9b58
--- /dev/null
+++ 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
index 436a7bf9b..ef182ea3b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -961,6 +961,12 @@ importers:
     dependencies:
       astro: link:../../..
 
+  packages/astro/test/fixtures/custom-404:
+    specifiers:
+      astro: workspace:*
+    dependencies:
+      astro: link:../../..
+
   packages/astro/test/fixtures/custom-elements:
     specifiers:
       '@test/custom-element-renderer': workspace:*