如何在单个项目中同时使用Bun开发前后端？

核心方案：Bun + React 混合路由架构 #

这种方案无需拆分项目、不用预构建前端包，同时兼顾前后端分离的开发体验与Bun的性能优势，核心思路如下：

• 用Bun内置HTTP服务器托管前端静态资源（开发时直接读取源码，生产时Bun自动完成优化打包）
• 在同一Bun服务中区分处理后端API与前端路由：前端采用客户端路由（如React Router）接管页面跳转，后端仅负责API接口和前端入口页面的初始渲染

具体实现步骤 #

1. 初始化项目
   先创建Bun React项目并安装依赖：

   bun create react ./my-fullstack-app
   cd ./my-fullstack-app
   bun add react-router-dom
   

2. 编写Bun服务器入口（server.tsx）
   这个文件统一处理API请求、静态资源托管和前端入口返回：

   import { serve } from "bun";
   import { createElement } from "react";
   import { renderToString } from "react-dom/server";
   import App from "./src/App";
   
   const server = serve({
     port: 3000,
     async fetch(req) {
       const url = new URL(req.url);
   
       // 处理API路由
       if (url.pathname.startsWith("/api")) {
         if (url.pathname === "/api/hello") {
           return new Response(JSON.stringify({ message: "Hello from Bun API" }), {
             headers: { "Content-Type": "application/json" },
           });
         }
         return new Response("API not found", { status: 404 });
       }
   
       // 处理前端静态资源
       const staticFile = Bun.file(`./src${url.pathname}`);
       if (await staticFile.exists()) {
         return new Response(staticFile);
       }
   
       // 返回前端入口页面，交由React Router处理客户端路由
       const appHtml = renderToString(createElement(App));
       const html = `
         <!DOCTYPE html>
         <html>
           <head>
             <meta charset="utf-8" />
             <title>Bun Fullstack App</title>
           </head>
           <body>
             <div id="root">${appHtml}</div>
             <script type="module" src="/src/main.tsx"></script>
           </body>
         </html>
       `;
       return new Response(html, {
         headers: { "Content-Type": "text/html" },
       });
     },
   });
   
   console.log(`Server running on http://localhost:${server.port}`);
   

3. 配置React客户端路由（src/App.tsx）
   用React Router实现客户端路由，避免页面跳转重复请求后端：

   import { BrowserRouter, Routes, Route } from "react-router-dom";
   import Home from "./pages/Home";
   import About from "./pages/About";
   
   function App() {
     return (
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/about" element={<About />} />
         </Routes>
       </BrowserRouter>
     );
   }
   
   export default App;
   

4. 开发与生产部署

   • 开发阶段直接启动服务器，热更新自动生效：

     bun run server.tsx
     

   • 生产环境打包时，Bun会一次性优化整个应用的前后端代码，无需单独构建前端包：

     bun build server.tsx --outdir ./dist --target bun
     cd dist && bun server.js
     

方案优势 #

• 单项目结构，前后端共享依赖与配置，维护成本低
• 无需预构建前端包，开发流程更简洁
• 客户端路由避免不必要的SSR渲染，兼顾性能与用户体验
• 完全利用Bun的内置能力，无需额外工具链

内容的提问来源于stack exchange，提问作者k1zmt