From b4ed4812fc69058a4703d4b91d0084965a17e1ba Mon Sep 17 00:00:00 2001
From: Claudio Schaad <c.schaad@pog.ch>
Date: Thu, 30 Jul 2026 12:12:30 +0200
Subject: [PATCH] Show the deployed build version in the app

Bakes the git short commit hash into the client bundle at build time and
exposes the same info from the server via GET /api/version. The header
displays the loaded build's commit and flags when it no longer matches
what the server is running, so a stale open tab is easy to spot after a
deploy. The Docker build now includes .git so the hash can be resolved
during the image build.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .dockerignore                               |  1 -
 Dockerfile                                  |  4 +++
 client/src/api/version.ts                   |  6 ++++
 client/src/components/layout/AppShell.tsx   |  2 ++
 client/src/components/layout/AppVersion.tsx | 31 +++++++++++++++++++++
 client/src/styles/global.css                | 10 +++++++
 client/src/vite-env.d.ts                    |  2 ++
 client/vite.config.ts                       | 12 ++++++++
 server/package.json                         |  2 +-
 server/scripts/write-version.js             | 20 +++++++++++++
 server/src/app.ts                           |  2 ++
 server/src/config.ts                        | 22 +++++++++++++++
 shared/src/types.ts                         |  5 ++++
 13 files changed, 117 insertions(+), 2 deletions(-)
 create mode 100644 client/src/api/version.ts
 create mode 100644 client/src/components/layout/AppVersion.tsx
 create mode 100644 server/scripts/write-version.js

diff --git a/.dockerignore b/.dockerignore
index a7fb9a9..744faae 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -2,7 +2,6 @@ node_modules
 **/node_modules
 **/dist
 **/*.tsbuildinfo
-.git
 .tools
 data
 data-dev
diff --git a/Dockerfile b/Dockerfile
index 48b06c7..02e8317 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,6 +1,7 @@
 # ---- Stage 1: build shared + client (static assets) ----
 FROM node:20-bookworm-slim AS build-client
 WORKDIR /app
+RUN apt-get update && apt-get install -y --no-install-recommends git && rm -rf /var/lib/apt/lists/*
 COPY package.json ./
 COPY shared/package.json shared/package.json
 COPY server/package.json server/package.json
@@ -8,11 +9,13 @@ COPY client/package.json client/package.json
 RUN npm install
 COPY shared shared
 COPY client client
+COPY .git .git
 RUN npm run build -w shared && npm run build -w client
 
 # ---- Stage 2: build shared + server (compiled JS) ----
 FROM node:20-bookworm-slim AS build-server
 WORKDIR /app
+RUN apt-get update && apt-get install -y --no-install-recommends git && rm -rf /var/lib/apt/lists/*
 COPY package.json ./
 COPY shared/package.json shared/package.json
 COPY server/package.json server/package.json
@@ -20,6 +23,7 @@ COPY client/package.json client/package.json
 RUN npm install
 COPY shared shared
 COPY server server
+COPY .git .git
 RUN npm run build -w shared && npm run build -w server
 
 # ---- Stage 3: runtime ----
diff --git a/client/src/api/version.ts b/client/src/api/version.ts
new file mode 100644
index 0000000..c61c889
--- /dev/null
+++ b/client/src/api/version.ts
@@ -0,0 +1,6 @@
+import type { AppVersion } from '@citytracker/shared';
+import { api } from './client';
+
+export function fetchVersion() {
+  return api.get<AppVersion>('/version');
+}
diff --git a/client/src/components/layout/AppShell.tsx b/client/src/components/layout/AppShell.tsx
index c73c46e..884d657 100644
--- a/client/src/components/layout/AppShell.tsx
+++ b/client/src/components/layout/AppShell.tsx
@@ -1,5 +1,6 @@
 import { NavLink, Outlet, useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext';
+import { AppVersion } from './AppVersion';
 
 export function AppShell() {
   const { user, logout } = useAuth();
@@ -14,6 +15,7 @@ export function AppShell() {
     <div className="app-shell">
       <header className="app-header">
         <span className="app-title">CityTracker</span>
+        <AppVersion />
         <nav className="app-nav">
           <NavLink to="/" end>
             Map
diff --git a/client/src/components/layout/AppVersion.tsx b/client/src/components/layout/AppVersion.tsx
new file mode 100644
index 0000000..c9690ef
--- /dev/null
+++ b/client/src/components/layout/AppVersion.tsx
@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import type { AppVersion as AppVersionInfo } from '@citytracker/shared';
+import { fetchVersion } from '../../api/version';
+
+const clientVersion = __APP_VERSION__;
+
+export function AppVersion() {
+  const [serverVersion, setServerVersion] = useState<AppVersionInfo | null>(null);
+
+  useEffect(() => {
+    fetchVersion()
+      .then(setServerVersion)
+      .catch(() => undefined);
+  }, []);
+
+  const stale = serverVersion !== null && serverVersion.commit !== clientVersion.commit;
+
+  const title = [
+    `Loaded build: ${clientVersion.commit} (${clientVersion.builtAt})`,
+    serverVersion
+      ? `Server build: ${serverVersion.commit} (${serverVersion.builtAt})`
+      : 'Server build: checking…',
+  ].join('\n');
+
+  return (
+    <span className={`app-version${stale ? ' app-version-stale' : ''}`} title={title}>
+      {clientVersion.commit}
+      {stale && ' — reload for latest'}
+    </span>
+  );
+}
diff --git a/client/src/styles/global.css b/client/src/styles/global.css
index 7a2d727..3904176 100644
--- a/client/src/styles/global.css
+++ b/client/src/styles/global.css
@@ -135,6 +135,16 @@ a {
   font-size: 1.1rem;
 }
 
+.app-version {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  font-family: monospace;
+}
+
+.app-version-stale {
+  color: var(--color-primary);
+}
+
 .app-nav {
   display: flex;
   gap: var(--spacing-3);
diff --git a/client/src/vite-env.d.ts b/client/src/vite-env.d.ts
index ec878b7..1e246ff 100644
--- a/client/src/vite-env.d.ts
+++ b/client/src/vite-env.d.ts
@@ -1,2 +1,4 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-pwa/react" />
+
+declare const __APP_VERSION__: { commit: string; builtAt: string };
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 55c08f5..6b554e0 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -1,8 +1,20 @@
+import { execSync } from 'node:child_process';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { VitePWA } from 'vite-plugin-pwa';
 
+function getCommit(): string {
+  try {
+    return execSync('git rev-parse --short HEAD').toString().trim();
+  } catch {
+    return 'dev';
+  }
+}
+
 export default defineConfig({
+  define: {
+    __APP_VERSION__: JSON.stringify({ commit: getCommit(), builtAt: new Date().toISOString() }),
+  },
   plugins: [
     react(),
     VitePWA({
diff --git a/server/package.json b/server/package.json
index 03daf1c..943d04c 100644
--- a/server/package.json
+++ b/server/package.json
@@ -5,7 +5,7 @@
   "main": "dist/index.js",
   "scripts": {
     "dev": "tsx watch src/index.ts",
-    "build": "tsc && node -e \"require('fs').cpSync('src/db/migrations','dist/db/migrations',{recursive:true})\"",
+    "build": "tsc && node -e \"require('fs').cpSync('src/db/migrations','dist/db/migrations',{recursive:true})\" && node scripts/write-version.js",
     "start": "node dist/index.js",
     "clean": "rimraf dist"
   },
diff --git a/server/scripts/write-version.js b/server/scripts/write-version.js
new file mode 100644
index 0000000..e4a2797
--- /dev/null
+++ b/server/scripts/write-version.js
@@ -0,0 +1,20 @@
+const { execSync } = require('node:child_process');
+const fs = require('node:fs');
+const path = require('node:path');
+
+function getCommit() {
+  try {
+    return execSync('git rev-parse --short HEAD', { cwd: __dirname }).toString().trim();
+  } catch {
+    return 'dev';
+  }
+}
+
+const version = {
+  commit: getCommit(),
+  builtAt: new Date().toISOString(),
+};
+
+const outDir = path.join(__dirname, '..', 'dist');
+fs.mkdirSync(outDir, { recursive: true });
+fs.writeFileSync(path.join(outDir, 'version.json'), JSON.stringify(version));
diff --git a/server/src/app.ts b/server/src/app.ts
index 41231e7..a6fa52b 100644
--- a/server/src/app.ts
+++ b/server/src/app.ts
@@ -15,6 +15,8 @@ export function createApp() {
   app.use(express.json());
   app.use(sessionMiddleware);
 
+  app.get('/api/version', (req, res) => res.json(config.version));
+
   app.use('/api/auth', authRouter);
   app.use('/api/users', usersRouter);
   app.use('/api/cities', citiesRouter);
diff --git a/server/src/config.ts b/server/src/config.ts
index b2a0c78..bfb4b20 100644
--- a/server/src/config.ts
+++ b/server/src/config.ts
@@ -1,11 +1,32 @@
 import path from 'node:path';
 import crypto from 'node:crypto';
+import fs from 'node:fs';
+import { execSync } from 'node:child_process';
+import type { AppVersion } from '@citytracker/shared';
 
 function readBool(value: string | undefined, fallback: boolean): boolean {
   if (value === undefined) return fallback;
   return value.toLowerCase() === 'true' || value === '1';
 }
 
+// In the Docker image this file is written at build time by scripts/write-version.js and
+// sits next to this compiled file in dist/. Under `tsx` in local dev there's no build step,
+// so fall back to asking git directly for the current commit.
+function readVersion(): AppVersion {
+  try {
+    const raw = fs.readFileSync(path.join(__dirname, 'version.json'), 'utf-8');
+    return JSON.parse(raw) as AppVersion;
+  } catch {
+    let commit = 'dev';
+    try {
+      commit = execSync('git rev-parse --short HEAD', { cwd: __dirname }).toString().trim();
+    } catch {
+      // no .git available either (e.g. a source-only deploy) — leave commit as 'dev'
+    }
+    return { commit, builtAt: new Date().toISOString() };
+  }
+}
+
 const isProduction = process.env.NODE_ENV === 'production';
 
 let sessionSecret = process.env.SESSION_SECRET;
@@ -34,4 +55,5 @@ export const config = {
   // file's location, not process.cwd(), since cwd depends on how the process was launched.
   clientDistDir:
     process.env.CLIENT_DIST_DIR || path.join(__dirname, '..', '..', 'client', 'dist'),
+  version: readVersion(),
 };
diff --git a/shared/src/types.ts b/shared/src/types.ts
index f02c562..ca8b280 100644
--- a/shared/src/types.ts
+++ b/shared/src/types.ts
@@ -47,3 +47,8 @@ export interface GeocodeResult {
 export interface SetupStatus {
   needsSetup: boolean;
 }
+
+export interface AppVersion {
+  commit: string;
+  builtAt: string;
+}