feat: fix the use of vite.base in Astro Dev Server (#13003)

* feat: Dev mode supports reverse proxy of nginx subdirectories

* feat: type define

* feat: type define update

* feat: type define update

* feat: base use update

* feat: check obj value

* feat: change patch

* feat: fix test

* feat: update type and update changeset

* feat: add test

* feat: rewrite test

* feat: update config

* feat: update use pipeline.manifest

* feat: update viteBase type and default value

* chore: update package

* chore: install package

* chore: install package

* chore finish refactor

* Update changeset

---------

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>
Co-authored-by: Matt Kane <m@mk.gg>

.changeset/fresh-badgers-itch.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes a bug that caused the `vite.base` value to be ignored when running `astro dev`

packages/astro/src/container/index.ts

@@ -157,6 +157,7 @@ function createManifest(
 		clientDirectives: manifest?.clientDirectives ?? getDefaultClientDirectives(),
 		renderers: renderers ?? manifest?.renderers ?? [],
 		base: manifest?.base ?? ASTRO_CONFIG_DEFAULTS.base,
+		userAssetsBase: manifest?.userAssetsBase ?? '',
 		componentMetadata: manifest?.componentMetadata ?? new Map(),
 		inlinedScripts: manifest?.inlinedScripts ?? new Map(),
 		i18n: manifest?.i18n,
@@ -234,6 +235,7 @@ type AstroContainerManifest = Pick<
 	| 'renderers'
 	| 'assetsPrefix'
 	| 'base'
+	| 'userAssetsBase'
 	| 'routes'
 	| 'assets'
 	| 'entryModules'

packages/astro/src/core/app/types.ts

@@ -48,6 +48,13 @@ export type SSRManifest = {
 	routes: RouteInfo[];
 	site?: string;
 	base: string;
+	/**
+	 * The base of the assets generated **by the user**. For example, scripts created by the user falls under this category.
+	 * 
+	 * The value of this field comes from `vite.base`. We aren't usually this tight to vite in our code base, so probably
+	 * this should be refactored somehow. 
+	 */
+	userAssetsBase: string | undefined;
 	trailingSlash: AstroConfig['trailingSlash'];
 	buildFormat: NonNullable<AstroConfig['build']>['format'];
 	compressHTML: boolean;

packages/astro/src/core/build/generate.ts

@@ -630,6 +630,7 @@ function createBuildManifest(
 		compressHTML: settings.config.compressHTML,
 		renderers,
 		base: settings.config.base,
+		userAssetsBase: settings.config?.vite?.base,
 		assetsPrefix: settings.config.build.assetsPrefix,
 		site: settings.config.site,
 		componentMetadata: internals.componentMetadata,

packages/astro/src/core/build/plugins/plugin-manifest.ts

@@ -287,6 +287,7 @@ function buildManifest(
 		routes,
 		site: settings.config.site,
 		base: settings.config.base,
+		userAssetsBase: settings.config?.vite?.base,
 		trailingSlash: settings.config.trailingSlash,
 		compressHTML: settings.config.compressHTML,
 		assetsPrefix: settings.config.build.assetsPrefix,

packages/astro/src/core/render-context.ts

@@ -394,6 +394,7 @@ export class RenderContext {
 		// calling the render() function will populate the object with scripts, styles, etc.
 		const result: SSRResult = {
 			base: manifest.base,
+			userAssetsBase: manifest.userAssetsBase,
 			cancelled: false,
 			clientDirectives,
 			inlinedScripts,

packages/astro/src/runtime/server/render/head.ts

@@ -27,6 +27,9 @@ export function renderAllHeadContent(result: SSRResult) {
 	const scripts = Array.from(result.scripts)
 		.filter(uniqueElements)
 		.map((script) => {
+			if(result.userAssetsBase){
+				script.props.src = (result.base === '/' ? '' : result.base) + result.userAssetsBase + script.props.src;
+			}
 			return renderElement('script', script, false);
 		});
 	const links = Array.from(result.links)

packages/astro/src/runtime/server/render/script.ts

@@ -20,5 +20,5 @@ export async function renderScript(result: SSRResult, id: string) {
 	}
 
 	const resolved = await result.resolve(id);
-	return markHTMLString(`<script type="module" src="${resolved}"></script>`);
+	return markHTMLString(`<script type="module" src="${result.userAssetsBase ? ((result.base === '/' ? '' : result.base)+result.userAssetsBase) : ''}${resolved}"></script>`);
 }

packages/astro/src/types/public/internal.ts

@@ -214,6 +214,7 @@ export interface SSRResult {
 	 */
 	cancelled: boolean;
 	base: string;
+	userAssetsBase: string | undefined;
 	styles: Set<SSRElement>;
 	scripts: Set<SSRElement>;
 	links: Set<SSRElement>;

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

@@ -190,6 +190,7 @@ export function createDevelopmentManifest(settings: AstroSettings): SSRManifest
 		clientDirectives: settings.clientDirectives,
 		renderers: [],
 		base: settings.config.base,
+		userAssetsBase: settings.config?.vite?.base,
 		assetsPrefix: settings.config.build.assetsPrefix,
 		site: settings.config.site,
 		componentMetadata: new Map(),

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

@@ -1,5 +1,6 @@
 import assert from 'node:assert/strict';
 import { after, before, describe, it } from 'node:test';
+import { load as cheerioLoad } from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
 describe('Astro dev headers', () => {
@@ -38,3 +39,36 @@ describe('Astro dev headers', () => {
 		});
 	});
 });
+
+describe('Astro dev with vite.base path', () => {
+	let fixture;
+	let devServer;
+	const headers = {
+		'x-astro': 'test',
+	};
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/astro-dev-headers/',
+			server: {
+				headers,
+			},
+			vite: {
+				base: '/hello'
+			}
+		});
+		await fixture.build();
+		devServer = await fixture.startDevServer();
+	});
+
+	after(async () => {
+		await devServer.stop();
+	});
+
+	it('Generated script src get included with vite.base path', async () => {
+		const result = await fixture.fetch('/hello');
+		const html = await result.text();
+		const $ = cheerioLoad(html);
+		assert.match($('script').attr('src'), /^\/hello\/@vite\/client$/);
+	});
+});