Botts-Innovative-Research · tipatterson-dev · Nov 11, 2025 · Nov 10, 2025 · Nov 10, 2025 · Nov 10, 2025
diff --git a/.env b/.env
@@ -1,4 +1,9 @@
-# KEYCLOAK Configuration - DEFAULT PARAMETERS
+# DEFAULT PARAMETERS
+#
+# If any of these parameters need to change do so according to the README.md
+#
+
+# KEYCLOAK Configuration
 # Requires
 # - CLIENT_ID
 # - CLIENT_SECRET
@@ -12,3 +17,13 @@ VITE_CLIENT_SECRET=
 VITE_TOKEN_ENDPOINT=
 
 
+# ENDPOINT & NAME Configuration
+# Requires
+# - VITE_VIEWER_ENDPOINT
+#   - Must be set the the same value as the "staticDocsRootUrl" field in config.json for the hosting node
+#     - Ex:
+#       - /
+#       - /viewer
+#       - /web-app
+VITE_VIEWER_ENDPOINT=/
+VITE_VIEWER_NAME=OSH Viewer
diff --git a/.env.development b/.env.development
@@ -12,3 +12,14 @@
 VITE_CLIENT_ID=
 VITE_CLIENT_SECRET=
 VITE_TOKEN_ENDPOINT=
+
+# ENDPOINT & NAME Configuration
+# Requires
+# - VITE_VIEWER_ENDPOINT
+#   - Must be set the the same value as the "staticDocsRootUrl" field in config.json for the hosting node
+#     - Ex:
+#       - /
+#       - /viewer
+#       - /web-app
+VITE_VIEWER_ENDPOINT=/
+VITE_VIEWER_NAME=OSH Viewer
diff --git a/.env.production b/.env.production
@@ -12,3 +12,14 @@
 VITE_CLIENT_ID=
 VITE_CLIENT_SECRET=
 VITE_TOKEN_ENDPOINT=
+
+# ENDPOINT & NAME Configuration
+# Requires
+# - VITE_VIEWER_ENDPOINT
+#   - Must be set the the same value as the "staticDocsRootUrl" field in config.json for the hosting node
+#     - Ex:
+#       - /
+#       - /viewer
+#       - /web-app
+VITE_VIEWER_ENDPOINT=/
+VITE_VIEWER_NAME=OSH Viewer
diff --git a/README.md b/README.md
@@ -75,3 +75,6 @@ When loading environment variables, the order is:
 | `.env.development.local` | Personal dev overrides | Dev mode only | ❌ No      |
 
 Later files override earlier ones. So .env.development.local overrides .env.development.
+
+## Setting Custom Endpoint and App Title
+Edit ``.env.local``, ``.env.development``, or ``.env.production`` and set the variables for endpoint and name
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>OSH Viewer TEST</title>
+     <title>%VITE_VIEWER_NAME%</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/components/HeaderToolbar.vue b/src/components/HeaderToolbar.vue
@@ -2,23 +2,26 @@
 	import { ref } from 'vue';
 	import AppSettings from './menus/AppSettings.vue';
 
-	const settingsDialog = ref(false);
+const settingsDialog = ref(false)
+const viewerName = import.meta.env.VITE_VIEWER_NAME;
 </script>
 
 <template>
-	<v-toolbar title="OSH Viewer" color="blue" density="comfortable">
-		<v-btn icon="mdi-home" to="/" />
-		<v-btn icon="mdi-account" />
-		<v-btn icon="mdi-menu" />
-		<v-btn icon="mdi-magnify" />
-		<v-btn icon @click="settingsDialog = true">
-			<v-icon>mdi-cog</v-icon>
-			<v-tooltip activator="parent" location="bottom"> Settings </v-tooltip>
-		</v-btn>
-		<v-dialog v-model="settingsDialog" max-width="400">
-			<AppSettings />
-		</v-dialog>
-	</v-toolbar>
+  <v-toolbar :title=viewerName color="blue" density="comfortable">
+    <v-btn icon="mdi-home" to="/" />
+    <v-btn icon="mdi-account" />
+    <v-btn icon="mdi-menu" />
+    <v-btn icon="mdi-magnify" />
+    <v-btn icon @click="settingsDialog = true">
+      <v-icon>mdi-cog</v-icon>
+      <v-tooltip activator="parent" location="bottom">
+        Settings
+      </v-tooltip>
+    </v-btn>
+    <v-dialog v-model="settingsDialog" max-width="400">
+      <AppSettings />
+    </v-dialog>
+  </v-toolbar>
 </template>
 
 <style scoped>

diff --git a/vite.config.js b/vite.config.js
@@ -1,53 +1,65 @@
 import { fileURLToPath, URL } from 'node:url';
 
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import vueJsx from '@vitejs/plugin-vue-jsx';
-import vueDevTools from 'vite-plugin-vue-devtools';
+import {defineConfig, loadEnv} from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import vueDevTools from 'vite-plugin-vue-devtools'
 
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 
 const cesiumSource = 'node_modules/cesium/Build/Cesium';
 const cesiumBaseUrl = 'public/cesium';
 
 // https://vite.dev/config/
-export default defineConfig({
-	plugins: [
-		vue(),
-		vueJsx(),
-		vueDevTools(),
-		viteStaticCopy({
-			targets: [
-				{ src: `${cesiumSource}/ThirdParty`, dest: cesiumBaseUrl },
-				{ src: `${cesiumSource}/Workers`, dest: cesiumBaseUrl },
-				{ src: `${cesiumSource}/Assets`, dest: cesiumBaseUrl },
-				{ src: `${cesiumSource}/Widgets`, dest: cesiumBaseUrl },
-			],
-		}),
-	],
-	resolve: {
-		alias: {
-			'@': fileURLToPath(new URL('./src', import.meta.url)),
-			'osh-js': fileURLToPath(new URL('./lib/osh-js', import.meta.url)),
-		},
-	},
-	build: {
-		rollupOptions: {
-			external: ['fsevents', 'node:path'],
-		},
-	},
-	ssr: {
-		noExternal: ['osh-js', 'cesium', 'leaflet'],
-	},
-	optimizeDeps: {
-		include: ['cesium', 'leaflet', 'osh-js'],
-		exclude: [],
-	},
-	worker: {
-		format: 'es',
-		rollupOptions: {},
-	},
-	define: {
-		CESIUM_BASE_URL: JSON.stringify(cesiumBaseUrl),
-	},
-});
+
+
+// The function argument automatically provides 'mode'
+export default defineConfig(({ mode }) => {
+  // Load env file based on 'mode' in the current working directory.
+  // Second argument is the directory where env files are located.
+  const env = loadEnv(mode, process.cwd(), '');
+
+  return {
+    base: env.VITE_VIEWER_ENDPOINT,
+    plugins: [
+      vue(),
+      vueJsx(),
+      vueDevTools(),
+      viteStaticCopy({
+        targets: [
+          { src: `${cesiumSource}/ThirdParty`, dest: cesiumBaseUrl },
+          { src: `${cesiumSource}/Workers`, dest: cesiumBaseUrl },
+          { src: `${cesiumSource}/Assets`, dest: cesiumBaseUrl },
+          { src: `${cesiumSource}/Widgets`, dest: cesiumBaseUrl },
+        ]
+      })
+    ],
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
+        'osh-js': fileURLToPath(new URL('./lib/osh-js', import.meta.url))
+      }
+    },
+    build: {
+      rollupOptions: {
+        external: ['fsevents', 'node:path'],
+      }
+    },
+    ssr: {
+      noExternal: ['osh-js', 'cesium', 'leaflet']
+    },
+    optimizeDeps: {
+      include: [ 'cesium', 'leaflet', 'osh-js'],
+      exclude: []
+    },
+    worker: {
+      format: 'es',
+      rollupOptions: {
+
+      }
+    },
+    define: {
+      CESIUM_BASE_URL: JSON.stringify(cesiumBaseUrl),
+    }
+  }
+})