How to Include Version, Git Commit, and Build Date in AnalogJS Builds

If you're building an AnalogJS app, you might want to display version information like the package version, git commit hash, and build date. While my previous article covered this for Angular CLI projects using file replacements, AnalogJS offers a much cleaner solution using Vite's define feature.

Step 1: Configure Vite to Inject Version Variables

First, update your vite.config.ts to define build-time constants. Add helper functions to read the git commit and package version:

import { execSync } from "node:child_process";
import { readFileSync } from "node:fs";

function getGitCommitHash(): string {
  try {
    return execSync("git rev-parse --short HEAD").toString().trim();
  } catch {
    return "unknown";
  }
}

function getPackageVersion(): string {
  try {
    const pkg = JSON.parse(readFileSync("./package.json", "utf-8"));
    return pkg.version;
  } catch {
    return "0.0.0";
  }
}

Then add a define block to your Vite config:

export default defineConfig(() => ({
  define: {
    __APP_VERSION__: JSON.stringify(getPackageVersion()),
    __GIT_COMMIT__: JSON.stringify(getGitCommitHash()),
    __BUILD_DATE__: JSON.stringify(new Date().toISOString()),
  },
  // ... rest of your config
}));

These constants will be replaced at build time with their actual values.

Step 2: Add TypeScript Declarations

Create or update src/vite-env.d.ts to declare these global constants:

/// <reference types="vite/client" />

declare const __APP_VERSION__: string;
declare const __GIT_COMMIT__: string;
declare const __BUILD_DATE__: string;

This ensures TypeScript knows about these variables and provides autocomplete.

Step 3: Create a Version Service

Create a service to access and format this information:

// src/app/services/version.service.ts
import { Injectable } from "@angular/core";

@Injectable({ providedIn: "root" })
export class VersionService {
  readonly version = __APP_VERSION__;
  readonly commitHash = __GIT_COMMIT__;
  readonly buildDate = __BUILD_DATE__;

  getVersionString(): string {
    return `v${this.version} · ${this.commitHash} · ${this.formatBuildDate()}`;
  }

  private formatBuildDate(): string {
    return new Date(this.buildDate).toLocaleDateString("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
    });
  }
}

Step 4: Display Version Info in Your App

Now you can inject the service anywhere in your app. For example, in a footer component:

import { Component, inject } from "@angular/core";
import { VersionService } from "../services/version.service";

@Component({
  selector: "app-footer",
  template: `
    <footer>
      <p>&copy; {{ currentYear }} Your Name</p>
      <p>
        {{ version }}
      </p>
    </footer>
  `,
})
export class FooterComponent {
  protected readonly version = inject(VersionService).getVersionString();
  protected readonly currentYear = new Date().getFullYear();
}

The Result

When you build your app, you'll see something like:

v1.2.3 · a1b2c3d · Jan 23, 2026

Done!