extract version from git tag

client/.eslintrc.cjs

@@ -16,4 +16,8 @@ module.exports = {
 		"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
 		"react/no-unescaped-entities": "off",
 	},
+	globals: {
+		__APP_VERSION__: "readonly",
+		process: "readonly",
+	},
 };

client/src/Pages/Settings/SettingsAbout.jsx

@@ -21,7 +21,7 @@ const SettingsAbout = () => {
 			</Box>
 			<Box>
 				<Typography component="h2">
-					{t("common.appName")} {2.1}
+					{t("common.appName")} {__APP_VERSION__}
 				</Typography>
 				<Typography sx={{ mt: theme.spacing(2), mb: theme.spacing(6), opacity: 0.6 }}>
 					{t("settingsDevelopedBy")}

client/vite.config.js

@@ -1,12 +1,20 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
 import svgr from "vite-plugin-svgr";
+import { execSync } from "child_process";
 
-// https://vitejs.dev/config/
-export default defineConfig({
-	base: "/",
-	plugins: [svgr(), react()],
-	optimizeDeps: {
-		include: ["@mui/material/Tooltip", "@emotion/styled"],
-	},
+export default defineConfig(({ mode }) => {
+	const env = loadEnv(mode, process.cwd(), "");
+	const version =
+		env.VITE_APP_VERSION || execSync("git describe --tags --abbrev=0").toString().trim();
+	return {
+		base: "/",
+		plugins: [svgr(), react()],
+		optimizeDeps: {
+			include: ["@mui/material/Tooltip", "@emotion/styled"],
+		},
+		define: {
+			__APP_VERSION__: JSON.stringify(version),
+		},
+	};
 });