fix(api): incorrect base path detection (#444)

* fix(api): incorrect base path detection

Fixes a bug with detecting the appropriate API base path which would fail for GUI instances served from nested URL paths (e.g. `/path/gui`).

* chore: uses base path during development

Sets non-root base path during development to be closer to real user scenarios.

Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com>

.env

@@ -2,7 +2,7 @@ VITE_DATA_TIMEOUT=500
 VITE_INSTALL_URL=https://kuma.io/install/latest/
 VITE_VERSION_URL=https://kuma.io/latest_version/
 VITE_NAMESPACE=Kuma
-VITE_KUMA_API_SERVER_URL=http://localhost:5681/
+VITE_KUMA_API_SERVER_URL=http://localhost:5681/dev/
 VITE_KUMA_DP_SERVER_URL=https://localhost:5678/
 VITE_AMCHARTS_LICENSE=''
 # utm values

package.json

@@ -10,7 +10,7 @@
     "dev:real-api": "vite",
     "preview": "vite preview",
     "build": "vite build",
-    "build:ci": "cross-env VITE_MOCK_API_ENABLED=true VITE_FAKE_MULTIZONE=true yarn run build --mode development",
+    "build:ci": "cross-env VITE_MOCK_API_ENABLED=true VITE_FAKE_MULTIZONE=true yarn run build",
     "lint": "eslint --ext .js,.ts,.vue --fix .",
     "lint:lockfile": "lockfile-lint --path yarn.lock --allowed-hosts yarn --validate-https",
     "test": "cross-env TZ=UTC jest",

src/api/RestClient.ts

@@ -15,7 +15,16 @@ export class RestClient {
    * @param basePath **Default: `''`**. A base path under which the client’s API is served (e.g. `'api'`). Leading and trailing slashes will be ignored.
    */
   public constructor(basePath: string = '') {
-    const origin = import.meta.env.PROD ? window.location.origin : import.meta.env.VITE_KUMA_API_SERVER_URL
+    let origin
+
+    if (import.meta.env.PROD) {
+      // Determines the API base path as the URL up to the first `/gui` path segment. This is important because users can run the GUI from an arbitrary URL path (e.g. https://example.com/more/path/segments/gui for which the expected API base path is `https://example.com/more/path/segments`).
+      const apiBasePath = window.location.pathname.substring(0, window.location.pathname.indexOf('/gui'))
+      origin = window.location.origin + apiBasePath
+    } else {
+      origin = import.meta.env.VITE_KUMA_API_SERVER_URL
+    }
+
     this._origin = trimTrailingSlashes(origin)
     this._basePath = trimBoundarySlashes(basePath)
   }

src/store/modules/config/config.ts

@@ -30,7 +30,7 @@ const getters: GetterTree<ConfigInterface, State> = {
   getKumaDocsVersion: state => state.kumaDocsVersion,
   getConfigurationType: state => state.clientConfig?.store?.type,
   getMulticlusterStatus: (_state, getters) => {
-    if (import.meta.env.DEV && import.meta.env.VITE_FAKE_MULTIZONE === 'true') {
+    if (import.meta.env.VITE_FAKE_MULTIZONE === 'true') {
       console.warn(
         '%c ✨You are currently faking Multi-Zone mode.',
         'background: black; color: white; display: block; padding: 0.25rem;',

vite.config.js

@@ -4,21 +4,24 @@ import vue from '@vitejs/plugin-vue'
 import svgLoader from 'vite-svg-loader'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  base: './',
-  server: {
-    port: 8080,
-  },
-  plugins: [
-    vue(),
-    svgLoader(),
-  ],
-  resolve: {
-    alias: {
-      /**
-       * Used to import files using, for example, '@/api/kumaApi'.
-       */
-      '@': path.resolve('./src'),
+export default defineConfig(function ({ mode }) {
+  return {
+    // Sets the GUI to a less conventional base path so the testing environment more closely resembles real user scenarios.
+    base: mode === 'production' ? './' : '/dev/gui/',
+    server: {
+      port: 8080,
     },
-  },
+    plugins: [
+      vue(),
+      svgLoader(),
+    ],
+    resolve: {
+      alias: {
+        /**
+         * Used to import files using, for example, '@/api/kumaApi'.
+         */
+        '@': path.resolve('./src'),
+      },
+    },
+  }
 })