In this repository is the result of creating a Micro Frontend using Webpack 5 Module Federation from my 2022 Perspektywy Women in Tech Summit Talk.
- Created a Host application (
host-app
) with React, JavaScript and CSS using create-mf-app. - Created a Remote application (
remote-app
) with React, JavaScript and CSS using create-mf-app, and added a Counter component. - Exposed the Remote application's Counter module using Webpack 5 ModuleFederationPlugin in
webpack.config.js
so that ourhost-app
can access it. - Configured Host application's Webpack 5 ModuleFederationPlugin in
webpack.config.js
to reference our remote, and then imported the Counter component into itsApp.jsx
to render it.
- cd into the root of the
host-app
directory - run
npm install
- run
npm start
- Your browser should now show the host-app running on http://localhost:8080
- cd into the root of the
remote-app
directory - run
npm install
- run
npm start
- Your browser should now show the remote-app running on http://localhost:8181