Respect base url when loading config.json (#274)

* Respect base url when loading config.json

* update readme

README.md

@@ -108,6 +108,7 @@ The following changes are already implemented:
 * 📞 [Support E.164-based Matrix IDs (MSC4009)](https://github.com/etkecc/synapse-admin/pull/214)
 * 🛑 [Add support for Account Suspension (MSC3823)](https://github.com/etkecc/synapse-admin/pull/195)
 * 🗑️ [Add "Purge Remote Media" button](https://github.com/etkecc/synapse-admin/pull/237)
+* [Respect base url (`BASE_PATH` / `vite build --base`) when loading `config.json`](https://github.com/etkecc/synapse-admin/pull/274)
 
 #### exclusive for [etke.cc](https://etke.cc) customers
 

jest.config.ts

@@ -9,5 +9,23 @@ const config: JestConfigWithTsJest = {
   coverageReporters: ["html", "text", "text-summary", "cobertura"],
   extensionsToTreatAsEsm: [".ts", ".tsx"],
   setupFilesAfterEnv: ["<rootDir>/src/jest.setup.ts"],
+  transform: {
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        diagnostics: {
+          ignoreCodes: [1343]
+        },
+        astTransformers: {
+          before: [
+            {
+              path: 'ts-jest-mock-import-meta',
+              options: { metaObjectReplacement: { env: { BASE_URL: "/" } } }
+            }
+          ]
+        }
+      }
+    ]
+  }
 };
 export default config;

package.json

@@ -68,7 +68,8 @@
     "react-hook-form": "^7.54.2",
     "react-is": "^18.3.1",
     "react-router": "^6.28.1",
-    "react-router-dom": "^6.28.1"
+    "react-router-dom": "^6.28.1",
+    "ts-jest-mock-import-meta": "^1.2.1"
   },
   "scripts": {
     "start": "vite serve",

src/utils/config.ts

@@ -22,10 +22,16 @@ let config: Config = {
 };
 
 export const FetchConfig = async () => {
+  // load config.json and honor vite base url (import.meta.env.BASE_URL)
+  // if that url doesn't have a trailing slash - add it
+  let configJSONUrl = "config.json"
+  if (import.meta.env.BASE_URL) {
+    configJSONUrl = `${import.meta.env.BASE_URL.replace(/\/?$/, '/')}config.json`;
+  }
   try {
-    const resp = await fetch("config.json");
+    const resp = await fetch(configJSONUrl);
     const configJSON = await resp.json();
-    console.log("Loaded config.json", configJSON);
+    console.log("Loaded", configJSONUrl, configJSON);
     LoadConfig(configJSON);
   } catch (e) {
     console.error(e);

yarn.lock

@@ -5318,6 +5318,11 @@ ts-api-utils@^1.3.0:
   resolved "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz"
   integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==
 
+ts-jest-mock-import-meta@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ts-jest-mock-import-meta/-/ts-jest-mock-import-meta-1.2.1.tgz#773a67810eede5f48df23a2f2f0bd4532bdc9129"
+  integrity sha512-+qh8ZijpFnh7nMNdw1yYrvmnhe3Rctau5a3AFtgBAtps46RSiC8SHr3Z0S9sNqCU3cNOGumCAVO7Ac65fstxRA==
+
 ts-jest@^29.2.5:
   version "29.2.5"
   resolved "https://registry.npmjs.org/ts-jest/-/ts-jest-29.2.5.tgz"