Module Federation with React and Webpack

This is a project scaffold to demonstrate microfrontend architechture with Module Federation and Monorepo.

This is only a Client Side demonstration, however, SSR is also possible

The project utilizes the power of Typescript

What's inside?

This turborepo uses Yarn as a package manager. It includes the following packages/apps:

Apps and Packages

• notes: A React Federated application serving as a host-app.
• modules: Another federated React app, can be considered a Micro Frontend.
• config: Shared configuration files inlcuding eslint, prettier, tailwindcss.
• tsconfig: tsconfig.jsons used throughout the monorepo
• lib: Mainly a store package, shared statewith Zustand.
• ui: UI library and a design system built with Tailwindcss, Headless UI and React.
• storybook: Not entirely finished.

Local Development

To develop all apps and packages, run the following command:

git clone https://github.com/davlet61/frontend-demo.git
cd frontend-demo
yarn
yarn dev

Notes will be available at localhost:3000 and Modules at localhost:3001 You can also access Stories at localhost:6006

Build

To build all apps and packages, run the following command:

cd frontend-demo
yarn build

and to run it:

yarn start