use env var for app version in frontend

Author: AnthonyGress

frontend/src/constants/version.ts

@@ -1,6 +1,3 @@
-// Import version from the root package.json
-// This will be bundled at build time
-import { version } from '../../../package.json';
-
-// Export the version for use in the app
-export const APP_VERSION = version;
+// Get version from Vite environment variable that's injected at build time
+// This is a more reliable approach than direct importing package.json
+export const APP_VERSION = import.meta.env.APP_VERSION || '1.0.2';

frontend/src/env.d.ts

@@ -0,0 +1,9 @@
+// / <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly APP_VERSION: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

frontend/tsconfig.app.json

@@ -28,6 +28,5 @@
   },
   "include": [
     "./",
-    "../package.json"
   ]
 }

frontend/vite.config.ts

@@ -1,12 +1,23 @@
 import react from '@vitejs/plugin-react-swc';
+import fs from 'fs';
+import { resolve } from 'path';
 import { defineConfig } from 'vite';
 
+// Read the version from the root package.json
+const packageJson = JSON.parse(
+    fs.readFileSync(resolve(__dirname, '../package.json'), 'utf-8')
+);
+
 // https://vite.dev/config/
 export default defineConfig({
     plugins: [react()],
     server: {
         port: 2022
     },
+    define: {
+        // Inject the version as a global variable
+        'import.meta.env.APP_VERSION': JSON.stringify(packageJson.version),
+    },
     // build: {
     //     rollupOptions: {
     //         output: {