How to Run Micro Front-end Apps using Webpack Module Federation
As a means of building web applications that are more scalable and maintainable, micro front-end architecture has become increasingly popular. Webpack Module Federation makes it easy to share code and communicate between applications, so it’s great for building micro front-end apps. The purpose of this article is to explore how Webpack Module Federation can be used to run micro front-end applications.
Prerequisites
Here’s what you need on your machine before getting started:
- Node.js and npm
- Webpack 5
- Webpack Module Federation plugin
Creating Your Micro Front-End Apps
The first step in building micro front-end apps is to create a new project for each app. You can use any front-end framework you prefer, such as React, Vue, or Angular. Here, we will use React as an example.
- Create a new React project:
npx create-react-app my-app
2. Install the Webpack Module Federation plugin:
npm install --save-dev webpack webpack-cli webpack-dev-server
3. Configure the Webpack Module Federation plugin in your React project by creating a webpack.config.js
file in the root directory of your project with the following code:
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
mode: 'development',
devServer: {
port: 3001,
},
plugins: [
new ModuleFederationPlugin({
name: 'remote_app',
filename: 'remoteEntry.js',
exposes: {},
remotes: {
'my_app': 'my_app@http://localhost:3000/remoteEntry.js',
},
shared: {
react: {
singleton: true,
},
'react-dom': {
singleton: true,
},
},
}),
],
};
In this configuration file, we are specifying that we want to expose the Button
component in our application and share the react
and react-dom
libraries with other applications.
4. Start your React application:
npm start
5. Repeat steps 1–4 for each micro front-end app you want to create.
Running Your Micro Front-End Apps
With your micro front-end apps created, you can now run them using Webpack Module Federation.
- Start each application individually:
cd my-app
npm start
cd ../my-other-app
npm start
Make sure that each application is running on a different port.
2. In your main application, import the remote component from the other application:
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'my_other_app/Button';
function App() {
return (
<div>
<Button />
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
In this example, we are importing the Button
component from the my_other_app
application and rendering it in our main application.
3. Run your main application:
cd my-main-app
npm start
With your main application running, you should be able to see the Button
component from the other application rendered on the page.
Conclusion
This article explored how to use Webpack Module Federation to run micro front-end apps. By following these steps, you can easily share code and communicate between applications, making it easier to build scalable and maintainable micro front-end apps.