smolskig / micro-frontend-webpack5

Micro FrontEnd structure with Webpack5 and module federation

Webpack 5 micro frontend

This project is a implementation of micro-frontends using webpack 5 module federation

Folders

• Home: A Home app
• Clients: A client app
• Orchestrator: A Navbar app, entry point for the other apps

Module federation

Home and Clients apps share their routes via Webpack module federation, the Orchestrator get this external routes and integrates with his own router

How to run this implementation ?

First of all, you have to clone the monorepo and install all the dependencies, for all the projects.

$ yarn install

then you have to run each one of them in a separate terminal

$ yarn start

The default ports per project config are:

• Orchestrator: 9000
• Clients: 9001
• Home: 9002

🌟 Done! 🌟

Now you just have to open your browser in the url of the orchestrator localhost:9000/