Skip to content

Latest commit

 

History

History
54 lines (38 loc) · 1.74 KB

README.md

File metadata and controls

54 lines (38 loc) · 1.74 KB
Raw

Vite micro-frontend demo

A modern micro-frontend architecture demo in TypeScript using Vite's Module Federatin plugin.

Features in this demo:

  • Lazy-loading of microfrontend
  • Microfrontend has its own isolated development playground
  • Routing and sub-routing with React Router in the parent app and microfrontend
  • Microfrontend has its own 404 page
  • Micro-frontend takes props and has a type definition defined in the parent app
  • Shared component library (Chakra UI) between parent app and microfrontends for UI consistency
  • Error Boundary in parent app to catch errors in microfrontend and display a fallback UI
  • Microfrontend has it's own environment variables

Features to add:

  • Support for multiple environments (development and production)
  • Live demo

Getting started

Pre-requisites

# Install dependencies in both apps
cd parent && npm install && cd ../mfe1 && npm install

Running the parent and micro-frontend locally

# Serve the micro-frontend at http://localhost:5001/
cd mfe1
npm run mfe-preview

# Run the parent app at http://localhost:5000/
cd ../parent
npm run dev

Visit: http://localhost:5000/ and http://localhost:5001/assets/remoteEntry.js

Running the micro-frontend in an isolated dev playground

# Run the micro-frontend playground at http://localhost:5501/
cd mfe1
npm run dev

Visit: http://localhost:5501/

The remoteEntry.js file is not available in this mode because Vite's dev mode is "bundle-less". More info here