Skip to content

Latest commit

 

History

History
40 lines (24 loc) · 871 Bytes

README.md

File metadata and controls

40 lines (24 loc) · 871 Bytes
Raw

react-micro-frontend-example

Example of using React in host-remote micro-frontend pattern with Webpack Module Federation

How to use

Run the following commands in the root directory.

yarn
yarn start

Navigate to:

  • http://localhost:3000 for the host app
  • http://localhost:4000 for the remote app

Host App

Pulls <App/> and <Button /> from the remote app and renders them. Example:

const RemoteApp = React.lazy(() => import("Remote/App"));

Remote App

Exposes the modules in a moduleEntry.js file at http://localhost:4000/moduleEntry.js

name: 'Remote'

Exposes:

  • <App />
  • <Button />

Notes

To make this a peer-to-peer pattern you could also expose modules from the Host app and render them in Remote by modifying the host app's webpack config to also expose components and output a moduleEntry.js file.