pixelybets-app

Using single-spa you can create a micro service front-end and enable multiple applications to work in concert in a unified experience.
Each MFE has a seperate pipeline (github > travis ci > AWS S3)
ObservableStore (https://github.com/danwahlin/observable-store) has been added to service the need for cross MFE comms (Think BFFs on the Client)

Full architecture outlined:

https://github.com/pixelypants/pixelybets-app/blob/master/MFE_Architecture_Jan2020.pdf

Coding standards disclaimer:

This project is a work in progress and is focused on learning the big picture concepts of MFEs and not low level syntax (e.g. code standards and consistency have not been given any attention yet)

Roadmap

Integrate framework agnostic component lib https://github.com/pixelypants/pixely-ui

Add service worker for PWA caching https://developers.google.com/web/tools/workbox

Use Rollup for a new MFE to learn how it works https://github.com/rollup/rollup

External applications

pixelybets-mfe-navbar - https://github.com/pixelypants/pixelybets-mfe-navbar
pixelybets-mfe-sports - https://github.com/pixelypants/pixelybets-mfe-sports
pixelybets-mfe-betslip - https://github.com/pixelypants/pixelybets-mfe-betslip
pixelybets-store-betslip - https://github.com/pixelypants/pixelybets-store-betslip
pixelybets-store-sports - https://github.com/pixelypants/pixelybets-store-sports

Technologies

Versions of node/npm

Node v8.10.0 npm 6.1.0

Installation and setup

Clone the repo
run yarn start
Open running code at http://localhost:8233/

Notes

I reverse engineered Justin McMurdies single-spa-portal-example (https://gitlab.com/TheMcMurder/single-spa-portal-example) to learn how a MFE architecture works in the real world.

Please see: https://gitlab.com/TheMcMurder/single-spa-portal-example/blob/master/README.md