Use dynamic version number from git tags in webapp

webapp/package.json

@@ -1,10 +1,10 @@
 {
   "name": "datalab-vue",
-  "version": "0.4.5",
+  "version": "0.0.0-git",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "serve": "VUE_APP_GIT_VERSION=$(node scripts/get-version.js) vue-cli-service serve",
+    "build": "VUE_APP_GIT_VERSION=$(node scripts/get-version.js) vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e --mode test_e2e",
     "lint": "vue-cli-service lint"

webapp/scripts/get-version.js

@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+// This script tries to get the version of the app from three sources:
+//
+// 1. The VUE_APP_GIT_VERSION environment variable
+// 2. The latest git tag
+// 3. The version field in package.JSON
+//
+// It can be used as part of the build system to set the
+// `VUE_APP_GIT_VERSION` environment variable itself.
+
+const { execSync } = require("child_process");
+const fs = require("fs");
+
+function getPackageJsonVersion() {
+  try {
+    const packageJson = JSON.parse(fs.readFileSync("package.json", "utf8"));
+    return packageJson.version || "unknown";
+  } catch (error) {
+    console.error("Error reading package.json:", error);
+    return "unknown";
+  }
+}
+
+function getGitVersion() {
+  try {
+    const tag = execSync("git describe --tags").toString().trim();
+    return tag;
+  } catch (error) {
+    console.error("Error getting git version:", error);
+    return null;
+  }
+}
+
+function getVersion() {
+  // Check if VUE_APP_GIT_VERSION is already set (e.g., by build system)
+  if (process.env.VUE_APP_GIT_VERSION) {
+    return process.env.VUE_APP_GIT_VERSION;
+  }
+
+  // Try to get git version
+  const gitVersion = getGitVersion();
+  if (gitVersion) {
+    return gitVersion;
+  }
+
+  // Fall back to package.json version
+  return getPackageJsonVersion();
+}
+
+// Get and log the version
+const version = getVersion();
+console.log(version);

webapp/src/resources.js

@@ -30,6 +30,7 @@ export const FEDERATION_QR_CODE_RESOLVER_URL = "https://purl.datalab-org.io";
 
 export const LOGO_URL = process.env.VUE_APP_LOGO_URL;
 export const HOMEPAGE_URL = process.env.VUE_APP_HOMEPAGE_URL;
+export const APP_VERSION = process.env.VUE_APP_GIT_VERSION;
 
 export const GRAVATAR_STYLE = "identicon";
 

webapp/src/views/About.vue

@@ -34,7 +34,9 @@
             </tr>
             <tr>
               <td>App version</td>
-              <td><code>0.4.0</code></td>
+              <td>
+                <code>{{ appVersion }}</code>
+              </td>
             </tr>
           </table>
         </div>
@@ -75,12 +77,14 @@
 import Navbar from "@/components/Navbar";
 import { getInfo } from "@/server_fetch_utils.js";
 import StatisticsTable from "@/components/StatisticsTable";
+import { APP_VERSION } from "@/resources.js";
 
 export default {
   components: { Navbar, StatisticsTable },
   data() {
     return {
       apiInfo: { server_version: "unknown" },
+      appVersion: APP_VERSION,
     };
   },
   async mounted() {