React MFE in Angular Host Application

This project is an example of how to integrate a Micro Frontend (MFE) built in React as a remote inside an Angular host application using Module Federation.

---

🏁 Quick Start

1. Start the Angular shell (requires remote already built)

npx nx serve wc-ng-shell

Starts the Angular host application (wc-ng-shell). The React remote must be previously built.

2. Serve the React remote in development mode

npx nx serve wc-react-remote

Starts the development server for the React remote MFE with hot reload.

---

⚙️ Build Commands

• Build the Angular host:

  npx nx build wc-ng-shell

  Builds the Angular host application for production or integration.

• Build the React remote:

  npx nx build wc-react-remote

  Builds the React remote MFE for production.

---

📂 Relevant Structure

• wc-react-remote/src/remote-entry.tsx
  Entry point for the React MFE.
• wc-react-remote/module-federation.config.ts
  Module Federation configuration for the React remote.
• ng-shell/module-federation.config.ts
  Module Federation configuration for the Angular host.
• ng-shell/src/app/app.component.ts
  Main component of the Angular host.
• ng-shell/src/app/app.component.html
  Main template of the Angular host.

---

💡 Tips & Best Practices

• Local development:
  You can run both servers (wc-ng-shell and wc-react-remote) in parallel for local development.
  Open two terminals and run the serve/build commands as needed.

• Remote configuration:
  Make sure the remote URLs are correctly set in both module-federation.config.ts files.

• Hot Reload:
  The React remote supports hot reload using the serve command.

• Debugging:
  If you have issues loading modules, check the browser console and port configuration.

---

📚 Covered Topics

• Angular uses Webpack to build the host.
• React uses Rspack to build the remote.
• Practical example of Angular + React integration via Module Federation.

---