https://github.com/nashaddams/mfe
Proof of concept implementation for micro frontends
https://github.com/nashaddams/mfe
deno mfe micro-frontends react react-router web-components
Last synced: 3 months ago
JSON representation
Proof of concept implementation for micro frontends
- Host: GitHub
- URL: https://github.com/nashaddams/mfe
- Owner: nashaddams
- Created: 2024-12-07T21:22:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-18T12:18:02.000Z (10 months ago)
- Last Synced: 2025-08-18T14:22:33.303Z (10 months ago)
- Topics: deno, mfe, micro-frontends, react, react-router, web-components
- Language: TypeScript
- Homepage:
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Micro frontends with `Deno`
This repository contains a proof of concept implementation for
[micro frontends](https://martinfowler.com/articles/micro-frontends.html). Any
custom element can be imported to the _shell_ as long as it provides a `default`
exported `HTMLElement`.
## Structure
```sh
┌── services/
│ ├── service-1 # micro frontend 1
│ └── service-2 # micro frontend 2
├── shared/ # shared UI elements, bundling & server
└── shell/ # shell composing the mirco frontends
```
## Run
```sh
service-1 $ deno task run # start the service on port 8001
service-2 $ deno task run # start the service on port 8002
shell $ deno task run # start the shell on port 8000
```
## Stack
- Custom elements
- [`r2wc`](https://github.com/bitovi/react-to-web-component)
- Inter-service communication
- [`CustomEvent`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)
- User interface
- [`react`](https://github.com/facebook/react)
- [`react-router`](https://github.com/remix-run/react-router)
- [`styled-components`](https://github.com/styled-components/styled-components)
- [`esbuild-deno-loader`](https://github.com/lucacasonato/esbuild_deno_loader)
- Server
- [`Deno`](https://github.com/denoland/deno)
- [`Hono`](https://github.com/honojs/hono)