Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

@hono/vite-build/bun staticPaths not working #215

Open
AnkurSaini07 opened this issue Jan 19, 2025 · 6 comments
Open

@hono/vite-build/bun staticPaths not working #215

AnkurSaini07 opened this issue Jan 19, 2025 · 6 comments

Comments

@AnkurSaini07
Copy link

AnkurSaini07 commented Jan 19, 2025 •
edited
Loading 

import devServer, { defaultOptions } from "@hono/vite-dev-server";
import bunAdapter from "@hono/vite-dev-server/bun";
import build from '@hono/vite-build/bun';
import { defineConfig } from "vite";

export default defineConfig(({ mode }) => {
	if (mode === "client") {
		return {
			build: {
				rollupOptions: {
					input: ["src/client.tsx"],
					output: {
						entryFileNames: "static/client.js",
						chunkFileNames: "static/assets/[name]-[hash].js",
						assetFileNames: "static/assets/[name].[ext]",
					},
				},
				emptyOutDir: false,
			},
		};
	} else {
		return {
			build: {
				minify: true,
				rollupOptions: {
					output: {
						entryFileNames: "_worker.js",
					},
				},
			},
			plugins: [
				build({
					entry: "src/server.ts",
					staticPaths: ["/static/*"]
				}),
				devServer({
					adapter: bunAdapter,
					entry: "src/server.ts",
					exclude: [/.*\.png$/, ...defaultOptions.exclude],
				}),
			],
		};
	}
});

This configuration works when I run the development server. However, when I run the build command and execute bun index.js in the dist directory, it does not serve the static directory inside the dist folder. I tried adding staticPaths: ["/static/*"], but it still did not work.

project structure
src :
- client.tsx
- index.css
- server.ts

server.ts code

import { Hono } from "hono";

const app = new Hono();
app.get("/", (c) => {
    return c.html(
        `<html lang="en">
			<head>
				${
            import.meta.env.PROD
                ? '<script type="module" src="/static/client.js" ></script>'
                : '<script type="module" src="/src/client.tsx" ></script>'
        }
				<meta charset="UTF-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
				<title>Garage Admin</title>
			</head>
			<body>
				<div id="root"></div>
			</body>
		</html>`,
    );
});

export default app;

client.tsx code

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";

function App() {
    return <h1>React App</h1>;
}

const root = document.getElementById("root");

if (root) {
    createRoot(root).render(
        <StrictMode>
            <App />
        </StrictMode>,
    );
}
@yusukebe
Copy link
Member

yusukebe commented Jan 20, 2025 •
edited
Loading

Hi @AnkurSaini07

What about running the following command to build:

vite build --mode client && vite build

@AnkurSaini07
Copy link
Author

i am running this command "build": "tsc -b && bunx --bun vite build --mode client && bunx --bun vite build",

@AnkurSaini07
Copy link
Author

on debugging bellow code

import buildPlugin from "../../base.js";
import { serveStaticHook } from "../../entry/serve-static.js";
const bunBuildPlugin = (pluginOptions) => {

  // I can see pluginOptions.staticPaths = ["/static/*"]
  return {
    ...buildPlugin({
      ...{
        entryContentBeforeHooks: [
          async (appName, options) => {
            options.staticPaths = [...options.staticPaths, "/static/*"]
             // Here, options.staticPaths is []
            // If I hardcode the value of options.staticPaths to "/static/*", it works fine
  
            let code = "import { serveStatic } from 'hono/bun'\n";
            code += serveStaticHook(appName, {
              filePaths: options?.staticPaths,
              root: pluginOptions?.staticRoot
            });
            return code;
          }
        ]
      },
      ...pluginOptions
    }),
    name: "@hono/vite-build/bun"
  };
};
var bun_default = bunBuildPlugin;
export {
  bun_default as default
};

@yusukebe
Copy link
Member

@AnkurSaini07

Can you share a minimal project to reproduce it? If so, I can help you.

@AnkurSaini07
Copy link
Author

@yusukebe https://github.com/AnkurSaini07/garage-admin

@axww
Copy link

axww commented Jan 22, 2025 •
edited
Loading

@yusukebe
Similiar issue here, serveStatic in my project does not works well too.
In bun run dev, it works. But if run under Vite, static file 404.
Here's my enter route:

export default await (async () => {

    await Config.init()
    Counter.set('T', (await DB.select({ count: count() }).from(Thread))[0].count);

    const app = new Hono();

    app.get('/:page{[0-9]+}?', tList);
    app.get('/t/:tid{[0-9]+}/:page{[0-9]+}?', pList);
    app.get('/e/:eid{[-0-9]+}?', pEdit);
    app.post('/e/:eid{[-0-9]+}?', pEditData);
    app.get('/n/:page{[0-9]+}?', nList);
    app.get('/p', pJump);
    app.get('/i', iConf);
    app.get('/auth', iAuth);
    app.post('/login', iLogin);
    app.post('/logout', iLogout);

    app.use('/upload/*', serveStatic({ root: './' }));
    app.use('/*', serveStatic({ root: './const/' }));

    return app;

})();

My css is under /const/forum.css
But Vite unable to find it.

Stacks: Bun + Hono + Vite middleware (Latest versions)

@axww axww mentioned this issue Jan 22, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@yusukebe @AnkurSaini07 @axww