(feat): deep support for server.baseURL API from nitro in dev & prod,

fixes [Bug?]: Router "base" property is flaky solidjs/solid-start#1158 #55
nksaraf · Dec 27, 2023 · 5d9499f · 5d9499f
1 parent 20b8e74
commit 5d9499f
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 30 deletions.
diff --git a/examples/solid/ssr/basic/app/app.tsx b/examples/solid/ssr/basic/app/app.tsx
@@ -6,7 +6,7 @@ export default function App({ assets, scripts }) {
 	return (
 		<html lang="en">
 			<head>
-				<link rel="icon" href="/favicon.ico" />
+				<link rel="icon" href={`${import.meta.env.APP_BASE_URL}/favicon.ico`} />
 				{assets}
 			</head>
 			<body>

diff --git a/packages/vinxi/lib/app.js b/packages/vinxi/lib/app.js
@@ -12,7 +12,9 @@ import { resolveRouterConfig, routerSchema } from "./router-modes.js";
 	routers?: import("./router-modes.js").RouterSchemaInput[];
 	name?:
 	string;
-	server?: import('nitropack').NitroConfig;
+	server?: import('nitropack').NitroConfig & {
+		baseURL?: string;
+	};
 	root?: string
 }} AppOptions */
 

diff --git a/packages/vinxi/lib/dev-server.js b/packages/vinxi/lib/dev-server.js
@@ -3,7 +3,7 @@ import { inspect } from "@vinxi/devtools";
 import { fileURLToPath } from "node:url";
 
 import { consola, withLogger } from "./logger.js";
-import { normalize } from "./path.js";
+import { join, normalize } from "./path.js";
 
 export * from "./router-dev-plugins.js";
 
@@ -57,9 +57,12 @@ export async function createViteHandler(router, app, serveConfig) {
 		...(((await router.plugins?.(router)) ?? []).filter(Boolean) || []),
 	].filter(Boolean);
 
+	let base = join(app.config.server.baseURL ?? "/", router.base);
+
+	console.log(base);
 	const viteDevServer = await createViteDevServer({
 		configFile: false,
-		base: router.base,
+		base,
 		plugins,
 		optimizeDeps: {
 			force: serveConfig.force,
@@ -122,7 +125,7 @@ export async function createDevServer(
 		publicAssets: [
 			...app.config.routers
 				.map((router) => {
-					return router.internals.mode.dev.publicAssets?.(router, app.config);
+					return router.internals.mode.dev.publicAssets?.(router, app);
 				})
 				.filter(
 					/**

diff --git a/packages/vinxi/lib/manifest/dev-server-manifest.js b/packages/vinxi/lib/manifest/dev-server-manifest.js
@@ -16,6 +16,8 @@ export function createDevManifest(app) {
 
 				let router = app.getRouter(bundlerName);
 
+				let base = join(app.config.server.baseURL ?? "", router.base);
+
 				if (router.mode === "static") {
 					return {
 						json() {
@@ -27,7 +29,7 @@ export function createDevManifest(app) {
 						routes() {
 							return [];
 						},
-						base: router.base,
+						base,
 						target: "static",
 						mode: router.mode,
 						handler: undefined,
@@ -64,7 +66,7 @@ export function createDevManifest(app) {
 						return {};
 					},
 					handler: router.handler,
-					base: router.base,
+					base,
 					target: router.target,
 					mode: router.mode,
 					chunks: new Proxy(
@@ -83,7 +85,7 @@ export function createDevManifest(app) {
 								if (router.target === "browser") {
 									return {
 										output: {
-											path: join(router.base, "@fs", absolutePath),
+											path: join(base, "@fs", absolutePath),
 										},
 									};
 								} else {
@@ -234,15 +236,15 @@ export function createDevManifest(app) {
 																attrs: {
 																	key: "vite-client",
 																	type: "module",
-																	src: join(router.base, "@vite", "client"),
+																	src: join(base, "@vite", "client"),
 																},
 															},
 													  ]
 													: []),
 											].filter(Boolean);
 										},
 										output: {
-											path: join(router.base, "@fs", absolutePath),
+											path: join(base, "@fs", absolutePath),
 										},
 									};
 								} else {

diff --git a/packages/vinxi/lib/manifest/prod-server-manifest.js b/packages/vinxi/lib/manifest/prod-server-manifest.js
@@ -1,3 +1,4 @@
+import { joinURL } from "ufo";
 import invariant from "vinxi/lib/invariant";
 import { handlerModule, join, virtualId } from "vinxi/lib/path";
 
@@ -7,21 +8,19 @@ import findAssetsInViteManifest from "./vite-manifest.js";
 
 /** @typedef {import("../app.js").App & { config: { buildManifest: { [key:string]: any } }}} ProdApp */
 
-function createHtmlTagsForAssets(router, assets) {
-	return assets.filter(
-		(asset) =>
-			asset.endsWith(".css") || asset.endsWith(".js"),
-	)
-	.map((asset) => ({
-		tag: "link",
-		attrs: {
-			href: join(router.base, asset),
-			key: join(router.base, asset),
-			...(asset.endsWith(".css")
-				? { rel: "stylesheet", precendence: "high" }
-				: { rel: "modulepreload" }),
-		},
-	}));
+function createHtmlTagsForAssets(router, app, assets) {
+	return assets
+		.filter((asset) => asset.endsWith(".css") || asset.endsWith(".js"))
+		.map((asset) => ({
+			tag: "link",
+			attrs: {
+				href: joinURL(app.config.server.baseURL ?? "", router.base, asset),
+				key: join(app.config.server.baseURL ?? "", router.base, asset),
+				...(asset.endsWith(".css")
+					? { rel: "stylesheet", precendence: "high" }
+					: { rel: "modulepreload" }),
+			},
+		}));
 }
 
 /**
@@ -121,7 +120,11 @@ export function createProdManifest(app) {
 											: input;
 									return {
 										assets() {
-											return createHtmlTagsForAssets(router, findAssetsInViteManifest(bundlerManifest, id));
+											return createHtmlTagsForAssets(
+												router,
+												app,
+												findAssetsInViteManifest(bundlerManifest, id),
+											);
 										},
 										output: {
 											path: join(
@@ -139,17 +142,26 @@ export function createProdManifest(app) {
 									return {
 										import() {
 											return import(
-												/* @vite-ignore */ join(
+												/* @vite-ignore */ joinURL(
+													app.config.server.baseURL ?? "",
 													router.base,
 													bundlerManifest[id].file,
 												)
 											);
 										},
 										assets() {
-											return createHtmlTagsForAssets(router, findAssetsInViteManifest(bundlerManifest, id));
+											return createHtmlTagsForAssets(
+												router,
+												app,
+												findAssetsInViteManifest(bundlerManifest, id),
+											);
 										},
 										output: {
-											path: join(router.base, bundlerManifest[id].file),
+											path: joinURL(
+												app.config.server.baseURL ?? "",
+												router.base,
+												bundlerManifest[id].file,
+											),
 										},
 									};
 								}

diff --git a/packages/vinxi/lib/nitro-dev.js b/packages/vinxi/lib/nitro-dev.js
@@ -168,7 +168,10 @@ export function createDevServer(nitro) {
 
 	// Dev-only handlers
 	for (const handler of nitro.options.devHandlers) {
-		app.use(handler.route || "/", handler.handler);
+		app.use(
+			joinURL(nitro.options.runtimeConfig.app.baseURL, handler.route ?? "/"),
+			handler.handler,
+		);
 	}
 
 	// User defined dev proxy

diff --git a/packages/vinxi/lib/plugins/manifest.js b/packages/vinxi/lib/plugins/manifest.js
@@ -29,6 +29,9 @@ export function manifest() {
 						"import.meta.env.ROUTER_NAME": JSON.stringify(router.name),
 						"import.meta.env.ROUTER_HANDLER": JSON.stringify(router.handler),
 						"import.meta.env.CWD": JSON.stringify(router.root),
+						"import.meta.env.APP_BASE_URL": JSON.stringify(
+							app.config.server.baseURL ?? "",
+						),
 						"import.meta.env.ROUTERS": JSON.stringify(
 							app.config.routers.map((router) => router.name),
 						),
@@ -67,10 +70,13 @@ export function manifest() {
 export function injectVinxiClient() {
 	/** @type {import('../router-mode.js').Router} */
 	let router;
+	/** @type {import('../app.js').App} */
+	let app;
 	return {
 		name: "vinxi:inject-client-runtime",
 		configResolved(config) {
 			router = config.router;
+			app = config.app;
 		},
 		apply: "serve",
 		transformIndexHtml(html) {
@@ -80,6 +86,7 @@ export function injectVinxiClient() {
 					attrs: {
 						type: "module",
 						src: join(
+							app.config.server.baseURL ?? "",
 							router.base,
 							"@fs",
 							`${fileURLToPath(