dimuthu7/micro-frontend-with-react-vite

Purpose and Entry Points

This is a two-application React product-catalog micro-frontend demo. The host owns catalog navigation and cart state; the remote supplies a product-detail card at runtime through Vite Module Federation. Browser entry points are host/src/main.tsx and remote/src/main.tsx; host orchestration begins in host/src/App.tsx.

Host Shell and State Ownership

host/src/App.tsx is the control boundary for selected-product and cart-count state. It switches between local catalog and detail views, passes product data into the remote-facing detail container, and receives add-to-cart callbacks. host/src/data/products.ts is the host-owned catalog source, while host/src/types/index.ts defines its product contracts.

Catalog Presentation Stage

The initial host view composes application chrome with a local product grid:

• host/src/components/ProductListView.tsx

• host/src/components/ProductList.tsx

• host/src/components/Header.tsx

Product selection flows upward from the list to App.tsx; cart updates flow from host state back into the header. host/src/components/Footer.tsx is shared host chrome.

Remote Detail Integration Boundary

host/src/components/ProductDetailsView.tsx is the federation consumption boundary. It lazy-loads the remote ProductCard, renders it under React Suspense, and isolates remote failures through host/src/components/ErrorBoundary.tsx. Back-navigation is local host behavior via host/src/components/BackButton.tsx.

The remote exports the detail UI from remote/src/components/ProductCard.tsx; its public prop shape is represented in remote/src/types/index.ts. Host-to-remote communication is props; remote-to-host communication is callback invocation, notably for cart additions.

Federation and Runtime Loading

Both Vite builds configure federation in:

• host/vite.config.ts

• remote/vite.config.ts

The host resolves the remote’s remoteEntry.js at runtime and imports the exposed ./ProductCard module only when a product detail is requested. React and React DOM are configured as shared singleton dependencies, allowing the remote component to render in the host React tree rather than carrying an isolated framework runtime.

Deployment and Network Topology

Each app has an independent build-and-serve image:

• host/Dockerfile

• remote/Dockerfile

• docker-compose.yml

Docker Compose runs host and remote services, with the host dependent on the remote. Production artifacts are served by Nginx using host/nginx.conf and remote/nginx.conf; the remote server is responsible for cross-origin access needed by the host’s browser-side federation request. Development uses separate Vite servers, conventionally host on 5173 and remote on 5174.

Material Technology Boundaries

The UI runtime is React 18 with TypeScript, Vite, Tailwind CSS, and component-local CSS for the remote card (remote/src/components/ProductCard.css). Nginx is the static production edge, Docker Compose is the local/container orchestration layer, and the only cross-application external dependency is the remote’s HTTP-served federation manifest and chunks.