chore: using commit hash to hash file name

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>TruongBui:React-render</title>
     <style>
       * {
         box-sizing: border-box;

package.json

@@ -13,6 +13,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "postbuild": "node scripts/postbuild.cjs",
     "lint": "eslint react-render --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "prod": "pm2 start scripts/pm2.config.cjs --no-daemon"

scripts/postbuild.cjs

@@ -0,0 +1,39 @@
+const {resolve} = require('node:path');
+const {execSync} = require('node:child_process');
+const fs = require('node:fs');
+const path = require('node:path');
+
+const commitHash = execSync('git rev-parse --short HEAD').toString().trim();
+
+const indexHTMLPath = resolve(__dirname, '../dist/index.html');
+
+function fileName(name) {
+  const parsed = path.parse(name);
+  parsed.name = `${parsed.name}.${commitHash}`;
+  parsed.base = `${parsed.name}${parsed.ext}`;
+  return path.format(parsed);
+}
+
+fs.readFile(indexHTMLPath, 'utf8', function(err, data) {
+  if (err) {
+    return console.log(err);
+  }
+
+  const indexName = fileName('index.js');
+  const clientName = fileName('client.js');
+  const devtoolsName = fileName('devtools.js');
+
+  let result = data.replace(new RegExp(indexName, 'g'),
+      `react-render/${indexName}`);
+
+  result = result.replace(new RegExp(clientName, 'g'),
+      `react-render/${clientName}`);
+
+  result = result.replace(new RegExp(devtoolsName, 'g'),
+      `react-render/${devtoolsName}`);
+
+  // Write the updated content back to the file
+  fs.writeFile(indexHTMLPath, result, 'utf8', function(err) {
+    if (err) return console.log(err);
+  });
+});

src/devtools.tsx

@@ -5,7 +5,7 @@ import {
 } from 'react-devtools-inline/backend';
 import { initialize as createDevTools } from 'react-devtools-inline/frontend';
 
-const APP_SOURCE = import.meta.env.DEV ? '/src/main.tsx' : 'main.js';
+const APP_SOURCE = import.meta.env.DEV ? '/src/main.tsx' : `main.${import.meta.env.VITE_COMMIT_HASH}.js`;
 
 function hookNamesModuleLoaderFunction() {
   return import('react-devtools-inline/hookNames');

src/vite-env.d.ts

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

vite.config.ts

@@ -1,11 +1,10 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-import packageJson from './package.json'
+import { execSync } from 'node:child_process';
 
-/*
- * We need repo name to correct endpoint of github page
- */
-const REPO = packageJson.name
+const commitHash = execSync('git rev-parse --short HEAD').toString().trim();
+
+process.env.VITE_COMMIT_HASH = commitHash;
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -20,9 +19,9 @@ export default defineConfig({
         index: 'index.html',
       },
       output: {
-        chunkFileNames: `${REPO}/[name].[hash].js`,
-        entryFileNames: `${REPO}/[name].js`,
-        assetFileNames: `[name].[ext]`,
+        chunkFileNames: `[name].${commitHash}.js`,
+        entryFileNames: `[name].${commitHash}.js`,
+        assetFileNames: `[name].${commitHash}.[ext]`,
         sourcemapExcludeSources: true,
       },
     }