skybridge/web/README.md

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

cd web
npm install

Development

Start the shell (runs on port 3000):

npm start

Start the KMS federated app (runs on port 3001):

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:

   exposes: {
     './App': './src/YourApp',
     './SearchProvider': './src/SearchProvider', // Optional
   }
   

3. Update shell configuration in web/craco.config.js:

   remotes: {
     kms: 'kms@http://localhost:3001/remoteEntry.js',
     yourapp: 'yourapp@http://localhost:3002/remoteEntry.js',
   }
   

4. Create a loader component similar to LoadKMS.tsx:

   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:

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