Reactive Query and Microfrontend Project with Module Federation

A microfrontend architecture project demonstrating usecase of Reactive Query with module federation with React (host) and Svelte (remote) applications, sharing state via Query Model.

Architecture

• Host App (React): Displays a list of users fetched from JSONPlaceholder API
• Remote App (Svelte): Shows user details in a sliding sidebar
• Shared State: Reactive Query as a model for user data synchronization
• URL Sync: Selected user ID is synced with the browser URL (?user=[id])

Features

• 📦 Reactive Query: Reactive Query as a model for user data synchronization
• 🔄 Module Federation: Webpack 5 module federation for microfrontend architecture
• ⚛️ React Host: Main application with user list
• 🔥 Svelte Remote: Sidebar component for user details
• 📡 Reactive State: RxJS BehaviorSubject for real-time state sharing
• 🔗 URL Synchronization: Browser URL reflects selected user

Project Structure

microfront-reactive-query/
├── host/                 # React host application
│   ├── src/
│   │   ├── App.jsx      # Main React component
│   │   ├── App.css      # Styles
│   │   └── index.js     # Entry point
│   ├── public/
│   │   └── index.html
│   ├── webpack.config.js
│   └── package.json
├── remote-svelte/       # Svelte remote application
│   ├── src/
│   │   ├── UserDetailSidebar.svelte  # Sidebar component
│   │   ├── UserDetailSidebar.js      # React wrapper
│   │   ├── App.svelte                # Standalone app
│   │   └── index.js
│   ├── public/
│   │   └── index.html
│   ├── webpack.config.js
│   └── package.json
├── shared/              # Shared code
│   ├── src/
│   │   ├── user-model.ts  # User model
│   │   └── types.ts       # Shared types
│   ├── package.json
│   └── tsconfig.json
└── package.json         # Root package with scripts

Installation

1. Install dependencies for all projects:

npm install
cd host && npm install
cd ../remote-svelte && npm install
cd ..

Or use the convenience script:

npm run install:all

Running the Project

Development Mode

Start both applications simultaneously:

npm run dev

Or start them individually:

# Terminal 1 - Start the host app (port 3002)
npm run dev:host

# Terminal 2 - Start the remote app (port 3001)
npm run dev:remote

Then open your browser:

• Host App: http://localhost:3002
• Remote App (standalone): http://localhost:3001

How It Works

1. Host Application (React on port 3002):

   • Fetches user list from https://jsonplaceholder.typicode.com/users
   • Stores users in RxJS BehaviorSubject
   • Displays users in a grid layout
   • On user click, updates selected user ID and URL parameter
   • Lazy loads the Svelte sidebar component via Module Federation

2. Remote Application (Svelte on port 3001):

   • Exposes UserDetailSidebar component via Module Federation
   • Subscribes to the shared RxJS store for selected user changes
   • Displays detailed user information in a sliding sidebar
   • Sidebar can be closed by clicking the close button or backdrop

3. Shared Model:

   • Both apps use identical user-model.ts with Reactive Query
   • Real-time synchronization across microfrontends
   • Caching and invalidation strategies are handled by Reactive Query
   • Data is updated in real-time after 5 seconds of with forced strategy

4. URL Synchronization:

   • When a user is selected, URL updates to ?user=[id]
   • On page load, checks URL for initial user selection
   • Enables deep linking and browser history navigation

Technologies Used

• Reactive Query: Reactive Query as a model for user data synchronization
• React 18: Host application framework
• Svelte 4: Remote sidebar component
• Webpack 5: Module Federation and bundling
• JSONPlaceholder: Fake REST API for user data

Module Federation Configuration

Host (React):

remotes: {
  remoteSvelte: 'remoteSvelte@http://localhost:3001/remoteEntry.js'
}

Remote (Svelte):

exposes: {
  './UserDetailSidebar': './src/UserDetailSidebar.js'
}

Customization

• Change API endpoint: Modify the fetch URL in host/src/App.jsx
• Styling: Update CSS files in respective apps
• Port numbers: Change ports in webpack configs
• Sidebar width: Adjust width in UserDetailSidebar.svelte styles

Production Build

cd host && npm run build
cd ../remote-svelte && npm run build

License

MIT