Skip to content
· Time to read: 3 min

Displaying commit SHA and time in a web application

If you are not using SemVer or the application has not reached a stable release yet — it makes sense to display the SHA of the latest commit and its date to understand which version is currently running. In Vite, this can be implemented in a few lines.

Getting commit information

In any convenient file, or directly in vite.config.ts, write the following:

ts
import { execFileSync } from "node:child_process";

const commitSHA = execFileSync("git", ["rev-parse", "--short", "HEAD"], { encoding: "utf8" }).trim();
const commitDate = execFileSync("git", ["log", "-1", "--format=%cI"], { encoding: "utf8" }).trim();
What does this code do?

execFile (and its synchronous version execFileSync) runs an executable file, in our case git, and passes parameters to it.

  • git rev-parse --short HEAD — returns the shortened SHA of the current commit.
  • git log -1 --format=%cI — returns the date of the latest commit in ISO format.

execFile is used instead of exec because it runs the command directly without passing it through a shell.

The encoding option is set to utf8 so that the function returns a string instead of a Buffer.

Add the following values to the define section of vite.config.ts:

diff
export default defineConfig({
+ define: {
+   "import.meta.env.VITE_GIT_COMMIT_SHA": JSON.stringify(commitSHA),
+   "import.meta.env.VITE_GIT_COMMIT_DATE": JSON.stringify(commitDate)
+ }
});

Adding to a component

Now, in any component, you can get values from environment variables through import.meta.env.

ts
const { VITE_GIT_COMMIT_SHA, VITE_GIT_COMMIT_DATE } = import.meta.env;

And use them, for example, like this:

ts
const commitDate = new Intl.DateTimeFormat(navigator.language, {
  year: "numeric",
  month: "long",
  day: "2-digit"
}).format(new Date(VITE_GIT_COMMIT_DATE));

const revision = `${commitDate} [${VITE_GIT_COMMIT_SHA}]`; // July 18, 2026 [369f0b3]

This makes it easy to verify which commit is currently deployed and confirm that the latest deployment completed successfully.

⚠️ This approach only works if the Git repository is available during the build. If the project is built without the .git directory, these commands will fail.