Building a Microfrontend Application with React and Module Federation

Module Federation allows you to dynamically load parts of a web application from independently deployed JavaScript packages. This challenge will guide you in setting up a basic Module Federation architecture with two React applications – a host application and a remote application – demonstrating how they can share components and functionality. This is a powerful technique for building large, complex applications from smaller, more manageable pieces.

Problem Description

You are tasked with creating a simple microfrontend application using React and Module Federation. The application will consist of two React applications:

1. Host Application: This application will act as the main entry point and will load a component from the remote application. It will display a greeting message and a component provided by the remote application.
2. Remote Application: This application will expose a simple React component that displays a user's name. The host application will consume this component.

Key Requirements:

• Module Federation Setup: Configure both the host and remote applications to utilize Module Federation.
• Remote Component Exposure: The remote application must expose a component that can be consumed by the host application.
• Component Consumption: The host application must load and render the exposed component from the remote application.
• Dynamic Loading: The remote application should be loaded dynamically by the host application at runtime.
• Typescript: The entire solution must be written in Typescript.

Expected Behavior:

When the host application is running, it should display a greeting message ("Hello from the Host!") and the user's name, which is provided by the remote application. The remote application should be loaded and rendered without any errors.

Edge Cases to Consider:

• Remote Application Unavailable: While not required for this basic challenge, consider how the host application might handle the scenario where the remote application is unavailable (e.g., network error). This is a good thought exercise for future expansion.
• Version Mismatch: Think about how versioning and compatibility might be handled in a more complex Module Federation setup.

Examples

Example 1:

Input: Host Application running, Remote Application running and exposing a component named 'UserComponent' with a prop 'name' set to "Alice".
Output: The Host Application displays "Hello from the Host!" followed by "Alice".
Explanation: The Host Application successfully loads the UserComponent from the Remote Application and renders it with the provided name.

Example 2:

Input: Host Application running, Remote Application running and exposing a component named 'UserComponent' with a prop 'name' set to "Bob".
Output: The Host Application displays "Hello from the Host!" followed by "Bob".
Explanation: The Host Application successfully loads the UserComponent from the Remote Application and renders it with the provided name.

Constraints

• Technology Stack: React, Typescript, Webpack (configured for Module Federation).
• Bundling: Use Webpack to bundle both the host and remote applications.
• Development Server: Both applications should be runnable using a development server (e.g., Webpack Dev Server).
• No External UI Libraries: Avoid using external UI libraries (e.g., Material UI, Ant Design) for this challenge. Focus on the core Module Federation concepts.
• Simplicity: The remote application should expose a single, simple component.
• Webpack Configuration: You will need to configure Webpack to enable Module Federation. Ensure the configurations are clear and well-commented.

Notes

• Start by setting up the basic Webpack configurations for both the host and remote applications.
• Pay close attention to the entry and output configurations in Webpack, especially the remoteName and filename properties.
• The host application needs to know the remote application's URL and the name of the exposed component.
• Consider using a shared dependency management strategy (e.g., using a shared package) to avoid duplicate dependencies in both applications. This is a best practice for Module Federation.
• Debugging Module Federation can be tricky. Use your browser's developer tools to inspect network requests and console logs.
• This challenge focuses on the core concepts of Module Federation. Error handling and more advanced features (e.g., dynamic updates) are beyond the scope of this exercise.