Getting started with micro-frontends and module federation with React and Vite
The idea is that the application is separated into several independently deployable frontend modules. Each module is maintained by a separate team. The app module is the host module that imports components exposed by the other remote modules.
Overview and relationship of modules:
dashboard (host, vite)
├── customers (remote, vite)
├── orders (remote, cra/webpack)
└── products (remote, vite)
In order to test the integration of the different modules, each module needs to be started in preview mode. In the regular dev mode, the module federation will not be enabled, thus the exposed bundles won't be available.
Install all dependencies
npm install
Build all packages:
npm run build
Run the shopping cart module in preview mode:
cd packages/customers
npm run preview
Run the products module in preview mode:
cd packages/products
npm run preview
Run the orders module in preview mode:
cd packages/orders
npm run preview
Run the host app in preview mode:
cd packages/dashboard
npm run preview
# Alternatively run in development mode (with hot reload)
# npm run dev
- How do I add shared TS types to be reused by remotes and host?
- Read remote URL's from environment variables (how to deal with different environments?)
- Should the remotes simply expose components for the host to import or should they host a fully fledged UI as well?
- Error handling when a remote module goes down?
- Failsafe mechanisms such as re-attempting to fetch the remote?
- Rendering a fallback component/element if imported remote component is not available?
- You can use error boundaries around imported remote components and render a fallback -> how to do this consistently?
- Experiment with a remote module written in another technology (e.g. Angular or Svelte)