https://github.com/davidmartinperez/micro-frontend-proyect
Proyecto microfrontend con mf en React y Vuejs
https://github.com/davidmartinperez/micro-frontend-proyect
microfrontend module-federation react webpack
Last synced: 3 months ago
JSON representation
Proyecto microfrontend con mf en React y Vuejs
- Host: GitHub
- URL: https://github.com/davidmartinperez/micro-frontend-proyect
- Owner: DavidMartinPerez
- Created: 2023-02-20T20:57:28.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-02-24T14:02:58.000Z (over 3 years ago)
- Last Synced: 2025-03-24T13:21:29.487Z (over 1 year ago)
- Topics: microfrontend, module-federation, react, webpack
- Language: JavaScript
- Homepage: https://d3tbm2e2e0nz60.cloudfront.net/
- Size: 120 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Arquitectura Micro-frontend
| container (React / Host) |||
|-------------------|------------------------ |------------------|
| | **Marketing (React/MF)** | *Home Page* |
| | | *Pricing Page* |
| | | |
| | **Auth (React/MF)** | *Sign In Page* |
| | | *Sign Up Page* |
| | | |
| | **Dashboard (Vuejs/MF)** | *Dashboard Page* |
## Identificación de componentes
Para que se pueda diferenciar a simple vista cada microfrontends tiene un color especifico
* Container - border en rojo
* Marketing - borde en azul
* Auth - border en verde
* Dashboard - border en morado
# Instalación
```
npm run install
```
Esto instalará las dependecias de los mf y host
# Iniciar proyecto en modo desarrollo
```
npm run start
```
Esto levantará todos los mf y el host
Abrir el navegador para ver el [orquestador/container](http://localhost:8080/).
También puedes ver los microfrontends de forma aislada [la app del comercio](http://localhost:8081/)
# Stack utilizado
* Deploy
* Amazon S3 + CloudFront (Servidor)
* Github Action (Cada vez que se despliega nuevo código en un mf se ejecutará un job que solo desplegará el mf modificado)
* Dev
* React
* Vuejs
* Webpack
* Características
* Lazy loading de mf
* Comunicación entre mf
# Url proyecto
[Live project](https://d3tbm2e2e0nz60.cloudfront.net/)