https://github.com/alfdocimo/mfe-webpack-module-fed

Basic tests of Webpack 5 module federation + single-spa
https://github.com/alfdocimo/mfe-webpack-module-fed

future-microfrontends mfe-webpack

Last synced: 10 days ago
JSON representation

Basic tests of Webpack 5 module federation + single-spa

• Host: GitHub
• URL: https://github.com/alfdocimo/mfe-webpack-module-fed
• Owner: alfdocimo
• Created: 2020-11-19T14:05:10.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-04-18T20:05:44.000Z (over 3 years ago)
• Last Synced: 2024-10-13T12:26:47.038Z (25 days ago)
• Topics: future-microfrontends, mfe-webpack
• Language: JavaScript
• Homepage: https://schwifty-mfe.netlify.app/
• Size: 500 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# MFE + WP5 + single SPA demo

Live demo 👉 https://schwifty-mfe.netlify.app/

Each package is deployed as an individual module on a CDN a then consumed on the core app

- https://schwifty-search.surge.sh/dist/index.html

- https://schwifty-viewer.surge.sh/dist/index.html

- https://schwifty-shell.surge.sh/dist/index.html

This is _currently_ a monorepo, but the idea is that each package can be separated into its own repo and consumed from a CDN through the core module. It uses Yarn Workspaces to boot up all modules for local development.

## Packages

### Search Module

This module exposes utilities to use the store from `Zustand` along with hooks to get characters, fetch new ones and subscribe to the store. It also exposes the `SearchPanel` which is used to filter the characters. Created in `React` and Zustand

Exposes:

- SearchPanel (component)

- Zustand store (characters, loading, fetchCharacters)

### Viewer Module

This module consumes the store registered on the `search module` and when there are new characters it displays them in cards components. Created in `Svelte`.

Exposes:

- Viewer (component)

Consumes: 

- SearchModule's `store`

### Shell Module

This module facilitates a component to allocate the other modules. Created in `Vue`.

Consumes:

- NA

Exposes:

- Shell (component)

### Core Module

Makes use of the `single-spa` API to register the parcels into place.

Consumes:

- ShellModule/Shell

- SearchModule/SearchPanel

- ViewerModule/View

💡 NOTE: Please keep in mind that this was made for purely educational purposes and it DOES NOT demonstrate usage of best practices for spa's