59

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?

Vivek Doshi
  • 52,153
  • 9
  • 101
  • 113
Matt
  • 3,263
  • 4
  • 33
  • 43

3 Answers3

101

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__

Sebastian Nowak
  • 5,507
  • 8
  • 65
  • 106
azium
  • 19,098
  • 7
  • 52
  • 76
  • 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
  • 7
    I put a `.trim()` at the end of the method chain of `commitHash` to remove a new line character. – Daniel says Reinstate Monica 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
  • 1
    I had to restart webpack dev server before using `__COMMIT_HASH__` – oabarca Dec 30 '20 at 17:09
33

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 }}
Vivek Doshi
  • 52,153
  • 9
  • 101
  • 113
  • 1
    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
5

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
FloodGames
  • 71
  • 1
  • 2