userhub-shell

React + Vite shell application for UserHub — the main frontend extracted from a monolithic architecture as part of a micro-frontend POC.

Stack

• Framework: React 18
• Build tool: Vite 5
• Module Federation: @originjs/vite-plugin-federation (host/shell)
• Routing: React Router 6
• HTTP: Axios

Project Structure

├── src/
│   ├── main.jsx               # Entry point
│   ├── App.jsx                # Routes
│   ├── pages/
│   │   ├── Login.jsx
│   │   ├── Dashboard.jsx
│   │   ├── UserList.jsx
│   │   ├── Profile.jsx
│   │   └── Analytics.jsx      # Loads AnalyticsDashboard from remote-app at runtime
│   ├── components/
│   │   ├── Navbar.jsx
│   │   └── ProtectedRoute.jsx
│   └── context/
│       └── AuthContext.jsx
├── vite.config.js             # Shell config — proxy + federation host
└── .env.example

Setup

# 1. Install dependencies
npm install

# 2. Configure environment
cp .env.example .env
# Set VITE_API_URL to your deployed userhub-api URL

# 3. Start development server (port 5000)
npm run dev

Environment Variables

Variable	Required	Description
VITE_API_URL	No	Deployed API base URL (default http://localhost:3001)

Module Federation

This shell is configured as the host that loads the Analytics micro-frontend from remote-app at runtime via /remote/assets/remoteEntry.js.

The proxy rewrites /remote/* → http://localhost:5001 in local dev. In production, update the proxy target (or configure a CDN path) to point to the deployed remote-app URL.

Relationship to userhub-api

The shell proxies all /api/* requests to VITE_API_URL (the userhub-api service). Deploy the API first, then set its URL in .env before building the shell.