179 lines
4.5 KiB
Markdown
179 lines
4.5 KiB
Markdown
# 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 |