Display Git’s branch name and commit hash

The following are the steps required to display Git’s branch name and commit hash in the applets and cpCommerce. You may refer to the changes done on CpCommerce here or refer to StackOverflow.

1. Execute npm install git-rev-sync --save to install git-rev-sync (this library gives access to the git commit hash and branch name).

Open

2. Add the file git-version-gen.js with the following body. This script will generate git-version.ts, which contains the git commit hash and branch name.

Sample Code:

const git = require('git-rev-sync');

const { writeFileSync } = require('fs');

const gitInfo = { commit: git.short(), commitLong: git.long(), branch: git.branch() };

const ts = 'export const gitVersion = ' + JSON.stringify(gitInfo, null, 2);

writeFileSync('src/environments/git-version.ts', ts);

Open

3. In package.json in scripts, add:

• "build": "node git-version-gen.js && ng build ..."

• "serve": "node git-version-gen.js && ng serve ..."

This is to run the git-version-gen.js script so that the git-version.ts will be generated before the serve/build.

The sample below is from the wavelet-cp-commerce repo, which is slightly different from the rest of the applets as it uses Ionic.

4. To display the git commit hash and branch name in the component.

Sample Code:

import { gitVersion } from '../../../environments/git-version'; // ...

commitBranch = gitVersion.branch;

commitHash = gitVersion.commit;

5. Add the generated git-version.ts to .gitignore as we want it to be freshly generated every time.

6. Test your changes locally as you would normally (e.g., $ ng serve XXX). git-version.ts should be generated. Check the values in the file if they’re correct.

7. Each time the code is updated, ensure you commit the changes first before publishing to dev, staging, or production, so that the latest commit hash is reflected.