React & TypeScript Micro Front-Ends via Webpack Module Federation

This is a little proof of concept that I built to learn more about micro front-ends and Webpack Module Federation, using React & TypeScript.

---

Overview

This project consists of 2 micro front-ends, and 2 apps which utilize components from the micro front-ends in different ways:

• micro1 exposes 2 components: CardAlpha and ContactFormAlpha
• micro2 exposes 1 component: ModalAlpha
• app1 shows a grid of contact info cards (micro1/CardAlpha), which trigger modals (micro2/ModalAlpha) containing a dummy contact form (micro1/ContactFormAlpha).
• app2 shows a list of cards (micro1/CardAlpha), which trigger modals (micro2/ModalAlpha) containing more details.

We are using styled-components to apply different themes to the micro front-ends on each app. This same concept could be implemented using Tailwind CSS as well.

---

Running Locally

This project uses NPM workspaces so all commands can be run at the root of the main project without needing to traverse the subfolders:

1. Ensure you are using the right version of Node (v20) with nvm use
2. Install dependencies with npm install --workspaces

Starting Everything At Once

After installing dependencies, you can start the entire demo with one command using concurrently:

1. npm run start-all
   • app1 runs at http://localhost:3000
   • app2 runs at http://localhost:3001
   • micro1 runs at http://localhost:3030 (only used to expose components)
   • micro2 runs at http://localhost:3031 (only used to expose components)

Starting Each Server Manually

If you prefer starting each dev server individually:

1. Start the micro1 dev server with: npm run start-micro1
2. Start the micro2 dev server with: npm run start-micro2
3. (Optional) Start the app1 dev server with npm run start-app1
4. (Optional) Start the app2 dev server with npm run start-app2

---

Deploying Remotely

This project could pretty easily be deployed to Jamstack hosting environments:

1. Update the remotes the webpack configs for app1 & app2.
   • It would be a good idea to put these into environment variables.
2. Build the packages:
   • To build them all at once, run npm run build-all in the project root.
   • To build individually, run npm run build in each package folder.
   • Builds produce a dist folder in each package folder.