'How to insert git info in environment variables using Vite?
How to get information from git about current branch, commit date and other when using Vite bundler?
Solution 1:[1]
It is possible to use execSync and retrive git information when starting Vite.
vite.config.ts:
export default ({ mode }: ConfigEnv) => {
const dev = mode === 'development';
const commitDate = execSync('git log -1 --format=%cI').toString().trimEnd();
const branchName = execSync('git rev-parse --abbrev-ref HEAD').toString().trimEnd();
const commitHash = execSync('git rev-parse HEAD').toString().trimEnd();
const lastCommitMessage = execSync('git show -s --format=%s').toString().trimEnd();
process.env.VITE_GIT_COMMIT_DATE = commitDate;
process.env.VITE_GIT_BRANCH_NAME = branchName;
process.env.VITE_GIT_COMMIT_HASH = commitHash;
process.env.VITE_GIT_LAST_COMMIT_MESSAGE = lastCommitMessage;
...
NB: It is important to use VITE_
prefix in variables, otherwise they won't be avaiable.
Usage example:
function BuildInfo() {
const date = new Date(import.meta.env.VITE_GIT_COMMIT_DATE);
return (
<div>
<span>{date.toLocaleString()}</span>
<span>{import.meta.env.VITE_GIT_LAST_COMMIT_MESSAGE}</span>
<span>{import.meta.env.VITE_GIT_BRANCH_NAME}/{import.meta.env.VITE_GIT_COMMIT_HASH}</span>
</div>
);
}
UPD: You can also use https://www.npmjs.com/package/git-rev-sync
to get git information.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 |