Skip to content
/ vite-mfe-demo Public template

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

License

Notifications You must be signed in to change notification settings

tobyscott25/vite-mfe-demo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Resources

License

Stars

Watchers

Forks