This project is a React application that serves as a host for microfrontend components. It is built using Rspack for fast builds and leverages Module Federation to consume remote applications.
- Microfrontend Host: Acts as the shell application orchestrating remote microfrontends.
- Remote Integration: Consumes a remote Angular component (
angularRemote) exposed as a Web Component. - Rspack: High-performance bundler compatible with the Webpack ecosystem.
- Tailwind CSS: Utility-first CSS framework for rapid UI development.
- Custom Theming: Uses CSS variables defined in
src/variables.cssfor consistent theming across the application.
- Framework: React 19
- Bundler: Rspack
- Styling: Tailwind CSS v4, PostCSS
- Routing: TanStack Router
- Micro Architecture: Module Federation
- Node.js (Latest LTS recommended)
- npm
- Clone the repository.
- Install dependencies:
npm installTo start the development server:
npm run devThe application will be available at http://localhost:8080.
Important
Ensure the remote Angular application is running on http://localhost:4200 to load the remote component successfully.
To build the application for production:
npm run buildThis commands compiles the application using Rspack into the dist directory.
To preview the production build locally:
npm run previewThe Module Federation configuration is located in rspack.config.ts.
new ModuleFederationPlugin({
name: 'react_app',
remotes: {
angularRemote: 'angularRemote@http://localhost:4200/remoteEntry.js',
},
// ...
});The application uses custom CSS variables for theming. These are defined in src/variables.css and can be customized to change the look and feel of the application.