Fixes custom 404 pages in astro dev (withastro#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
SiriousHunter · 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