(fix): static assets imports in server side handler

nksaraf · Dec 27, 2023 · e7afb6e · e7afb6e
1 parent 9274a65
commit e7afb6e
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 4 deletions.
diff --git a/examples/solid/ssr/basic/app/app.tsx b/examples/solid/ssr/basic/app/app.tsx
@@ -1,4 +1,5 @@
 import { Counter } from "./Counter";
+import Logo from "./logo.png";
 import "./style.css";
 
 export default function App({ assets, scripts }) {
@@ -11,6 +12,7 @@ export default function App({ assets, scripts }) {
 			<body>
 				<section>
 					<h1>Hello AgentConf with ya asdo!!!</h1>
+					<img src={Logo} />
 					<Counter />
 				</section>
 				{scripts}

diff --git a/examples/solid/ssr/basic/app/logo.png b/examples/solid/ssr/basic/app/logo.png
diff --git a/examples/solid/ssr/basic/app/style.css b/examples/solid/ssr/basic/app/style.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+	@apply bg-black;
+}
+
 * {
-  color: green;
-}
+	color: green;
+}
diff --git a/packages/vinxi/lib/dev-server.js b/packages/vinxi/lib/dev-server.js
@@ -204,8 +204,8 @@ export async function createDevServer(
 			await devApp.close();
 			await Promise.all(
 				app.config.routers
-					.filter(router => router.internals.devServer)
-					.map(router => router.internals.devServer?.close())
+					.filter((router) => router.internals.devServer)
+					.map((router) => router.internals.devServer?.close()),
 			);
 		},
 	};

diff --git a/packages/vinxi/lib/router-modes.js b/packages/vinxi/lib/router-modes.js
@@ -186,6 +186,16 @@ const routerModes = {
 	handler: createRouterMode(handlerRouterSchema, {
 		name: "handler",
 		dev: {
+			publicAssets: (router) => {
+				/**
+				 * Added here to support static asset imports. Vite transforms these using the server base path. During development it expects that the file system will be available. So we need to serve the whole src diectory (including node_modules) during dev.
+				 */
+				return {
+					dir: join(router.root),
+					baseURL: router.base,
+					fallthrough: true,
+				};
+			},
 			plugins: async (router) => {
 				const { ROUTER_MODE_DEV_PLUGINS } = await import(
 					"./router-dev-plugins.js"