Production Build Setup

* Use Dist folder instead of runtime hosting

Signed-off-by: Indrajith K L <indrajith@indrajith.dev>

build.ts

@@ -13,7 +13,7 @@ const result = await Bun.build({
   plugins: [tailwind],
   minify: true,
   target: "browser",
-  sourcemap: "linked",
+  sourcemap: "none",
   define: {
     "process.env.NODE_ENV": JSON.stringify("production"),
   },

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "bun --hot src/index.ts",
-    "start": "NODE_ENV=production bun src/index.ts",
+    "start": "bun run build && NODE_ENV=production bun src/index.ts",
     "build": "bun run build.ts"
   },
   "dependencies": {

src/index.ts

@@ -1,41 +1,58 @@
 import { serve } from "bun";
-import index from "./index.html";
 import { fetchAllPackageDetails } from "./services/api";
+import path from "node:path";
 
-const server = serve({
+const isProd = process.env.NODE_ENV === "production";
-  routes: {
+const distDir = path.join(process.cwd(), "dist");
-    "/*": index,
-    "/api/analyze": async req => {
-      const data = await req.json();
-      const dependencies = data.dependencies || {};
-      const devDependencies = data.devDependencies || {};
-      let devDependeciesPackagetDetails: any[] = [];
-      let dependenciesPackagetDetails: any[] = [];
-      try {
-        devDependeciesPackagetDetails = await fetchAllPackageDetails(devDependencies);
-        dependenciesPackagetDetails = await fetchAllPackageDetails(dependencies);
-      } catch (error) {
-        console.log(error);
-        devDependeciesPackagetDetails = [];
-        dependenciesPackagetDetails = [];
-      }
 
-      return Response.json({
+const apiRoutes = {
-        data: {
+  "/api/analyze": async (req: Request) => {
-          devDependencies: devDependeciesPackagetDetails,
+    const data = await req.json();
-          dependencies: dependenciesPackagetDetails
+    const dependencies = data.dependencies || {};
-        }
+    const devDependencies = data.devDependencies || {};
-      });
+    let devDependeciesPackagetDetails: any[] = [];
+    let dependenciesPackagetDetails: any[] = [];
+    try {
+      devDependeciesPackagetDetails = await fetchAllPackageDetails(devDependencies);
+      dependenciesPackagetDetails = await fetchAllPackageDetails(dependencies);
+    } catch (error) {
+      console.log(error);
+      devDependeciesPackagetDetails = [];
+      dependenciesPackagetDetails = [];
+    }
+    return Response.json({
+      data: {
+        devDependencies: devDependeciesPackagetDetails,
+        dependencies: dependenciesPackagetDetails,
+      },
+    });
+  },
+};
+
+let server;
+
+if (isProd) {
+  server = serve({
+    routes: {
+      ...apiRoutes,
+      "/*": async req => {
+        const url = new URL(req.url);
+        let filePath = path.join(distDir, url.pathname === "/" ? "index.html" : url.pathname);
+        const file = Bun.file(filePath);
+        if (await file.exists()) return new Response(file);
+        return new Response(Bun.file(path.join(distDir, "index.html")));
+      },
     },
-  },
+  });
-
+} else {
-  development: process.env.NODE_ENV !== "production" && {
+  const index = (await import("./index.html")).default;
-    // Enable browser hot reloading in development
+  server = serve({
-    hmr: true,
+    routes: {
-
+      "/*": index,
-    // Echo console logs from the browser to the server
+      ...apiRoutes,
-    console: true,
+    },
-  },
+    development: { hmr: true, console: true },
-});
+  });
+}
 
 console.log(`Server running at ${server.url}`);