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

.github/workflows/commit.yaml

@@ -1,39 +0,0 @@
-name: Update Commit Hash File
-
-on:
-  push:
-    branches:
-      - main
-
-permissions:
-  contents: write
-
-jobs:
-  update-commit:
-    if: contains(github.event.head_commit.message, '#release') != true
-    runs-on: ubuntu-latest
-
-    steps:
-    - name: Checkout the code
-      uses: actions/checkout@v3
-      
-    - name: Setup Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: '20'
-    - name: Get the latest commit hash
-      run: |
-        echo "COMMIT_HASH=$(git rev-parse HEAD)" >> $GITHUB_ENV
-        echo "CURRENT_VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_ENV
-      
-    - name: Update commit file
-      run: |
-        echo "{ \"commit\": \"$COMMIT_HASH\", \"version\": \"$CURRENT_VERSION\" }" > app/commit.json
-
-    - name: Commit and push the update
-      run: |
-        git config --global user.name "github-actions[bot]"
-        git config --global user.email "github-actions[bot]@users.noreply.github.com"
-        git add app/commit.json
-        git commit -m "chore: update commit hash to $COMMIT_HASH"
-        git push

.github/workflows/update-stable.yml

@@ -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
-          git add package.json pnpm-lock.yaml changelog.md app/commit.json
           git commit -m "chore: release version ${{ steps.bump_version.outputs.new_version }}"
           git tag "v${{ steps.bump_version.outputs.new_version }}"
           git push

.husky/pre-commit

@@ -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..."

app/commit.json

@@ -1 +0,0 @@
-{ "commit": "ab5cde30a126f6540f0afb4d6d6e6be6a764ddca", "version": "0.0.3" }

app/components/settings/debug/DebugTab.tsx

@@ -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/components/settings/providers/ProvidersTab.tsx

@@ -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 regular = newFilteredProviders.filter((p) => !URL_CONFIGURABLE_PROVIDERS.includes(p.name));
-    const urlConfigurable = 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 regularProviders = filteredProviders.filter((p) => !URL_CONFIGURABLE_PROVIDERS.includes(p.name));
-  const urlConfigurableProviders = 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">
+      <div className="grid grid-cols-2 gap-4 mb-8">{regularProviders.map(renderProviderCard)}</div>
-        {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">
+          <div className="space-y-4">{urlConfigurableProviders.map(renderProviderCard)}</div>
-            {urlConfigurableProviders.map(renderProviderCard)}
-          </div>
         </div>
       )}
     </div>
   );
-}
+}

app/lib/hooks/useSettings.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/vite-env.d.ts

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

pre-start.cjs

@@ -1,4 +1,18 @@
-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(`
 ★═══════════════════════════════════════★
@@ -6,6 +20,7 @@ console.log(`
          ⚡️  Welcome  ⚡️
 ★═══════════════════════════════════════★
 `);
-console.log('📍 Current Commit Version:', commit);
+console.log('📍 Current Version Tag:', `v${commitJson.version}`);
-console.log('  Please wait until the URL appears here')
+console.log('📍 Current Commit Version:', commitJson.hash);
-console.log('★═══════════════════════════════════════★');
+console.log('  Please wait until the URL appears here');
+console.log('★═══════════════════════════════════════★');

vite.config.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',
     },