In the previous guide, we built the Shell Project — the central container that hosts and manages micro frontends. If you missed it, check out Setting Up the Shell Project for React Micro Frontends to get started.
Now, it’s time to build our first Remote Project — the independent micro frontend that the Shell will load dynamically using Webpack Module Federation.
By the end of this post, you’ll have a working remote React app that connects seamlessly with your Shell.
Step 1: Create a React App for the Remote
Just like we did with the Shell, let’s create a new React app for our remote micro frontend:
npx create-react-app mfe1
This will scaffold a fresh React project called mfe1 with all the basics in place.
Step 2: Install and Configure html-webpack-plugin
Just like we did with the Shell, our Remote app also needs Webpack to generate the index.html file and inject the bundled JavaScript automatically. This is especially important because the Remote will expose components that the Shell will later consume.
Let’s add html-webpack-plugin to the Remote project:
npm install --save-dev html-webpack-plugin
Step 3: Configure Module Federation in the Remote App
Now let’s expose modules from the Remote so the Shell can load them dynamically. We’ll add Module Federation to the Remote’s Webpack config.
// webpack.config.js (Remote: mfe1)
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const path = require("path");
module.exports = {
entry: "./src/index.js",
mode: "development",
devServer: {
port: 3001,
historyApiFallback: true,
},
output: {
publicPath: "http://localhost:3001/",
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: { presets: ["@babel/preset-react"] },
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
resolve: {
alias: {
"@shared": path.resolve(__dirname, "../shared-lib/src"),
},
extensions: [".js", ".jsx"],
},
plugins: [
new ModuleFederationPlugin({
name: "mfe1",
filename: "remoteEntry.js",
exposes: {
"./Test": "./src/Test.jsx",
},
shared: {
react: { singleton: true },
"react-dom": { singleton: true },
"react-router-dom": { singleton: true },
},
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
],
};
What this does (quickly):
-
name & filename: Identifies the Remote and emits
remoteEntry.jsfor the Shell to load. -
exposes: Makes your module (e.g., ./src/entry.routes.jsx) importable as
mfe1/Routes. - shared: Ensures a single copy of React/ReactDOM/Router across apps.
- publicPath: Points to where the Remote serves assets at runtime.
Step 4: Bootstrap Your App for Module Federation
Just like the shell, your remote app also needs a clean way to handle startup logic. By separating the rendering process into a bootstrap.js file, we make sure that Module Federation can load and mount the app properly without conflicts.
- Create a bootstrap.js file inside src/
// src/bootstrap.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
- Update index.js
// src/index.js
import('./bootstrap');
Step 5: Clean Up index.html and App.js
Before we move on, let’s tidy up the default files that come with Create React App in the Remote App. Cleaning up unnecessary code will help us focus only on the essentials.
- Optimize public/index.html: Remove the default comments and metadata. Here’s a simplified version tailored for the Remote App.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Micro Frontend Remote App" />
<title>Remote App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
- Simplify App.js: Now, update App.js to make it simple and clear.
import React from "react";
function App() {
return (
<div>
<h1>Welcome to the Remote App</h1>
</div>
);
}
export default App;
Step 6: Create a Test Component to Expose
Now, let’s create a simple component inside the Remote App that we’ll later expose to the Shell App.
Create a new file src/Test.jsx and add the following code:
import React from "react";
export default function Test() {
return (
<>
<h1>Test from Remote App</h1>
</>
);
}
Step 7: Run the Remote App
With everything set up, it’s time to run the Remote App and make sure it works properly.
npm start
By default, the Remote App will run on http://localhost:3001
. You should see the welcome message when the app loads in the browser.
Here's a quick preview of what it looks like in the browser:
✅ Great job! You’ve successfully built and configured your first Remote App for Micro Frontends using Module Federation.
This is just the beginning — in the next steps, you’ll connect this Remote App to the Shell and actually consume the exposed Test component.
Keep going. The exciting part starts now! 🚀
Top comments (0)