-

web/src/components/AppLoader.tsx

@@ -3,10 +3,22 @@ import { useParams } from 'react-router-dom';
 import { Loader, Center, Text, Stack, Alert } from '@mantine/core';
 import { IconAlertCircle } from '@tabler/icons-react';
 import Breadcrumbs from './Breadcrumbs';
+import { microFrontends } from '../microfrontends.js';
 
-const DemoApp = React.lazy(() => import('demo/App'));
-const KMSApp = React.lazy(() => import('kms/App'));
-const FaaSApp = React.lazy(() => import('faas/App'));
+// Pre-defined lazy imports for each microfrontend
+// @ts-ignore - These modules are loaded at runtime via Module Federation
+const DemoApp = React.lazy(() => import('demo/src/App'));
+// @ts-ignore - These modules are loaded at runtime via Module Federation
+const KMSApp = React.lazy(() => import('kms/src/App'));
+// @ts-ignore - These modules are loaded at runtime via Module Federation
+const FaaSApp = React.lazy(() => import('faas/src/App'));
+
+// Map app names to components
+const appComponents: Record<string, React.LazyExoticComponent<React.ComponentType<any>>> = {
+  demo: DemoApp,
+  kms: KMSApp,
+  faas: FaaSApp,
+};
 
 const AppLoader: React.FC = () => {
   const { appName } = useParams<{ appName: string }>();
@@ -32,32 +44,21 @@ const AppLoader: React.FC = () => {
   );
 
   const renderApp = () => {
-    switch (appName) {
-      case 'demo':
-        return (
-          <Suspense fallback={<LoadingFallback />}>
-            <DemoApp />
-          </Suspense>
-        );
-      case 'kms':
-        return (
-          <Suspense fallback={<LoadingFallback />}>
-            <KMSApp />
-          </Suspense>
-        );
-      case 'faas':
-        return (
-          <Suspense fallback={<LoadingFallback />}>
-            <FaaSApp />
-          </Suspense>
-        );
-      default:
-        return (
-          <ErrorFallback 
-            error={`Application "${appName}" is not available or not configured.`}
-          />
-        );
+    // Check if the app is registered in our microfrontends registry
+    if (appName && appComponents[appName] && microFrontends[appName]) {
+      const App = appComponents[appName];
+      return (
+        <Suspense fallback={<LoadingFallback />}>
+          <App />
+        </Suspense>
+      );
     }
+    
+    return (
+      <ErrorFallback 
+        error={`Application "${appName}" is not available or not configured.`}
+      />
+    );
   };
 
   return (
@@ -68,4 +69,4 @@ const AppLoader: React.FC = () => {
   );
 };
 
-export default AppLoader;
+export default AppLoader;