feat: Generate app build info after yarn install (#270)

Author: ivan-dalmet

.build-info.generate.js

@@ -0,0 +1,35 @@
+const dayjs = require('dayjs');
+const fs = require('fs');
+
+const getContent = () => {
+  const getCommitHashShort = () =>
+    require('child_process')
+      .execSync('git rev-parse --short HEAD')
+      .toString()
+      .trim();
+
+  const getCommitHash = () =>
+    require('child_process').execSync('git rev-parse HEAD').toString().trim();
+
+  return {
+    display: getCommitHashShort(),
+    version: `${getCommitHashShort()} - ${dayjs().format()}`,
+    commit: getCommitHash(),
+    date: dayjs().format(),
+  };
+};
+
+const generateAppBuild = () => {
+  try {
+    fs.writeFileSync(
+      './.build-info.json',
+      JSON.stringify(getContent(), null, 2)
+    );
+    console.log('✅ Generate `.build-info.json`');
+  } catch (error) {
+    console.error(error);
+    throw new Error('❌ Failed to generate `.build-info.json`');
+  }
+};
+
+generateAppBuild();

.github/workflows/github-ci.yml

@@ -37,13 +37,6 @@ jobs:
       - name: Install local dependencies
         run: yarn install
 
-      - name: Build the build version
-        run: |
-          sed -i "s/__DEVELOPMENT__/$GITHUB_RUN_ID ($(date +"%Y-%m-%d"))/g" app-build.json
-          sed -i "s/__VERSION__/PIPELINE $GITHUB_RUN_ID/g" app-build.json
-          sed -i "s/__COMMIT__/$GITHUB_SHA/g" app-build.json
-          sed -i "s/__DATE__/$(date +"%Y-%m-%d %T")/g" app-build.json
-
       - name: Check coding rules and types
         run: yarn lint
 

.gitignore

@@ -44,3 +44,6 @@ yarn-error.log*
 
 # cypress
 /cypress/videos
+
+# Build info
+.build-info.json

.gitlab-ci.yml

@@ -14,11 +14,6 @@ build:
   script:
     - echo "Installing dependencies"
     - yarn install
-    - echo "Building application version"
-    - sed -i "s/__DEVELOPMENT__/$CI_PIPELINE_ID ($(date +"%Y-%m-%d"))/g" app-build.json
-    - sed -i "s/__VERSION__/PIPELINE $CI_PIPELINE_ID - JOB $CI_JOB_ID/g" app-build.json
-    - sed -i "s/__COMMIT__/$CI_COMMIT_SHORT_SHA/g" app-build.json
-    - sed -i "s/__DATE__/$(date +"%Y-%m-%d %T")/g" app-build.json
     - echo "Building application"
     - yarn build
 

Dockerfile

@@ -2,12 +2,14 @@
 FROM node:16-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
+RUN apk add --no-cache git
 WORKDIR /app
 COPY . .
 RUN yarn install --frozen-lockfile
 
 # Rebuild the source code only when needed
 FROM node:16-alpine AS builder
+RUN apk add --no-cache git
 WORKDIR /app
 COPY . .
 COPY --from=deps /app/node_modules ./node_modules

app-build.json

@@ -10,11 +10,12 @@
   },
   "scripts": {
     "prepare": "husky install",
-    "postinstall": "yarn theme:generate-typing",
+    "postinstall": "yarn build:info && yarn theme:generate-typing",
     "test": "cypress open",
     "test:ci": "cypress run --component",
     "dev": "yarn docs:build && next dev",
-    "build": "yarn docs:build && next build",
+    "build": "yarn build:info && yarn docs:build && next build",
+    "build:info": "node .build-info.generate.js",
     "start": "next start",
     "pretty": "prettier -w .",
     "lint": "eslint ./src --fix && tsc --noEmit",

package.json

@@ -25,16 +25,18 @@ import {
 } from 'react-icons/fi';
 import { Link, useNavigate } from 'react-router-dom';
 
-import appBuild from '@/../app-build.json';
+import buildInfo from '@/../.build-info.json';
 import { useAccount } from '@/app/account/account.service';
 import { Icon } from '@/components/Icons';
 
 const AppVersion = ({ ...rest }) => {
   const { t } = useTranslation();
 
-  const { hasCopied, onCopy } = useClipboard(JSON.stringify(appBuild, null, 2));
+  const { hasCopied, onCopy } = useClipboard(
+    JSON.stringify(buildInfo, null, 2)
+  );
 
-  if (!appBuild?.version) {
+  if (!buildInfo?.version) {
     return null;
   }
 
@@ -91,7 +93,7 @@ const AppVersion = ({ ...rest }) => {
         </Flex>
         <Text as="span" noOfLines={2}>
           {t('layout:accountMenu.version.label')}{' '}
-          <strong>{appBuild?.display ?? appBuild?.version}</strong>
+          <strong>{buildInfo?.display ?? buildInfo?.version}</strong>
         </Text>
       </Flex>
     </>