Fix build version environment variables for Vite

- Change REACT_APP_* to VITE_APP_* prefix (required by Vite)
- Update Dockerfile to use VITE_APP_VERSION, VITE_APP_BUILD_TIME, VITE_APP_COMMIT_SHA
- Update GitHub Actions workflow with correct environment variable names
- Add fallback to package.json version (0.1.0) if env vars not available
- Improve timestamp formatting from ISO string
- Add debug logging for environment variables

This fixes the 'vunknown' issue in the build version indicator.
The version should now show: 'v1.0.0 • abc1234 • 2025-09-20 14:04'

Author: mbertelsen

.github/workflows/docker-build.yml

@@ -59,9 +59,9 @@ jobs:
         tags: ${{ steps.meta.outputs.tags }}
         labels: ${{ steps.meta.outputs.labels }}
         build-args: |
-          REACT_APP_VERSION=1.0.0
-          REACT_APP_BUILD_TIME=${{ github.event.head_commit.timestamp }}
-          REACT_APP_COMMIT_SHA=${{ github.sha }}
+          VITE_APP_VERSION=1.0.0
+          VITE_APP_BUILD_TIME=${{ github.event.head_commit.timestamp }}
+          VITE_APP_COMMIT_SHA=${{ github.sha }}
         cache-from: type=gha
         cache-to: type=gha,mode=max
         platforms: linux/amd64,linux/arm64

editor/Dockerfile

@@ -3,14 +3,14 @@ FROM node:18-alpine AS build
 WORKDIR /app
 
 # Build arguments for version info
-ARG REACT_APP_VERSION=1.0.0
-ARG REACT_APP_BUILD_TIME
-ARG REACT_APP_COMMIT_SHA
-
-# Set environment variables for the build
-ENV REACT_APP_VERSION=$REACT_APP_VERSION
-ENV REACT_APP_BUILD_TIME=$REACT_APP_BUILD_TIME
-ENV REACT_APP_COMMIT_SHA=$REACT_APP_COMMIT_SHA
+ARG VITE_APP_VERSION=1.0.0
+ARG VITE_APP_BUILD_TIME
+ARG VITE_APP_COMMIT_SHA
+
+# Set environment variables for the build (Vite requires VITE_ prefix)
+ENV VITE_APP_VERSION=$VITE_APP_VERSION
+ENV VITE_APP_BUILD_TIME=$VITE_APP_BUILD_TIME
+ENV VITE_APP_COMMIT_SHA=$VITE_APP_COMMIT_SHA
 
 # Copy package files first for better Docker layer caching
 COPY package.json package-lock.json ./

editor/src/utils/buildInfo.ts

@@ -14,11 +14,35 @@ export const getBuildInfo = (): BuildInfo => {
     };
   }
 
-  // In production, these will be replaced by build process
+  // Debug: log available environment variables in development/console
+  if (import.meta.env.DEV) {
+    console.log('Available Vite env vars:', {
+      VITE_APP_VERSION: import.meta.env.VITE_APP_VERSION,
+      VITE_APP_BUILD_TIME: import.meta.env.VITE_APP_BUILD_TIME, 
+      VITE_APP_COMMIT_SHA: import.meta.env.VITE_APP_COMMIT_SHA,
+    });
+  }
+
+  // In production, use Vite environment variables (VITE_ prefix required)
+  // Fallback to package version if environment variable not available
+  const envVersion = import.meta.env.VITE_APP_VERSION;
+  const version = envVersion && envVersion !== 'undefined' ? envVersion : '0.1.0';
+  const buildTime = import.meta.env.VITE_APP_BUILD_TIME;
+  const commitSha = import.meta.env.VITE_APP_COMMIT_SHA;
+
+  // Format the build time if available
+  let timestamp: string;
+  if (buildTime) {
+    // Convert ISO timestamp to readable format
+    timestamp = new Date(buildTime).toISOString().slice(0, 16).replace('T', ' ');
+  } else {
+    timestamp = new Date().toISOString().slice(0, 16).replace('T', ' ');
+  }
+
   return {
-    version: process.env.REACT_APP_VERSION || 'unknown',
-    timestamp: process.env.REACT_APP_BUILD_TIME || new Date().toISOString().slice(0, 16).replace('T', ' '),
-    commit: process.env.REACT_APP_COMMIT_SHA?.slice(0, 7) || undefined,
+    version,
+    timestamp,
+    commit: commitSha?.slice(0, 7) || undefined,
   };
 };