https://github.com/hanford/bi-directional-mfe
Webpack 5 Microfrontend, with Relay hooks and React Suspense
https://github.com/hanford/bi-directional-mfe
react relay-hooks suspense webpack5
Last synced: 4 months ago
JSON representation
Webpack 5 Microfrontend, with Relay hooks and React Suspense
- Host: GitHub
- URL: https://github.com/hanford/bi-directional-mfe
- Owner: hanford
- Created: 2020-04-12T22:54:54.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T03:16:44.000Z (over 2 years ago)
- Last Synced: 2024-04-13T10:27:44.641Z (about 1 year ago)
- Topics: react, relay-hooks, suspense, webpack5
- Language: JavaScript
- Size: 14.9 MB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Webpack 5 Microfrontend, Relay hooks, React Suspense
This example demos bi-directional hosts each with their own remote components. We're sharing data aware components that use react suspense and relay hooks.
- `app1` exposes a `` component.
- `app2` exposes a `` component, built with `Modal` from app3
- `app3` exposes a `` component.
- `app4` consumes `app1`, `app2`, `app5`, `app6` exposed components, it also shares a router and composes routes from `app6`
- `app5` exposes a `` component.
- `app6` exposes it's router, with `` and `Privacy` components.
- `server` is a shimmed graphql server.
# Running Demo
Run `yarn start`. This will build and serve both `app1`, `app2` and `app3` on ports 3001, 3002 and 3003 respectively. It will also start the graphql server.
- [localhost:3001](http://localhost:3001/)
- [localhost:3002](http://localhost:3002/)
- [localhost:3003](http://localhost:3003/)
- [localhost:3004](http://localhost:3004/)
- [localhost:3005](http://localhost:3005/)
- [localhost:3006](http://localhost:3006/)
- [localhost:4000](http://localhost:4000/graphql)
[Inspiration](https://github.com/mizx/module-federation-examples/tree/master/bi-directional)