fix: better dev routing with base using middleware

[AllanChain]

Changes

Use a base middle for better base handling in dev.

The previous dev routing design is not very friendly with a base path: it has to prioritize the custom 404 page over redirecting to public files, causing some problems:

• False 404 logged and custom 404 returned instead of public files 🐛 BUG: False 404 logged for public files when base is set #3808
• http://localhost:3000/blog/blog/blog/blog/ will redirect to http://localhost:3000/blog/

Here I'm using the middleware approach inspired by Vite: return 404, or strip the base path and continue. In other words, the logic for returning 404 based on the base path is moved into the middleware. Thus the public files are correctly handled by the static serving middleware without the need to redirect.

However, just like Vite and the previous approach, requests for public files not starting with the base path are not responded to with 404.

Testing

Added some tests.

Tested with my real project with base path and custom 404 enabled.

Docs

No need.

[changeset-bot]

🦋 Changeset detected

Latest commit: c2bdcd2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
astro	Patch
@e2e/astro-component	Patch
@e2e/lit-component	Patch
@e2e/preact-component	Patch
@e2e/react-component	Patch
@e2e/solid-component	Patch
@e2e/svelte-component	Patch
@e2e/e2e-tailwindcss	Patch
@e2e/ts-resolution	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[natemoo-re]

This makes a lot of sense to me, thanks for the PR!

Hoping somebody more familiar with this original logic can review as well.

[matthewp]

Can you provide some examples of some URLs and how they would previous resolve and how they will resolve now? That would help understand what you have changed here.

http://localhost:3000/blog/blog/blog/blog/ will redirect to http://localhost:3000/blog/

Why? It seems like http://localhost:3000/blog/blog/blog/blog/ should be a 404 if there isn't a blog/blog/blog/blog.astro file.

[tony-sull]

Very nice, glad to see that redirect hack go away! 🎉

Thanks for filing this PR and including clean test coverage for it!

[AllanChain]

Why? It seems like http://localhost:3000/blog/blog/blog/blog/ should be a 404 if there isn't a blog/blog/blog/blog.astro file.

If you look at the code here:

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

Lines 124 to 140 in 40a45e3

	// HACK: redirect without the base path for assets in publicDir
	const redirectTo =
	req.method === 'GET' &&
	config.base !== '/' &&
	pathname.startsWith(config.base) &&
	pathname.replace(config.base, '/');
	if (redirectTo && redirectTo !== '/') {
	const response = new Response(null, {
	status: 302,
	headers: {
	Location: redirectTo,
	},
	});
	await writeWebResponse(res, response);
	return;
	}

/blog/blog/blog/blog/ starts with the base /blog/, so redirectTo has the value /blog/blog/blog/, so the browser will request /blog/blog/blog/. Then /blog/blog/blog/ becomes /blog/blog/, and so on.

Can you provide some examples of some URLs and how they would previous resolve and how they will resolve now? That would help understand what you have changed here.

Example 1: http://localhost:3000/blog/blog/blog/blog/

• Previous: redirect to http://localhost:3000/blog/
• Here: return 404

Example 2: http://localhost:3000/blog/image.png (image.png exists)

• Previous:
  • without 404.astro: redirect to http://localhost:3000/image.png
  • with 404.astro: return custom 404 page
• Here: returns the image

Example 3: http://localhost:3000/blog/image.png (image.png not exists)

• Previous:
  • without 404.astro: redirect to http://localhost:3000/image.png and 404
  • with 404.astro: return custom 404 page
• Here: custom for default 404 page

[natemoo-re]

Thanks @AllanChain, those specific cases seem much better in this PR! Really appreciate the contribution.