Skip to content

4rw44z/shell

Repository files navigation

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:

Angular Micro Front-ends PoC

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.

Overview

The monorepo workspace consists of the following projects:

  1. 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.

  2. mfe-app: A remote application that can be integrated into the shell-app as a Micro Front-end. This app is built separately and can be deployed independently.

  3. shared-lib: A shared library that contains common components and services that can be used across the shell-app and mfe-app.

Getting Started

To get started with this PoC, follow these steps:

  1. Clone the repository:

    git clone https://github.com/your-repo/angular-mfe-poc.git
  2. Install dependencies:

    cd angular-mfe-poc
    npm install
  3. Build the shared library:

    npm run build:shared-lib
  4. Start the development server for the shell-app:

    npm run start:shell-app
  5. In a separate terminal, start the development server for the mfe-app:

    npm run start:mfe-app
  6. Open your browser and navigate to http://localhost:4200 to see the shell-app running with the integrated mfe-app.

Module Federation

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.

Shared Library

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.

Deployment

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.

Contributing

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.

License

This project is licensed under the MIT License.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published