How to Display the App Version in Your Web App

1. Why the version should be visible right in the app

The app version in the UI answers support's first question: which version are you on? If the version number isn't visible anywhere, only DevOps can find it in the deployment or a developer in the code. Support then works on a reported bug without knowing whether a newer version already fixes it.

The usual places to show the version are the app footer, the Settings screen, a Help → About menu item and the error page. A footer is enough for internal tools. Customer-facing apps also benefit from an about screen with a support contact.

2. Where the version number comes from

The version number should have a single source the build reads from. In JavaScript projects, that's the version field in package.json, updated by npm version or your release tool. For choosing a numbering scheme, see App versioning.

Your client code doesn't need the whole package.json. It lists dependencies and scripts your users don't need to see. That's why the examples below inject only the version string at build time.

3. Vite: get the version from package.json in React, Vue or Svelte

In Vite, you add the package.json version with the "define" option in vite.config.ts. Vite replaces every __APP_VERSION__ in your code with the version string, so nothing else from package.json ends up in the bundle. npm, pnpm and Yarn set npm_package_version whenever they run a script, which covers npm run dev and npm run build.

With TypeScript, add declare const __APP_VERSION__: string; to src/vite-env.d.ts. Then use the version like any other constant, for example <footer>Version {__APP_VERSION__}</footer>.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  define: {
    __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
  },
});

4. Next.js

In Next.js, you pass the version through the "env" field in next.config.ts. Next.js inlines "env" values at build time, so process.env.NEXT_PUBLIC_APP_VERSION works in both server and client components. Importing package.json in the config doesn't put it in the client bundle, since the config only runs during the build.

import type { NextConfig } from "next";
import pkg from "./package.json";

const nextConfig: NextConfig = {
  env: {
    NEXT_PUBLIC_APP_VERSION: pkg.version,
  },
};

export default nextConfig;

5. Angular

In Angular, you read the version from package.json with a named import of the "version" field. It needs "resolveJsonModule" enabled in tsconfig.json. Angular's default builder (esbuild) keeps only the imported field in the bundle, not the whole package.json.

import { Component } from "@angular/core";
import { version } from "../../package.json";

@Component({
  selector: "app-footer",
  template: `<footer>Version {{ version }}</footer>`,
})
export class AppFooter {
  readonly version = version;
}

6. Build number and commit hash from CI/CD

A build number or commit hash doesn't belong in package.json, because only the CI/CD pipeline knows it. Pass it to the build as an environment variable. Vite exposes variables prefixed with VITE_, so in GitHub Actions you'd run VITE_BUILD_NUMBER=$GITHUB_RUN_NUMBER npm run build and read import.meta.env.VITE_BUILD_NUMBER in your code. In Next.js, the NEXT_PUBLIC_ prefix does the same job.

If you take the version from a Git tag, strip the leading v. Users read 1.4.2 and v1.4.2 as the same version, but tools comparing version strings don't.

7. Show release notes next to the version with AboutTheApp

A version number alone doesn't say what changed. The release notes are usually scattered across commits, pull requests and tasks, where users or support can't get to them. The AboutTheApp About box has a "Version & What's new" display variant that shows the version and expands to show the release notes too.

Support will appreciate the "Help & Support" display variant: it has a "Copy app information" button that copies the app name and version to the clipboard, ready for the user to paste into a bug report. The general steps for adding the About box to your app are in the React guide.

1. 1

   Create the product

   In AboutTheApp, create a product or open an existing one and click "Integrate" on its card.

2. 2

   Pick the display variant and copy its embed code

   Under "Variant", choose "Version & What's new". The panel prepares the scripts and an about-the-app element with your app's alias, ready to paste into your app's source code.

3. 3

   Add the version attribute

   In the element's source code, add a "version" attribute with the value from your build, for example version={__APP_VERSION__} in Vite or version={process.env.NEXT_PUBLIC_APP_VERSION} in Next.js.

4. 4

   Record each version with its notes

   Add every released version to the product's version catalog in the dashboard or from CI/CD by calling POST /integrations/versions. For GitHub Actions, there's a ready-made Report release to AboutTheApp action.

export function AppFooter() {
  return <about-the-app alias="my-app" variant="version" version={__APP_VERSION__} />;
}

Frequently asked questions