Skip to content

react-vite-rspack-webpack

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

react-vite-rspack-webpack

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
host
host
 
 
remote
remote
 
 
rspack
rspack
 
 
webpack
webpack
 
 
.gitignore
.gitignore
 
 
image.png
image.png
 
 
package.json
package.json
 
 
pnpm-workspace.yaml
pnpm-workspace.yaml
 
 
readme.md
readme.md
 
 

readme.md

name React Multi-Bundler Module Federation
slug module-federation/react-vite-rspack-webpack
description Module Federation across Vite, Rspack, and Webpack bundlers, deployed with Zephyr Cloud
framework react
bundler webpack
features
module-federation
complexity advanced

React Micro-Frontend Example

A comprehensive micro-frontend setup demonstrating Module Federation with multiple bundlers working together.

Host Application

Technology Stack

  • Framework: React 18
  • Architecture: Module Federation
  • Host Application: Vite
  • Remote Applications:
    • Vite Remote (TypeScript)
    • Rspack Remote
    • Webpack Remote
  • Deployment: Zephyr Cloud

Prerequisites

  • Node.js (version 16 or higher)
  • pnpm (required for workspace management)

Project Structure

This example consists of multiple applications:

  • host/ - Main host application built with Vite
  • remote/ - Remote application built with Vite
  • rspack/ - Remote application built with Rspack
  • webpack/ - Remote application built with Webpack

Getting Started

  1. Install dependencies

    pnpm install

  2. Build all applications (in order)

    pnpm --filter=vite_remote build
pnpm --filter=vite_rspack build
pnpm --filter=vite_webpack build
pnpm --filter=vite-host build

    Or use the convenience script:

    pnpm build

  3. Development mode Each application can be run independently:

    # Host application (port 5173)
cd host && pnpm dev

# Remote applications
cd remote && pnpm dev    # port 5174
cd rspack && pnpm dev    # port 8080
cd webpack && pnpm dev   # port 3000

    Development URLs:

Zephyr Cloud Integration

This example demonstrates advanced micro-frontend deployment with Zephyr Cloud, showing how different bundlers can work together seamlessly in a federated architecture.

About Module Federation

Module Federation allows multiple JavaScript applications to share components and dependencies at runtime. This example shows:

  • Multi-bundler compatibility: Different remotes using different bundlers
  • Runtime composition: Components loaded dynamically at runtime
  • Independent deployment: Each remote can be deployed separately

About Zephyr Cloud

Zephyr Cloud is a micro-frontend deployment platform that provides:

  • Auto-deployment: Seamless deployment from your build process
  • Live preview links: Instant preview URLs for your applications
  • SemVer versioning: Semantic versioning for your frontend modules
  • Rollback capabilities: Easy rollback to previous versions
  • Enterprise-scale orchestration: Built for composable frontend systems

Learn More