Page Comparison

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).

Image Added

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);

Image Added

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.

Image Added

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;

Image Added

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

Image Added

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.