/react-dynamic-mfe

Primary LanguageTypeScript

react-dynamic-mfe

This app is a simple example of how to create a dynamic micro frontend architecture using React and Webpack Module Federation.

It contains 3 different frontends:

  • consumer: The main app that consumes the other frontends.
  • producer-a: A simple frontend that exports a component module-a.
  • producer-b: A simple frontend that exports a component module-b.

How to run

  1. Install dependencies in each app folder:
npm install
  1. build and preview the producer apps producer-a and producer-b:
npm run build && npm run preview
  1. build and start the consumer app:
npm run dev
  1. Open your browser at the displayed URL and you should see the consumer app consuming the producer apps.