Including git commit hash and date in webpack build

Question

I'm using react/es6/webpack. I want to show the date of the build and git hash somewhere in my app. What's the best approach?

score 110 · Accepted Answer · edited Aug 26 '21 at 13:12

110

You can use webpack's DefinePlugin:

// get git info from command line
let commitHash = require('child_process')
  .execSync('git rev-parse --short HEAD')
  .toString()
  .trim();

...
plugins: [
    new webpack.DefinePlugin({
      __COMMIT_HASH__: JSON.stringify(commitHash)
    })
  ]
...

Then you can use it in your app with __COMMIT_HASH__

edited Aug 26 '21 at 13:12

Sebastian Nowak

5,607
8
67
107

answered Jul 15 '16 at 16:44

azium

20,056
7
57
79

5

To make ESLint happy I had to add `globals: { __COMMIT_HASH__: true }` to my `.eslintrc` (https://stackoverflow.com/a/39053582/1054633) – Ben Jul 17 '18 at 16:28
had to play with the `.eslintrc` : ```{ "globals": { "__COMMIT_HASH__": true }, "parser": "babel-eslint", "parserOptions": { "sourceType": "module", "allowImportExportEverywhere": true } }``` – Nat Apr 22 '19 at 18:27
8

I put a `.trim()` at the end of the method chain of `commitHash` to remove a new line character. – Daniel Node.js May 28 '19 at 18:36
why JSON.stringify is required? – echo Apr 04 '20 at 04:46
4

@echo because the values are inserted directly into the code during build time, and JSON.stringify wraps the values in quotes producing a string syntax. Hopefully someone can correct me if I am mistaken. – MattH Apr 08 '20 at 23:52
If using Typescript, you might have to create a `global.d.ts` file and add that to your `tsconfig.json` to get the global declared. Follow: https://basarat.gitbook.io/typescript/project/modules/globals – Mo Beigi Dec 29 '20 at 03:00
2

I had to restart webpack dev server before using `__COMMIT_HASH__` – dev4life Dec 30 '20 at 17:09
To add a dirty flag, see here: https://remarkablemark.org/blog/2017/10/12/check-git-dirty/ – ADTC Feb 28 '23 at 00:38

Vivek Doshi · Answer 2 · 2019-07-26T19:31:23.370

32

Another way of doing this is ( in ANGULAR + REACT ) :

Just install this package git-revision-webpack-plugin

Simple webpack plugin that generates VERSION and COMMITHASH files during build based on a local git repository.

Sample Code :

Inside your webpack.config.js (or any dev - prod file)

const GitRevisionPlugin = require('git-revision-webpack-plugin');
const gitRevisionPlugin = new GitRevisionPlugin();

plugins: [
    new DefinePlugin({
      'VERSION': JSON.stringify(gitRevisionPlugin.version()),
      'COMMITHASH': JSON.stringify(gitRevisionPlugin.commithash()),
      'BRANCH': JSON.stringify(gitRevisionPlugin.branch()),
    }),
  ]

In your Component (React):

export class Home extends Component{
    ....

    render() {
        return(
            <div>
                {VERSION} 
                {COMMITHASH}
                {BRANCH}
            </div>
        )
    }
}

In your Template (Angular):

{{ VERSION }} 
{{ COMMITHASH }}
{{ BRANCH }}

edited Jul 26 '19 at 19:31

answered Oct 11 '17 at 04:21

Vivek Doshi

56,649
12
110
122

2

if webpack is in watch mode and keeping running, how to update such git information when a new git commit/pull is made? – raptoravis Mar 17 '18 at 03:15
2

`watch` mode is meant for the source files in the project, not the git repository. I'm guessing `watch-poll` is the only valid option for changes not related to source files. – Peter Krebs Dec 23 '19 at 16:12
sorry being late for party. @raptoravis probably answer you were looking for is here -- https://github.com/webpack/webpack/issues/7717#issuecomment-460653171 – ZuBB Jan 18 '20 at 11:51
I run my webpack build, and *then* I commit. The problem is that GitRevisionPlugin's `COMMITHASH` will be the *previous* commit, not the *current* commit. How to solve this? – Abdull Apr 14 '23 at 13:19

score 5 · Answer 3 · answered May 05 '20 at 13:34

I couldn't comment to the top post, so here goes:

Webpack.dev.js

import gitprocess from "child_process"
let LoadCommitDate = gitprocess
  .execSync('git log -1 --date=format:"%Y/%m/%d %T" --format="%ad"')
  .toString()
...
plugins: [
    new webpack.DefinePlugin({
       COMMITDATE: JSON.stringify(LoadCommitDate),
    })
  ]

Additionally in .eslintrc

  "globals": {
    "COMMITDATE": "readonly",
  },

Result - latest commit date you can reference in your code!

console.log(COMMITDATE)
2020/05/04 21:02:03

`declare const COMMITDATE: string` use this in @types/global.d.ts — FloodGames, Jan 20 '22 at 16:20

score 0 · Answer 4 · answered Jan 11 '23 at 12:06

I wanted to add the hash as a comment in my index.html. Found a way to do that with html-webpack-plugin and the templateParameters option.

In the top of your webpack config:

// get git info from command line
const commitHash = require('child_process')
  .execSync('git rev-parse --short HEAD')
  .toString()
  .trim()

The further down where you initiate HtmlWebpackPlugin:

templateParameters: {
  __COMMIT_HASH__: JSON.stringify(commitHash),
}

Finally somewhere in your index.html template:

<!-- <%= __COMMIT_HASH__ %> -->

score 0 · Answer 5 · answered Jan 18 '23 at 08:01

2 steps to get commit info in a clean & useful way.

Step 1: Add Package

npm install --save-dev react-git-info

Step 2: Usage in Component file

// MyComponent.js
import GitInfo from 'react-git-info/macro';

function MyComponent() {
  
  const gitInfo = GitInfo();

  return (
    <div data-branch={gitInfo.branch}>
       {gitInfo.commit.hash}
    </div>
  );
}

Including git commit hash and date in webpack build

5 Answers5

Linked