module federation

2025-08-26 20:32:13 -04:00
parent a7d5425124
commit 2772dcc966
46 changed files with 52051 additions and 103 deletions
--- a/web/README.md
+++ b/web/README.md
@ -0,0 +1,179 @@
+# Skybridge Platform Shell
+
+A module federated React platform that provides a unified shell for multiple applications, similar to AWS Console.
+
+## Features
+
+- **Module Federation**: Apps are loaded as federated modules
+- **Tab-based Navigation**: Each application appears as a tab
+- **Global Search**: Federated search across all applications
+- **Timezone Clocks**: PST, EST, CST, and IST clocks in the header
+- **User Management**: User dropdown with logout functionality
+- **Extensible**: Easy to add new federated applications
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 24+
+- npm 11+
+
+### Installation
+
+```bash
+cd web
+npm install
+```
+
+### Development
+
+Start the shell (runs on port 3000):
+
+```bash
+npm start
+```
+
+Start the KMS federated app (runs on port 3001):
+
+```bash
+cd ../kms/kms-frontend
+npm install
+npm start
+```
+
+## Architecture
+
+### Shell Application (`web/`)
+
+- **Port**: 3000
+- **Role**: Host application that loads federated modules
+- **Components**:
+  - `ShellHeader`: Global navigation with search and timezone clocks
+  - `AppContainer`: Tab-based container for federated applications
+  - `GlobalSearch`: Federated search across all applications
+  - `TimeZoneClock`: Multi-timezone display
+  - `UserDropdown`: User management interface
+
+### KMS Application (`kms/kms-frontend/`)
+
+- **Port**: 3001
+- **Role**: Federated module providing KMS functionality
+- **Exposes**:
+  - `./App`: Main KMS application component
+  - `./SearchProvider`: Search functionality for KMS data
+
+## Adding New Applications
+
+To add a new federated application:
+
+1. **Create the application** with module federation configuration
+2. **Expose components** in `craco.config.js`:
+   ```javascript
+   exposes: {
+     './App': './src/YourApp',
+     './SearchProvider': './src/SearchProvider', // Optional
+   }
+   ```
+
+3. **Update shell configuration** in `web/craco.config.js`:
+   ```javascript
+   remotes: {
+     kms: 'kms@http://localhost:3001/remoteEntry.js',
+     yourapp: 'yourapp@http://localhost:3002/remoteEntry.js',
+   }
+   ```
+
+4. **Create a loader component** similar to `LoadKMS.tsx`:
+   ```typescript
+   const YourApp = React.lazy(() => import('yourapp/App'));
+   
+   const LoadYourApp: React.FC = () => {
+     const { registerApp } = useApp();
+     
+     useEffect(() => {
+       registerApp({
+         id: 'yourapp',
+         name: 'Your App',
+         path: '/yourapp',
+         component: YourApp,
+         searchProvider: yourSearchProvider, // Optional
+       });
+     }, [registerApp]);
+     
+     return null;
+   };
+   ```
+
+5. **Include the loader** in the main App component
+
+## Search Integration
+
+Applications can provide search functionality by exposing a search provider:
+
+```typescript
+export const yourSearchProvider = async (query: string): Promise<SearchResult[]> => {
+  // Implement your search logic
+  return [
+    {
+      id: 'result-1',
+      title: 'Search Result',
+      description: 'Description of the result',
+      appId: 'Your App',
+      action: () => {
+        // Navigate to result
+      }
+    }
+  ];
+};
+```
+
+## Configuration
+
+### Ports
+
+- Shell: 3000
+- KMS: 3001
+- Future apps: 3002+
+
+### Environment
+
+The shell includes:
+
+- **React 19** with TypeScript
+- **Ant Design 5.27** for UI components
+- **Module Federation** for app loading
+- **React Router** for routing
+- **Moment Timezone** for clock functionality
+
+## File Structure
+
+```
+web/
+├── src/
+│   ├── components/
+│   │   ├── AppContainer.tsx      # Tab container
+│   │   ├── GlobalSearch.tsx      # Federated search
+│   │   ├── ShellHeader.tsx       # Main header
+│   │   ├── TimeZoneClock.tsx     # Timezone display
+│   │   ├── UserDropdown.tsx      # User menu
+│   │   └── LoadKMS.tsx           # KMS app loader
+│   ├── contexts/
+│   │   └── AppContext.tsx        # Global app state
+│   ├── types/
+│   │   ├── index.ts              # Type definitions
+│   │   └── federated.d.ts        # Module federation types
+│   ├── App.tsx                   # Main app component
+│   └── index.tsx                 # Entry point
+├── public/
+├── craco.config.js               # Module federation config
+├── package.json
+└── README.md
+```
+
+## Development Notes
+
+- Applications run on separate ports and are loaded dynamically
+- Shared dependencies (React, Ant Design) are singleton across all apps
+- Each application maintains its own routing under its path prefix
+- Global search aggregates results from all registered applications
+- User state is managed globally in the shell