refactor: updated vite config to inject add version metadata into the app on build (#841)

* refactor: removes commit.json and used vite.config to load these variables

* updated precommit hook

* updated the pre start script

* updated the workflows

Author: thecodacus

.github/workflows/commit.yaml

@@ -166,8 +166,7 @@ jobs:
       - name: Commit and Tag Release
         run: |
           git pull
-          echo "{ \"commit\": \"$COMMIT_HASH\", \"version\": \"$NEW_VERSION\" }" > app/commit.json
-          git add package.json pnpm-lock.yaml changelog.md app/commit.json
+          git add package.json pnpm-lock.yaml changelog.md
           git commit -m "chore: release version ${{ steps.bump_version.outputs.new_version }}"
           git tag "v${{ steps.bump_version.outputs.new_version }}"
           git push

.github/workflows/update-stable.yml

@@ -29,15 +29,4 @@ if ! pnpm lint; then
     exit 1
 fi
 
-# Update commit.json with the latest commit hash
-echo "Updating commit.json with the latest commit hash..."
-COMMIT_HASH=$(git rev-parse HEAD)
-if [ $? -ne 0 ]; then
-    echo "❌ Failed to get commit hash. Ensure you are in a git repository."
-    exit 1
-fi
-
-echo "{ \"commit\": \"$COMMIT_HASH\" }" > app/commit.json
-git add app/commit.json
-
 echo "👍 All checks passed! Committing changes..."

.husky/pre-commit

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useSettings } from '~/lib/hooks/useSettings';
-import commit from '~/commit.json';
 import { toast } from 'react-toastify';
 import { providerBaseUrlEnvKeys } from '~/utils/constants';
 
@@ -44,11 +43,16 @@ interface CommitData {
   version?: string;
 }
 
-const connitJson: CommitData = commit;
+const connitJson: CommitData = {
+  commit: __COMMIT_HASH,
+  version: __APP_VERSION,
+};
 
 const LOCAL_PROVIDERS = ['Ollama', 'LMStudio', 'OpenAILike'];
+
 const versionHash = connitJson.commit;
 const versionTag = connitJson.version;
+
 const GITHUB_URLS = {
   original: 'https://api.github.com/repos/stackblitz-labs/bolt.diy/commits/main',
   fork: 'https://api.github.com/repos/Stijnus/bolt.new-any-llm/commits/main',
@@ -524,7 +528,7 @@ export default function DebugTab() {
             <div className="mt-3 pt-3 border-t border-bolt-elements-surface-hover">
               <p className="text-xs text-bolt-elements-textSecondary">Version</p>
               <p className="text-sm font-medium text-bolt-elements-textPrimary font-mono">
-                {versionHash.slice(0, 7)}
+                {connitJson.commit.slice(0, 7)}
                 <span className="ml-2 text-xs text-bolt-elements-textSecondary">
                   (v{versionTag || '0.0.1'}) - {isLatestBranch ? 'nightly' : 'stable'}
                 </span>

app/commit.json

@@ -35,8 +35,8 @@ export default function ProvidersTab() {
     newFilteredProviders.sort((a, b) => a.name.localeCompare(b.name));
 
     // Split providers into regular and URL-configurable
-    const regular = newFilteredProviders.filter(p => !URL_CONFIGURABLE_PROVIDERS.includes(p.name));
-    const urlConfigurable = newFilteredProviders.filter(p => URL_CONFIGURABLE_PROVIDERS.includes(p.name));
+    const regular = newFilteredProviders.filter((p) => !URL_CONFIGURABLE_PROVIDERS.includes(p.name));
+    const urlConfigurable = newFilteredProviders.filter((p) => URL_CONFIGURABLE_PROVIDERS.includes(p.name));
 
     setFilteredProviders([...regular, ...urlConfigurable]);
   }, [providers, searchTerm, isLocalModel]);
@@ -112,8 +112,8 @@ export default function ProvidersTab() {
     );
   };
 
-  const regularProviders = filteredProviders.filter(p => !URL_CONFIGURABLE_PROVIDERS.includes(p.name));
-  const urlConfigurableProviders = filteredProviders.filter(p => URL_CONFIGURABLE_PROVIDERS.includes(p.name));
+  const regularProviders = filteredProviders.filter((p) => !URL_CONFIGURABLE_PROVIDERS.includes(p.name));
+  const urlConfigurableProviders = filteredProviders.filter((p) => URL_CONFIGURABLE_PROVIDERS.includes(p.name));
 
   return (
     <div className="p-4">
@@ -128,22 +128,19 @@ export default function ProvidersTab() {
       </div>
 
       {/* Regular Providers Grid */}
-      <div className="grid grid-cols-2 gap-4 mb-8">
-        {regularProviders.map(renderProviderCard)}
-      </div>
+      <div className="grid grid-cols-2 gap-4 mb-8">{regularProviders.map(renderProviderCard)}</div>
 
       {/* URL Configurable Providers Section */}
       {urlConfigurableProviders.length > 0 && (
         <div className="mt-8">
           <h3 className="text-lg font-semibold mb-2 text-bolt-elements-textPrimary">Experimental Providers</h3>
           <p className="text-sm text-bolt-elements-textSecondary mb-4">
-            These providers are experimental and allow you to run AI models locally or connect to your own infrastructure. They require additional setup but offer more flexibility.
+            These providers are experimental and allow you to run AI models locally or connect to your own
+            infrastructure. They require additional setup but offer more flexibility.
           </p>
-          <div className="space-y-4">
-            {urlConfigurableProviders.map(renderProviderCard)}
-          </div>
+          <div className="space-y-4">{urlConfigurableProviders.map(renderProviderCard)}</div>
         </div>
       )}
     </div>
   );
-}
+}

app/components/settings/debug/DebugTab.tsx

@@ -12,14 +12,16 @@ import { useCallback, useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
 import type { IProviderSetting, ProviderInfo } from '~/types/model';
 import { logStore } from '~/lib/stores/logs'; // assuming logStore is imported from this location
-import commit from '~/commit.json';
 
 interface CommitData {
   commit: string;
   version?: string;
 }
 
-const commitJson: CommitData = commit;
+const versionData: CommitData = {
+  commit: __COMMIT_HASH,
+  version: __APP_VERSION,
+};
 
 export function useSettings() {
   const providers = useStore(providersStore);
@@ -34,7 +36,7 @@ export function useSettings() {
   const checkIsStableVersion = async () => {
     try {
       const stableResponse = await fetch(
-        `https://raw.githubusercontent.com/stackblitz-labs/bolt.diy/refs/tags/v${commitJson.version}/app/commit.json`,
+        `https://raw.githubusercontent.com/stackblitz-labs/bolt.diy/refs/tags/v${versionData.version}/app/commit.json`,
       );
 
       if (!stableResponse.ok) {
@@ -44,7 +46,7 @@ export function useSettings() {
 
       const stableData = (await stableResponse.json()) as CommitData;
 
-      return commit.commit === stableData.commit;
+      return versionData.commit === stableData.commit;
     } catch (error) {
       console.warn('Error checking stable version:', error);
       return false;
@@ -105,16 +107,16 @@ export function useSettings() {
     let checkCommit = Cookies.get('commitHash');
 
     if (checkCommit === undefined) {
-      checkCommit = commit.commit;
+      checkCommit = versionData.commit;
     }
 
-    if (savedLatestBranch === undefined || checkCommit !== commit.commit) {
+    if (savedLatestBranch === undefined || checkCommit !== versionData.commit) {
       // If setting hasn't been set by user, check version
       checkIsStableVersion().then((isStable) => {
         const shouldUseLatest = !isStable;
         latestBranchStore.set(shouldUseLatest);
         Cookies.set('isLatestBranch', String(shouldUseLatest));
-        Cookies.set('commitHash', String(commit.commit));
+        Cookies.set('commitHash', String(versionData.commit));
       });
     } else {
       latestBranchStore.set(savedLatestBranch === 'true');

app/components/settings/providers/ProvidersTab.tsx

@@ -0,0 +1,2 @@
+declare const __COMMIT_HASH: string;
+declare const __APP_VERSION: string;

app/lib/hooks/useSettings.tsx

@@ -1,11 +1,26 @@
-const { commit } = require('./app/commit.json');
+const { execSync } =require('child_process');
+
+// Get git hash with fallback
+const getGitHash = () => {
+  try {
+    return execSync('git rev-parse --short HEAD').toString().trim();
+  } catch {
+    return 'no-git-info';
+  }
+};
+
+let commitJson = {
+  hash: JSON.stringify(getGitHash()),
+  version: JSON.stringify(process.env.npm_package_version),
+};
 
 console.log(`
 ★═══════════════════════════════════════★
           B O L T . D I Y
          ⚡️  Welcome  ⚡️
 ★═══════════════════════════════════════★
 `);
-console.log('📍 Current Commit Version:', commit);
-console.log('  Please wait until the URL appears here')
-console.log('★═══════════════════════════════════════★');
+console.log('📍 Current Version Tag:', `v${commitJson.version}`);
+console.log('📍 Current Commit Version:', commitJson.hash);
+console.log('  Please wait until the URL appears here');
+console.log('★═══════════════════════════════════════★');

app/vite-env.d.ts

@@ -5,8 +5,24 @@ import { nodePolyfills } from 'vite-plugin-node-polyfills';
 import { optimizeCssModules } from 'vite-plugin-optimize-css-modules';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
+import { execSync } from 'child_process';
+
+// Get git hash with fallback
+const getGitHash = () => {
+  try {
+    return execSync('git rev-parse --short HEAD').toString().trim();
+  } catch {
+    return 'no-git-info';
+  }
+};
+
+
 export default defineConfig((config) => {
   return {
+    define: {
+      __COMMIT_HASH__: JSON.stringify(getGitHash()),
+      __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
+    },
     build: {
       target: 'esnext',
     },