Desarrollo de Servicios – Microfrontends

Framework

Angular (CLI 19.x en shell); MFEs cargados por el runtime eter-shell.

Contrato de integración

Definir remoteEntry, rutas, assets y dependencias compartidas; registrar el MFE en el shell por ambiente.

UI/UX

Usar @eter/design-tokens y design system para consistencia visual.

Auth

Delegar en IDR; propagar tokens a APIs ETER/EDI.

Dev

ng serve en cada MFE; hot reload a través del dev-env del shell (puerto 4200).

Observabilidad

Logs y métricas front (errores, latencia); feature toggles por ambiente.

---

Estructura de un microfrontend Angular

eter-personas-frontend/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app-routing.module.ts
│   │   ├── pages/
│   │   ├── components/
│   │   ├── services/
│   │   └── models/
│   ├── assets/
│   ├── environments/
│   │   ├── environment.ts
│   │   └── environment.prod.ts
│   ├── styles.scss
│   ├── main.ts
│   └── index.html
├── docker/
│   ├── dockerfile.dev
│   └── dockerfile.prod
├── Makefile
├── angular.json
├── package.json
├── tsconfig.json
├── env.example
└── README.md

Dockerfiles para microfrontends

Desarrollo – dockerfile.dev

FROM node:24

WORKDIR /app

RUN npm install -g @angular/cli

CMD ["ng", "serve", "--host", "0.0.0.0", "--poll", "2000"]

Producción – dockerfile.prod

FROM node:24 as build

WORKDIR /app
COPY package*.json ./
RUN npm install --omit=dev
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Integración en dev-env

Cada microfrontend se expone como servicio en docker-compose.yml del dev-env:

services:
  personas-frontend:
    image: registry.url/proyecto/eter-personas-frontend-dev:latest
    build:
      context: ./src/eter-personas-frontend
      dockerfile: docker/dockerfile.dev
    ports:
      - "${PERSONAS_FRONTEND_PORT}:4200"
    environment:
      - NODE_ENV=${NODE_ENV}
      - BACKEND_URL=${BACKEND_URL}
    volumes:
      - ./src/eter-personas-frontend:/app
    depends_on:
      - backend

Variables de entorno

En config/env.example del dev-env:

# FRONTEND MICROFRONTENDS
PERSONAS_FRONTEND_PORT=4300
USUARIOS_FRONTEND_PORT=4301

# APLICACIÓN
NODE_ENV=development
BACKEND_URL=http://localhost:8010

Cada microfrontend lee estas variables en sus environment.ts / environment.prod.ts.

Makefile del microfrontend

.PHONY: dev-img push-dev-img prod-img push-prod-img

dev-img:
ifndef IMAGE_NAME
    $(error Uso: make dev-img IMAGE_NAME=registry.io/proyecto/eter-personas-frontend)
endif
    docker buildx build --tag $(IMAGE_NAME)-dev:latest -f docker/dockerfile.dev .

push-dev-img:
ifndef IMAGE_NAME
    $(error Uso: make push-dev-img IMAGE_NAME=registry.io/proyecto/eter-personas-frontend)
endif
    docker push $(IMAGE_NAME)-dev:latest

prod-img:
ifndef IMAGE_NAME
    $(error Uso: make prod-img IMAGE_NAME=registry.io/proyecto/eter-personas-frontend VERSION=x.y.z)
endif
ifndef VERSION
    $(error VERSION es requerida)
endif
    npm install --omit=dev
    docker buildx build --tag $(IMAGE_NAME):$(VERSION) -f docker/dockerfile.prod .

push-prod-img:
ifndef IMAGE_NAME
    $(error Uso: make push-prod-img IMAGE_NAME=registry.io/proyecto/eter-personas-frontend VERSION=x.y.z)
endif
ifndef VERSION
    $(error VERSION es requerida)
endif
    docker push $(IMAGE_NAME):$(VERSION)

Con esto un desarrollador puede: - Clonar el dev-env. - Agregar el repo del MFE como submódulo en src/. - Construir y pushear imágenes dev/prod para integrarlo en el ecosistema.