-

web/src/components/AppLoader.tsx

@@ -6,6 +6,7 @@ import Breadcrumbs from './Breadcrumbs';
 
 const DemoApp = React.lazy(() => import('demo/App'));
 const KMSApp = React.lazy(() => import('kms/App'));
+const FaaSApp = React.lazy(() => import('faas/FaaSApp'));
 
 const AppLoader: React.FC = () => {
   const { appName } = useParams<{ appName: string }>();
@@ -44,6 +45,12 @@ const AppLoader: React.FC = () => {
             <KMSApp />
           </Suspense>
         );
+      case 'faas':
+        return (
+          <Suspense fallback={<LoadingFallback />}>
+            <FaaSApp />
+          </Suspense>
+        );
       default:
         return (
           <ErrorFallback 

web/src/components/Navigation.tsx

@@ -4,6 +4,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import {
   IconDashboard,
   IconKey,
+  IconFunction,
 } from '@tabler/icons-react';
 
 const Navigation: React.FC = () => {
@@ -22,6 +23,11 @@ const Navigation: React.FC = () => {
       icon: IconKey,
       path: '/app/kms',
     },
+    {
+      label: 'Functions',
+      icon: IconFunction,
+      path: '/app/faas',
+    },
   ];
 
   // Define which apps are favorited (you could make this dynamic later)

web/webpack.config.js

@@ -47,6 +47,7 @@ module.exports = {
       remotes: {
         demo: 'demo@http://localhost:3001/remoteEntry.js',
         kms: 'kms@http://localhost:3002/remoteEntry.js',
+        faas: 'faas@http://localhost:3003/remoteEntry.js',
       },
       shared: {
         react: {