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


1 min read

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.