[INFRASTRUCTURE] F-00.1 — Instalación y Configuración de Laravel + Livewire

Épica: EPIC-00 — Setup e Infraestructura Base

🏷️ Categoría

Categoría: InfrastructureSecundaria: DX / ToolingImpacta en: Equipo Fullstack (Laravel + Livewire)

📦 Dependencias

Punto de inicio — no tiene dependencias previas. Debe completarse antes que cualquier otro backlog.

Prioridad: Must

---

Descripción: Como desarrollador Quiero tener el entorno Laravel 12 + Livewire 3 + Alpine.js configurado y funcionando Para que el equipo pueda empezar a desarrollar componentes sobre una base estable y validada

Criterios de Aceptación (Checklist):

• [ ] Escenario 1 (Instalación Base): Dado que ejecuto composer create-project laravel/laravel . y composer require livewire/livewire, cuando el proceso termina, entonces la aplicación arranca en php artisan serve sin errores.
• [ ] Escenario 2 (Alpine.js disponible): Dado que Livewire 3 incluye Alpine.js por defecto, cuando se carga cualquier vista Blade, entonces Alpine está disponible globalmente en el navegador y x-data / x-show funcionan correctamente.
• [ ] Escenario 3 (.env configurado): Dado que el archivo .env existe, cuando se inspecciona, entonces tiene variables configuradas para: DB_CONNECTION=pgsql, DB_HOST, DB_PORT=5432, DB_DATABASE, DB_USERNAME, DB_PASSWORD, APP_ENV=local, AUTH_EXTERNAL_URL, AUTH_MOCK_USER_ID=1.
• [ ] Escenario 4 (Vite solo para assets CSS): Dado que se usa Livewire (SSR), cuando se revisa vite.config.js, entonces Vite solo compila el CSS de Tailwind/App — no compila JavaScript de aplicación. Sin app.js de aplicación. Solo resources/css/app.css.
• [ ] Escenario 5 (Livewire funciona): Dado que se crea un componente Livewire de prueba con un contador, cuando se renderiza en el navegador, entonces el contador se incrementa al pulsar el botón sin recargar la página.
• [ ] Requisito Técnico: Dependencias Composer: laravel/laravel:^12.0, livewire/livewire:^3.0, mews/purifier (sanitización HTML server-side). TailwindCSS vía npm: npm install -D tailwindcss @tailwindcss/vite. Editor rich text vía npm: npm install @tiptap/core @tiptap/starter-kit @tiptap/extension-image @tiptap/extension-link (requerido por F-03.3/F-04.4/F-06.3). Crear .env.example con las variables necesarias. Eliminar los scaffolding innecesarios (Auth, Jetstream, Breeze si se instalaron).

---

MoSCoW: MUSTSprint: Sprint 0

Notas:

• Esta tarea es prerequisito bloqueante para TODAS las demás features.
• El .env nunca se sube al repositorio. Solo .env.example.
• TailwindCSS es el sistema de estilos elegido para el proyecto (mobile-first, utilidades).