Fix: Support .html requests in dev (#3401)

* WIP: this regex should handle .html as well

* much simpler!  Just fix the req.url, don't touch the manifest

* only handle .html requests when config.build.format === 'file'

* chore: add changeset

.changeset/lemon-insects-smash.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Adding support for config.build.format to the dev server

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

@@ -191,7 +191,12 @@ async function handleRequest(
 	const devRoot = site ? site.pathname : '/';
 	const origin = `${viteServer.config.server.https ? 'https' : 'http'}://${req.headers.host}`;
 	const buildingToSSR = isBuildingToSSR(config);
-	const url = new URL(origin + req.url);
+	// When file-based build format is used, pages will be built to `/blog.html`
+	// rather than `/blog/index.html`. The dev server should handle this as well
+	// to match production deployments.
+	const url = config.build.format === 'file'
+		? new URL(origin + req.url?.replace(/(index)?\.html$/, ''))
+		: new URL(origin + req.url);
 	const pathname = decodeURI(url.pathname);
 	const rootRelativeUrl = pathname.substring(devRoot.length - 1);
 	if (!buildingToSSR) {

packages/astro/test/dev-routing.test.js

@@ -247,4 +247,52 @@ describe('Development Routing', () => {
 			expect(body.title).to.equal('data [slug]');
 		});
 	});
+
+	describe('file format routing', () => {
+		/** @type {import('./test-utils').Fixture} */
+		let fixture;
+		/** @type {import('./test-utils').DevServer} */
+		let devServer;
+
+		before(async () => {
+			fixture = await loadFixture({
+				build: {
+					format: 'file',
+				},
+				root: './fixtures/without-site-config/',
+				site: 'http://example.com/',
+			});
+			devServer = await fixture.startDevServer();
+		});
+
+		it('200 when loading /index.html', async () => {
+			const response = await fixture.fetch('/index.html');
+			expect(response.status).to.equal(200);
+		});
+
+		it('200 when loading /', async () => {
+			const response = await fixture.fetch('/');
+			expect(response.status).to.equal(200);
+		});
+
+		it('200 when loading /another.html', async () => {
+			const response = await fixture.fetch('/another.html');
+			expect(response.status).to.equal(200);
+		});
+
+		it('200 when loading /another', async () => {
+			const response = await fixture.fetch('/another');
+			expect(response.status).to.equal(200);
+		});
+
+		it('200 when loading /1.html', async () => {
+			const response = await fixture.fetch('/1.html');
+			expect(response.status).to.equal(200);
+		});
+		
+		it('200 when loading /1', async () => {
+			const response = await fixture.fetch('/1');
+			expect(response.status).to.equal(200);
+		});
+	});
 });