🔗 Arquitectura de cosasdev.comovas.es

4 frameworks web conviven en un solo dominio usando micro-frontends. Es un laboratorio vivo donde React, Vue, Svelte y Astro trabajan juntos sin compartir build ni dependencias.

🧩 Los 4 componentes

React 18

App Host

/ — SPA principal. Portfolio de prácticas: scroll horizontal, dark/light mode, lectura de Markdown, grids CSS.

Repo: cosasdev-react

Botón Vue

/botonvue/ — Micro-frontend con botón animado SVG. Se carga en un iframe invisible en la esquina de la pantalla.

Repo: cosasdev-vue

Svelte 3

Sandbox Svelte

/svelte/ — Caja de arena interactiva: holamundo, directiva #each, props, sistema de columnas Raster.

Repo: cosasdev-svelte

Astro

Blog Astro

/micro/ — Sitio estático con islas Svelte rehidratadas en cliente. Usa nanostores para estado entre islas.

Repo: cosasdev-astro

🔄 Cómo se conectan

La app React host contiene un <iframe> que carga cada micro-frontend según la ruta. Es aislamiento total: sin conflictos de CSS ni choques de dependencias.

React SPA cosasdev.comovas.es/

→ iframe →

Vue Botón /botonvue/

→ link →

Svelte App /svelte/

↓ ruta /coso ↓

Astro Blog /micro/

La tabla de rutas del iframe, en el index.html:

const microFrontendsByRoute = {
  '/':             '/botonvue/',   // ← Vue (default)
  '/coso':         '/micro/',      // ← Astro site
  '/user-profile': '/svelte/',     // ← Svelte app
};

📐 Detalles técnicos

Path	Framework	Build tool	Función
`/`	React 18	Webpack	SPA host · dark/light mode · scroll · Markdown · grids CSS
`/botonvue/`	Vue 3	Vite	Botón SVG con efecto glow · link a /svelte/
`/svelte/`	Svelte 3	Rollup	Sandbox · #each · props · Raster grid columns
`/micro/`	Astro 1	Astro + Yarn PnP	Blog estático · Svelte islands · nanostores

💡 ¿Por qué micro-frontends?
Cada framework se despliega por separado, sin un monorepo ni build compartido. El patrón <iframe> garantiza aislamiento total: CSS de React no pisa el de Vue, las dependencias de Svelte no chocan con las de Astro. Cada pieza puede evolucionar de forma independiente y usar el stack que mejor convenga.

🗂️ Estructura en el servidor

~/public_html/comovas_cosasdev_ver0/
├── index.html              ← React SPA (host)
├── static/js/              ← bundles Webpack
├── arquitectura.html       ← esta página
├── botonvue/               ← Vue micro-frontend
├── svelte/                 ← Svelte sandbox
└── micro/                  ← Astro static site
    ├── index.html
    ├── blog/
    ├── about/
    └── _astro/             ← assets + islands

← Volver a cosasdev.comovas.es