This Nx monorepo is an example of Module Federation using Remix and RSPack in an Nx monorepo. The host app consumes two different remote apps called remote1 and remote2.
This repository demonstrates how to set up and use Module Federation with Remix and RSPack in an Nx monorepo. The host application dynamically loads and integrates modules from two remote applications, remote1 and remote2.
Module Federation is a feature of Webpack 5 that allows multiple independent builds to form a single application. Each build can expose and consume modules from other builds at runtime. This enables micro-frontends architecture, where different parts of an application can be developed and deployed independently.
Ensure you have the following installed on your machine:
- Fork and Clone the Repository
- Install Dependencies
To run the host application:
yarn nx serve hostTo enable hot reload for the remote applications:
yarn nx serve host --devRemotes="remote1,remote2"To verify that Module Federation is working correctly, follow these steps:
- Fork and Clone the Repository
- Install Dependencies
- Run the Host Application
- Make Changes to a Remote Application
Open any file in remote1 or remote2, make some changes, and save the file. For example, you can modify Remote1.tsx.
- Build the Remote Application
- Verify Changes in the Host Application
The host application should automatically pull the changes from the remote application without needing a restart. This demonstrates the dynamic nature of Module Federation, where the host application can consume updates from remote applications at runtime.
Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.
This project is licensed under the MIT License. See the LICENSE file for details.