✨ feat: ui commit hash versioning on prod

apps/web/Dockerfile

@@ -1,3 +1,4 @@
+ARG GIT_HASH=unknown
 FROM oven/bun:1.3 AS deps
 WORKDIR /app
 
@@ -8,8 +9,10 @@ RUN bun install --frozen-lockfile
 RUN bun install --cwd /app/apps/web --frozen-lockfile
 
 FROM deps AS builder
+ARG GIT_HASH
 WORKDIR /app/apps/web
 ENV NEXT_TELEMETRY_DISABLED=1
+ENV NEXT_PUBLIC_GIT_HASH=$GIT_HASH
 RUN bun run build
 
 FROM oven/bun:1.3 AS runner

apps/web/app/api/commit-hash/route.ts

@@ -1,7 +1,17 @@
-import { NextResponse } from "next/server";
 import { execSync } from "child_process";
+import { NextResponse } from "next/server";
+
+export const dynamic = "force-dynamic";
 
 export function GET() {
-  const hash = execSync("git rev-parse --short HEAD").toString().trim();
-  return NextResponse.json({ hash });
-}
+  if (process.env.NODE_ENV !== "development") {
+    return NextResponse.json({ hash: process.env.NEXT_PUBLIC_GIT_HASH || "unknown" });
+  }
+
+  try {
+    const hash = execSync("git rev-parse --short HEAD", { cwd: process.cwd() }).toString().trim();
+    return NextResponse.json({ hash });
+  } catch {
+    return NextResponse.json({ hash: "unknown" });
+  }
+}

apps/web/components/footer.tsx

@@ -2,13 +2,22 @@
 
 import { useEffect, useState } from "react";
 
+const BUILD_HASH = process.env.NEXT_PUBLIC_GIT_HASH || "unknown";
+const SHOULD_LOAD_DEV_HASH = process.env.NODE_ENV === "development" && BUILD_HASH === "unknown";
+
+function formatHash(hash: string) {
+  return hash === "unknown" ? hash : hash.slice(0, 7);
+}
+
 export function Footer() {
-  const [hash, setHash] = useState<string>("...");
+  const [hash, setHash] = useState(formatHash(BUILD_HASH));
 
   useEffect(() => {
+    if (!SHOULD_LOAD_DEV_HASH) return;
+
     fetch("/api/commit-hash")
       .then((res) => res.json())
-      .then((data) => setHash(data.hash))
+      .then((data: { hash?: string }) => setHash(formatHash(data.hash || "unknown")))
       .catch(() => setHash("unknown"));
   }, []);
 
@@ -17,4 +26,4 @@ export function Footer() {
       <span className="text-xs text-gray-400 font-mono">{hash}</span>
     </footer>
   );
-}
+}