H
Honoā€¢4w ago
shcwork

Serve Static file fail

Hi, kindly ask about serve static file issue. 
../prj/attendance_script/server/app.ts

app.get("*", serveStatic({ root: "./frontend/dist" }));
app.get("*", serveStatic({ path: "./frontend/dist/index.html" }));
../prj/attendance_script/server/app.ts

app.get("*", serveStatic({ root: "./frontend/dist" }));
app.get("*", serveStatic({ path: "./frontend/dist/index.html" }));
it keeps return 404. My others prj are successfully run without change the method (pic 3)
No description
No description
No description
6 Replies
ambergristle
ambergristleā€¢4w ago
hi! can you explain what you're trying to accomplish + what your issue is in a little more detail?
shcwork
shcworkOPā€¢4w ago
Hi, so im doing bun hono vite monorepo prj. My deploy my prj usually file structure is /prj/attendance_script/server/ /prj/attendance_script/frontend/ After I done my frontend, I will bun run build:prod (vite --mode production) start build the prj and output to /prj/attendance_script/frontend/dist 
vite v7.0.6 building for production...
āœ“ 2859 modules transformed.
dist/index.html                     0.46 kB ā”‚ gzip:   0.30 kB
dist/assets/index-YrtsByhV.css     92.38 kB ā”‚ gzip:  14.76 kB
dist/assets/index-CoZoEJOt.js   1,154.08 kB ā”‚ gzip: 344.36 kB
vite v7.0.6 building for production...
āœ“ 2859 modules transformed.
dist/index.html                     0.46 kB ā”‚ gzip:   0.30 kB
dist/assets/index-YrtsByhV.css     92.38 kB ā”‚ gzip:  14.76 kB
dist/assets/index-CoZoEJOt.js   1,154.08 kB ā”‚ gzip: 344.36 kB
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from "path"
import tailwindcss from "@tailwindcss/vite"
// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@server": path.resolve(__dirname, "../server"),
    },
  },
  build: {
    outDir: "dist",
  },
  // Skip server module resolution during build
  optimizeDeps: {
    exclude: ["@server/app"],
  },
})
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from "path"
import tailwindcss from "@tailwindcss/vite"
// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@server": path.resolve(__dirname, "../server"),
    },
  },
  build: {
    outDir: "dist",
  },
  // Skip server module resolution during build
  optimizeDeps: {
    exclude: ["@server/app"],
  },
})
Then I will run "dev": "NODE_ENV=development bun --watch server/index.ts" to host the ./frontend/dist file.
shcwork
shcworkOPā€¢4w ago
Working Project
not working prj
the frontend folder
shcwork
shcworkOPā€¢4w ago
I tried put dist to basic prj and it works, I am not sure why my the other prj just counld not serve the folder
No description
No description
ambergristle
ambergristleā€¢4w ago
does "prj" mean "project"? so you're trying to serve js and css files statically, and they're returning a 404 but you can successfully access them in a simple project
shcwork
shcworkOPā€¢3w ago
// Serve static files from swagger-ui-dist under "/assets"
app.get("/assets/*", async (c) => {
  // The requested file path after "/assets/"
  const assetPath = c.req.path.slice("/assets/".length);
  // Construct the full file path
  const filePath = `./server/public/src/assets/swagger-ui-dist/${assetPath}`;
  const file = Bun.file(filePath);

  // Optionally, check if the file exists
  if (!(await file.exists())) {
    return new Response("Not Found", { status: 404 });
  }

  // Optionally, set Content-Type based on file extension here

  return new Response(file);
});
// Serve static files from swagger-ui-dist under "/assets"
app.get("/assets/*", async (c) => {
  // The requested file path after "/assets/"
  const assetPath = c.req.path.slice("/assets/".length);
  // Construct the full file path
  const filePath = `./server/public/src/assets/swagger-ui-dist/${assetPath}`;
  const file = Bun.file(filePath);

  // Optionally, check if the file exists
  if (!(await file.exists())) {
    return new Response("Not Found", { status: 404 });
  }

  // Optionally, set Content-Type based on file extension here

  return new Response(file);
});
after taking a day rest, finally found out the issue, is due to my swagger html using /assets/* to get swagger js, css resources šŸ˜… Sry for inconvineces.
No description

Did you find this page helpful?