improve: add production stage

src/ConfigProvider.js

@@ -0,0 +1,62 @@
+
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+export const ConfigContext = createContext({
+    config: {
+        BACKEND_HOST: null,
+        FRONTEND_HOST: null,
+        KC_CLIENT_ID: null,
+        OIDC_CONFIG: {},
+    },
+    isLoading: true,
+    error: null,
+});
+
+export const useConfig = () => useContext(ConfigContext).config;
+
+const ConfigProvider = ({ children }) => {
+    const [config, setConfig] = useState({
+        BACKEND_HOST: null,
+        FRONTEND_HOST: null,
+        KC_CLIENT_ID: null,
+        OIDC_CONFIG: {},
+    });
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        fetch('/config.json')
+            .then((res) => {
+                if (!res.ok) {
+                    throw new Error(`Failed to fetch config: ${res.statusText}`);
+                }
+                return res.json();
+            })
+            .then((data) => {
+                console.log(data);
+                setConfig(data);
+                setIsLoading(false);
+            })
+            .catch((err) => {
+                console.error("Error fetching config:", err);
+                setError(err);
+                setIsLoading(false);
+            });
+    }, []);
+
+    if (isLoading) {
+        return <div>Loading configuration...</div>;
+    }
+
+    if (error) {
+        return <div>Error loading configuration: {error.message}</div>;
+    }
+
+    return (
+        <ConfigContext.Provider value={{ config, isLoading, error }}>
+            {children}
+        </ConfigContext.Provider>
+    );
+}
+
+export default ConfigProvider;