fix apiBaseUrl path

Author: yejiyang

README.md

@@ -35,7 +35,7 @@ When deploying in different environments (local, Kubernetes, etc.), the followin
 - `API_BASE_URL`: The URL where the frontend will connect to the backend API.
   - For local development: Not needed (will default to `http://localhost:5000`)
   - For Docker Compose: `http://backend:5000`
-  - For Kubernetes/production: `/api` (path to the backend service through the ingress)
+  - For Kubernetes/production: Use the full URL including protocol and domain, e.g., `https://your-domain.com/api` (not just the path)
 
 ### Kubernetes Deployment
 

frontend/src/index.html

@@ -114,7 +114,7 @@
     const apiBaseUrl =
       window.location.hostname === "localhost"
         ? "http://localhost:5000"
-        : (window.API_BASE_URL || "/api");
+        : (window.API_BASE_URL || window.location.origin + "/api");
 
     // Initialize map using the function from basemap-layer.js
     const map = initializeMap("map");

frontend/src/js/hazard-layer.js

@@ -7,11 +7,16 @@
  */
 function addGlobalHazardTiles(map, apiBaseUrl = "http://localhost:5000") {
   try {
+    // Ensure the apiBaseUrl has proper format (not ending with slash)
+    const normalizedBaseUrl = apiBaseUrl.endsWith("/")
+      ? apiBaseUrl.slice(0, -1)
+      : apiBaseUrl;
+
     // Add vector tiles source for Global Hazard Points
     map.addSource("global-hazard-source", {
       type: "vector",
       tiles: [
-        `${apiBaseUrl}/collections/hazardglobal/tiles/WebMercatorQuad/{z}/{y}/{x}?f=mvt`,
+        `${normalizedBaseUrl}/collections/hazardglobal/tiles/WebMercatorQuad/{z}/{y}/{x}?f=mvt`,
       ],
       minzoom: 0,
       maxzoom: 15,

frontend/src/js/hyderabad-layer.js

@@ -5,11 +5,16 @@
  */
 function addHyderabadLayer(map, apiBaseUrl = "http://localhost:5000") {
   try {
+    // Ensure the apiBaseUrl has proper format (not ending with slash)
+    const normalizedBaseUrl = apiBaseUrl.endsWith("/")
+      ? apiBaseUrl.slice(0, -1)
+      : apiBaseUrl;
+
     // Add vector tiles source for Hyderabad
     map.addSource("hyderabad-source", {
       type: "vector",
       tiles: [
-        `${apiBaseUrl}/collections/hyderabad/tiles/WebMercatorQuad/{z}/{y}/{x}?f=mvt`,
+        `${normalizedBaseUrl}/collections/hyderabad/tiles/WebMercatorQuad/{z}/{y}/{x}?f=mvt`,
       ],
       minzoom: 0,
       maxzoom: 16,

frontend/src/js/norway-hazard-tiles.js

@@ -5,11 +5,16 @@
  */
 function addNorwayHazardTiles(map, apiBaseUrl = "http://localhost:5000") {
   try {
+    // Ensure the apiBaseUrl has proper format (not ending with slash)
+    const normalizedBaseUrl = apiBaseUrl.endsWith("/")
+      ? apiBaseUrl.slice(0, -1)
+      : apiBaseUrl;
+
     // Add vector tiles source for Norway Hazard Points
     map.addSource("norway-hazard-source", {
       type: "vector",
       tiles: [
-        `${apiBaseUrl}/collections/points/tiles/WebMercatorQuad/{z}/{y}/{x}?f=mvt`,
+        `${normalizedBaseUrl}/collections/points/tiles/WebMercatorQuad/{z}/{y}/{x}?f=mvt`,
       ],
       minzoom: 0,
       maxzoom: 15,

frontend/src/js/points-layer.js

@@ -13,8 +13,13 @@ async function addPointsLayer(map, apiBaseUrl = "http://localhost:5000") {
       loading.innerText = "Loading Norway points...";
     }
 
+    // Ensure the apiBaseUrl has proper format (not ending with slash)
+    const normalizedBaseUrl = apiBaseUrl.endsWith("/")
+      ? apiBaseUrl.slice(0, -1)
+      : apiBaseUrl;
+
     // Fetch all points using pagination if necessary
-    const data = await fetchAllPoints(apiBaseUrl, "points");
+    const data = await fetchAllPoints(normalizedBaseUrl, "points");
     console.log(`Total points fetched: ${data.features.length}`);
 
     if (data.features.length === 0) {
@@ -125,14 +130,19 @@ async function fetchAllPoints(apiBaseUrl, collectionId) {
   let offset = 0;
   let hasMoreData = true;
 
+  // Ensure the apiBaseUrl has proper format (not ending with slash)
+  const normalizedBaseUrl = apiBaseUrl.endsWith("/")
+    ? apiBaseUrl.slice(0, -1)
+    : apiBaseUrl;
+
   // Track number of requests to avoid infinite loops
   let requestCount = 0;
   const maxRequests = 1000; // Safety limit
 
   while (hasMoreData && requestCount < maxRequests) {
     requestCount++;
     // Use only the offset parameter in the URL, not limit
-    const url = `${apiBaseUrl}/collections/${collectionId}/items?offset=${offset}`;
+    const url = `${normalizedBaseUrl}/collections/${collectionId}/items?offset=${offset}`;
     console.log(`Fetching: ${url}`);
 
     const response = await fetch(url);

k8s-deployment.yaml

@@ -89,7 +89,7 @@ spec:
           env:
             - name: API_BASE_URL
               # The URL where the backend API is accessible from frontend clients
-              value: "/api"
+              value: "https://tsunami.jye.no/api"
           resources:
             limits:
               cpu: "0.5"

k8s-frontend.yaml

@@ -22,8 +22,8 @@ spec:
           env:
             - name: API_BASE_URL
               # The URL where the backend API is accessible from frontend clients
-              # This should match your ingress/service path for the backend
-              value: "/api"
+              # This should be the full URL including protocol and domain
+              value: "https://tsunami.jye.no/api"
           resources:
             limits:
               cpu: "0.5"