Web - Use console.log and Vite Env Variables to show building time on browser console

Create env.d.ts file

cd src
touch env.d.ts

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_BUILD_TIME: string;
  // more env variables...
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

Logs at main.tsx

// eslint-disable-next-line no-console
console.log("BUILD_TIME: ", import.meta.env.VITE_BUILD_TIME);

Add environment variables to package.json

   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
+    "dev": "VITE_BUILD_TIME=\"$(date)\" vite",
+    "build": "VITE_BUILD_TIME=\"$(date)\" vite build",

You can use cross-env package for Windows.

Reference

• https://vitejs.dev/guide/env-and-mode

• https://stackoverflow.com/questions/25112510/how-to-set-environment-variables-from-within-package-json

• https://www.npmjs.com/package/cross-env

• https://stackoverflow.com/questions/49741967/passing-date-to-package-json-script