"NodeJS" in Frontend Display Construction and Git Commit Information

While writing the project, Bai Liao thought of seeing commit hash and build time displayed on other project webpages before. So they also wanted to display this information in their project φ(゜▽゜ *)♪
tips> This is Bai Liao's own idea, as they couldn't find any examples from others (~~actually too lazy to look through the source code~~), so they implemented it themselves.

Get Build and Git Information ,,ԾㅂԾ,,#

Bai Liao's idea is to execute commands through a script before building and parse the data, so the first step is to create a script, which Bai Liao usually places at the following path script/generate-build-info.js

First, a function to execute commands is needed △□○(´▽｀)

const { execSync } = require('child_process');

/**
 * Safely execute commands to avoid crashing directly on errors
 * @param {string} command - Command
 * @param {string} fallback - Default return value on error
 * @returns {string} Command execution result or default value
 */
function exec(command, fallback = 'unknown') {
  try {
    return execSync(command).toString().trim()
  } catch (error) {
    console.warn(`Shell Command Failed: ${command}`, error.message)
    return fallback
  }
}

Next, use commands to build an object containing the required information (☆▽☆) Here is a small example

const buildInfo = {
  version: projectInfo.version, // projectInfo is obtained by opening the package.json file using the path module
  hash: exec('git rev-parse --short HEAD'),
  hashFull: exec('git rev-parse HEAD'),
  summary: exec('git log -1 --pretty=%s'),  // Only get the summary
  
  buildDate: new Date().toISOString(),
  buildTimestamp: Date.now(),
  nodeVersion: process.version,
  platform: process.platform
};

Output the object as an exported JS file for the frontend to access the data (●ˇ∀ˇ●)

// Convert the object to a string
const content = `/**
 * Automatically generated build information （。＾▽＾）
 *
 * This file is automatically generated by the \`generate-build-info.js\` script,
 * only used to provide build information for the project!
 *
 * Script author: Bai Liao · Luosita Ya(mio@chyan.moe)
 *
 * File created on : ${new Date().toISOString()}
 */

export const buildInfo = ${JSON.stringify(buildInfo, null, 2)}` // Of course, this line is the key (。＾▽＾)

// Write to file
const __rootdir = process.cwd()
const outputPath = path.resolve(__rootdir, 'src/build-info.js')
fs.writeFileSync(outputPath, content)

The generation script file is now complete~

Using Build Information (。>︿<)_θ#

The generated information looks like this ○(＾皿＾) っ CodeCodeCode......

/**
 * Automatically generated build information （。＾▽＾）
 *
 * This file is automatically generated by the `generate-build-info.js` script,
 * only used to provide build information for the project!
 *
 * Script author: Bai Liao · Luosita Ya(mio@chyan.moe)
 *
 * File created on : 2025-05-04T16:00:45.517Z
 */

export const buildInfo = {
  "git": {
    "repository": "https://github.com/Miourasaki/kagamie.git",
    "commit": {
      "hash": "427caef",
      "hashFull": "427caef417aa15e3260beb41335dc9d5f8e43296",
      "message": "feat(draw): Added eraser tool\n\nChanges include:\n - 👚 The mouse is no longer hidden when zoomed in, making it easier to locate\n - ✏️ New tool: Eraser can clear pixels",
      "summary": "feat(draw): Added eraser tool",
      "description": "Changes include:\n - 👚 The mouse is no longer hidden when zoomed in, making it easier to locate\n - ✏️ New tool: Eraser can clear pixels",
      "date": "Mon May 5 00:00:34 2025 +0800",
      "author": "Bai Liao · Luosita Ya",
      "authorEmail": "mio@chyan.moe"
    },
    "branch": "master",
    "tag": "427caef"
  },
  "buildDate": "2025-05-04T16:00:45.514Z",
  "buildTimestamp": 1746374445517,
  "node": {
    "version": "v20.14.0",
    "project": {
      "name": "kagamie",
      "version": "0.1.0.0"
    }
  },
  "platform": "win32"
}

To use it, do this in ES Module

import { buildInfo } from '../src/build-info'

That's the general idea. Mission accomplished. ヾ (≧▽≦*) o
Let's take a look at the effect

This is a reference image, the usage effect is in the RinnTaya/KagamiE project

By the way, you can also check out Bai Liao's project (。・・) ノ —— Let's all draw together~

That's all, finally, everyone can refer to Bai Liao's code snippet # generate-build-info.js ヾ (≧▽≦*) o

This article is synchronized and updated to xLog by Mix Space
The original link is https://rinn.im/posts/web/nodejs/generate-build-info.js