How to add git hash to Vue.js Component - node.js

Question

I want to create a vue.js component which will display the package.json version number and hash of most recent git commit. Here is the code so far:
<template>
<div class="versionLabel">Version: {{version}} (HASH)</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { version } from '../../package.json';
#Component
export default class VersionLabel extends Vue {
get version() {
return version;
}
}
</script>
<style scoped lang="scss">
div {
background-color: rgb(60, 172, 60);
color: lightgray;
}
</style>
I am deploying to Heroku using the commands
"postinstall": "if test \"$NODE_ENV\" = \"production\" ; then npm run build ; fi ",
"start": "node server.js",
in package.json and this simple server:
const express = require('express');
const serveStatic = require("serve-static")
app = express();
app.use(serveStatic(__dirname + '/dist'));
const port = process.env.PORT || 5000;
app.listen(port);
The version number is working (Although suggestions for improvement are welcome) but how can I add the git hash in place of HASH?

Answer 1

Install git-describe as a dev dependency (e.g. yarn add --dev git-describe).
In vue.config.js add:
const {gitDescribe, gitDescribeSync} = require('git-describe');
process.env.VUE_APP_GIT_HASH = gitDescribeSync().hash
Now, in every component, we have process.env.VUE_APP_GIT_HASH variable.
Here is how I added it to my app: https://github.com/Quantum-Game/quantum-game-2/pull/164 (with some discussion).
Other approaches
There are other approaches, e.g. using git-revision-webpack-plugin (example for the Vue forum):
const GitRevisionPlugin = require('git-revision-webpack-plugin')
module.exports = {
'chainWebpack': config => {
config.plugin('define').tap(args => {
const gitRevisionPlugin = new GitRevisionPlugin()
args[0]['process.env']['VUE_APP_COMMIT_HASH'] = JSON.stringify(gitRevisionPlugin.commithash())
return args
})
}
}
Another way is to use git directly, with child-process.
See also
Including git commit hash and date in webpack build
Get hash of most recent git commit in Node
Git log output to XML, JSON, or YAML?

Answer 2

I'm not familiar with Heroku, however I hope some parts of my solution you'll find useful.
I'm developing a vue application, I use GitLab CI/CD and it's deployed to an S3 bucket on AWS then distributed with cloudfront. Sometimes our client will ask for changes that have already been made. So to prevent confusion I wanted to include a the git hash in the footer of the app so we can quickly check that they are looking at the most up-to-date version of the app.
In my .gitlab-ci.yml file I included the following bash commands:
hash=`git describe --always`
echo "\"$hash\"" > src/assets/hash.json
This creates a hash.json file, and the only contents of this file are the most recent commit hash as a string. e.g. "015d8f1"
I assume when you deploy to Heroku there is a similar way to execute bash commands.
From there you can just read in that file in any component and use it as data. e.g.
<script>
import GitHash from "#/assets/hash.json";
export default {
name: "TheFooter",
data() {
return {
GitHash: GitHash
};
}
};
</script>