Module Federation Brownbag

Table of Contents

• Module Federation Brownbag
  • Table of Contents
  • Introduction
  • Project Structure
  • Configuration
  • Installation

Introduction

This repo is meant as PoC for the usage of Microfrontends with Module Federation.

Note

This is not a monorepo.

Project Structure

.
├── .gitignore        # Git Ignore
├── react-remote        # Federated module
├── vue-remote        # Federated module
├── shell         # Host for Federated modules
└── README.md        # Project README

• Under /shell you will find a React frontend that works as a host for the federated modules
• Under /react-remote you will find a React frontend with some widgets exposed as federated modules
• Under /vue-remote you will find a Vue frontend with some widgets exposed as federated modules

Configuration

Every module has:

• .env file to configure the PORT of the Vite server
• A vite.config.ts where the Federated modules are exposed and configured

Installation

Every project should have his own .nvmrc please follow the version described there if you are not already using it.

1. React remote

     cd react-remote
     npm i 
     npm run dev

2. Vue remote

     cd vue-remote
     npm i 
     npm run dev

3. Shell

     cd shell
     npm i 
     npm run dev

4. Now you can open the shell at http://localhost:5175