Creating React Remote Microfrontend Component

In this article, I will break down the process of creating a React button component and configuring it as a Module Federation remote.

Project Setup

Create a new React project:

npx create-mf-app        

Install dependencies:

cd react-remote 

npm install        

Component Creation

Create the button component:

Make a new file named Button.jsx in the src directory:

import React from 'react';

const Button = () => (
  <button>MFE1 Button</button>
);

export default Button;
        

Add the Button to App.jsx

import Button from './Button';
function App() {
  return (
    <div ....
         ....
         <Button />
    </div>
  );
}

export default App;        

When you start the app, you should see the following:

Module Federation Configuration

Create a webpack configuration file:

1. Create a webpack.config.js file at the root of your React project:

exposes: {'./Button':'./src/Button',},
        

Understanding the Webpack Configuration

• name: The name you'll use to reference your remote component from the Angular host.
• filename: The name of the file that contains the remote component's runtime code.
• exposes: Specifies the components to be made available for sharing.
• shared: Lists dependencies that the remote component and host app will share.

Build and Serve

Build your React remote:

npm run build        

Start a development server:

npm start