Use git commit in your Typescript app

It's pretty standard in web apps to show the current version somewhere in your app. It has multiple use cases, I usually use that version to ensure users are running the latest version available and that there is no mismatch between the frontend and the backend.

Anyway, in the past I struggled to find a simple way to achieve this. I remember using npm packages and git hooks.

Today I stumbled upon a very simple & intelligent way of doing it, simply exposing an ENV variable at build time.

Here's an example in my Tanstack Start project:

package.json


_10{
_10  "scripts": {
_10    "build": "VITE_VERSION=$(git rev-parse --short HEAD) vinxi build",
_10  }
_10}

I'm naming it VITE_VERSION so that it's available in the backend & the frontend.

Now in your footer or wherever you want, you can simply use it:


_10<footer>Version {import.meta.env.VITE_VERSION ?? 'development'}</footer>