feat: print build info to console

package.json

@@ -50,6 +50,7 @@
     "prettier-plugin-tailwindcss": "^0.5.13",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.4",
+    "unplugin-info": "^1.1.0",
     "vite": "^5.2.8"
   },
   "engines": {

src/main.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { App } from "./app";
+import "./print-build-info";
 
-import { App } from "./app.tsx";
 import "./globals.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(

src/print-build-info.ts

@@ -0,0 +1,22 @@
+import { isCI } from "~build/ci";
+import { abbreviatedSha, github } from "~build/git";
+import { name, version } from "~build/package";
+import time from "~build/time";
+
+const printBuildInfo = () => {
+  if (process.env.NODE_ENV === "development") {
+    return;
+  }
+  console.group("Build info");
+  console.log("Project:", name);
+  console.log("Build date:", time ? time.toLocaleString() : "Unknown");
+  console.log("Environment:", `${process.env.NODE_ENV}${isCI ? "(ci)" : ""}`);
+  console.log("Version:", `${version}-${abbreviatedSha}`);
+  console.log(
+    `${name} is an open source project, you can view its source code on Github!`,
+  );
+  console.log(`${github}/tree/${abbreviatedSha}`);
+  console.groupEnd();
+};
+
+printBuildInfo();

src/vite-env.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference types="unplugin-info/client" />
 
 // Polyfill for `showOpenFilePicker` API
 // See https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/wicg-file-system-access/index.d.ts

vite.config.ts

@@ -1,10 +1,11 @@
 import path from "path";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import Info from "unplugin-info/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), Info()],
   base: "./",
   resolve: {
     alias: {