Update configuration handling for webapp using JSON

deploy/k8s/emptydir-volume/webapp/configmap.yaml

@@ -4,5 +4,12 @@ metadata:
   name: devcamper-webapp-configmap
   namespace: devcamper-namespace
 data:
-  react_app_devcamper_base_api_dev_uri: 'http://localhost:5000/api/v1'
-  react_app_devcamper_base_api_prod_uri: 'http://devcamper.webapi/api/v1'
+  devcamper-config-json: |
+    {
+      "development": {
+        "react_app_devcamper_base_api_uri": "http://localhost:5000/api/v1"
+      },
+      "production": {
+        "react_app_devcamper_base_api_uri": "http://devcamper.webapi/api/v1"
+      }
+    }

deploy/k8s/emptydir-volume/webapp/deployment.yaml

@@ -30,7 +30,8 @@ spec:
               cpu: '1'
           volumeMounts:
             - name: config-volume
-              mountPath: /app/config
+              mountPath: /app/build/config/config.json # /app/build is the path where the app is deployed. Check the Dockerfile of the webapp where node server is monitoring build folder and app is the working directory. Ensures that the mountPath is set to the full path where the config.json file should be placed.
+              subPath: devcamper-config-json # this is the key in the configmap data section
       volumes:
         - name: config-volume
           configMap:

src/webapp/src/utils/configService.js

@@ -1,16 +1,16 @@
+let config = null;
 export const fetchConfig = async () => {
-  const configDir = '/config';
-  const env = process.env.NODE_ENV || 'development';
-  const configFileName =
-    env === 'production' ? 'react_app_devcamper_base_api_prod_uri' : 'react_app_devcamper_base_api_dev_uri';
-  const apiUri = await fetch(`${configDir}/${configFileName}`).then((res) => res.text());
-
-  const config = {
-    react_app_devcamper_base_api_uri: apiUri.trim(),
-  };
-
-  console.log(`Using configuration for environment: ${env}`);
-  console.log(`Configuration: ${JSON.stringify(config, null, 2)}`);
+  if (!config) {
+    const response = await fetch('/config/config.json');
+    if (!response.ok) {
+      throw new Error('Failed to fetch configuration');
+    }
+    const json = await response.json();
+    const env = process.env.NODE_ENV || 'development';
+    console.log(`Using configuration for environment: ${env}`);
+    console.log(`Configuration: ${JSON.stringify(json[env], null, 2)}`);
+    config = json[env];
+  }
   return config;
 };