Sure, here's a nice README.md document for your Proof of Concept (PoC) Git repository where you're applying the concepts of Micro Front-ends in Angular using Module Federation inside a monorepo workspace:
This repository serves as a Proof of Concept (PoC) for implementing Micro Front-ends (MFEs) in an Angular application using Module Federation within a monorepo workspace. It demonstrates how to create a shell application and a remote application, as well as a shared library for components and services.
The monorepo workspace consists of the following projects:
-
shell-app: The main application that serves as the container for the Micro Front-ends. This app is responsible for orchestrating the integration of different MFEs.
-
mfe-app: A remote application that can be integrated into the
shell-appas a Micro Front-end. This app is built separately and can be deployed independently. -
shared-lib: A shared library that contains common components and services that can be used across the
shell-appandmfe-app.
To get started with this PoC, follow these steps:
-
Clone the repository:
git clone https://github.com/your-repo/angular-mfe-poc.git
-
Install dependencies:
cd angular-mfe-poc npm install -
Build the shared library:
npm run build:shared-lib
-
Start the development server for the
shell-app:npm run start:shell-app
-
In a separate terminal, start the development server for the
mfe-app:npm run start:mfe-app
-
Open your browser and navigate to
http://localhost:4200to see theshell-apprunning with the integratedmfe-app.
This PoC leverages the Module Federation feature of Webpack 5 to enable the integration of Micro Front-ends. The shell-app acts as the host application, while the mfe-app is exposed as a remote application.
The configuration for Module Federation is defined in the respective project's webpack.config.js files. The shell-app imports the mfe-app as a remote module, allowing it to render the components and use the services provided by the mfe-app.
The shared-lib project contains common components and services that can be used across the shell-app and mfe-app. This helps in maintaining consistency and reducing code duplication across different applications in the monorepo.
To use a component or service from the shared-lib in either the shell-app or mfe-app, simply import it into the respective project and use it as needed.
While this PoC focuses on the development workflow, you can deploy the shell-app and mfe-app separately in a production environment. The shared-lib can be published to a private npm registry and consumed by both applications.
If you'd like to contribute to this PoC or report any issues, please open an issue or submit a pull request on the GitHub repository.
This project is licensed under the MIT License.