sasoria / microfrontend-modules-demo

Client-side composition of microfrontends

Microfrontend-modules-demo

This demo takes advantage of EcmaScript Modules (ESM) to do client-side composition of microfrontends. Express is used for serving assets, but ideally one would have a dedicated asset server handling it (see eik.dev).

Features

• Client-side composition of microfrontends
• Client-side routing that consist of one or more microfrontends

Usage

• Build each microfrontend with npm run build
• Start each microfrontend with npm run server
• Start the shell with npm start

The app should now be available on http://localhost:8080.

Shared dependencies

Each app shares react dependencies through absolute ESM imports that are cached in the browser. They attempt to fetch both react and react-dom from Skypack, thus reducing the bundle size considerably.

microfrontend-modules-demo's Issues

Add more applications

Add two more applications to make the demo more complete (app-c, app-d).

Hot Module Replacement fails to lazy load two microfrontends in dev mode

There seems to be an issue with HMR when lazy loading two microfrontends in a Suspense block, as only the last one gets loaded in dev mode. This is temporarily fixed by saving index.js.

Replace express with fastify

Add composite example

Add an example with a page that composes two other apps.