Construir un sistema de autenticación desde cero es una tarea repetitiva que consume tiempo en cada proyecto. Laravel UI resuelve exactamente ese problema: con un solo comando genera las rutas, vistas y controladores necesarios para login, registro y recuperación de contraseña. A continuación se explica paso a paso cómo instalar y configurar este componente oficial creado por el propio autor de Laravel.
¿Cómo se crea el proyecto e instala Laravel UI?
El proceso comienza creando un proyecto limpio con laravel new UI [0:27]. Una vez dentro de la carpeta del proyecto, se instala el paquete con Composer:
bash
composer require laravel/ui --dev
El parámetro --dev es fundamental porque indica que el paquete solo se necesita en el entorno de desarrollo [1:02]. Cuando el proyecto se suba a producción, únicamente se despliega el resultado final compilado; no es necesario que Laravel UI esté disponible en el servidor.
- Sin
--dev, el paquete se registra en las dependencias de producción.
- Con
--dev, se ubica en la sección require-dev del archivo composer.json [1:18].
Una vez instalado, al ejecutar php artisan se pueden ver dos nuevos comandos disponibles que permiten generar el sistema de autenticación a nivel de rutas y vistas [1:36].
¿Qué opciones de instalación existen para el sistema de autenticación?
Laravel UI ofrece tres variantes de scaffolding para el frontend [2:06]:
- Bootstrap: genera las vistas de login con clases y estilos de Bootstrap.
- Vue: crea un componente base que también utiliza Bootstrap como framework CSS.
- React: prepara la estructura necesaria para trabajar con React dentro de Laravel.
Para instalar el sistema con Bootstrap y autenticación completa, se ejecuta:
bash
php artisan ui bootstrap --auth
Antes de ejecutar el comando, el proyecto solo contiene la vista welcome y una ruta básica [1:54]. Después de la instalación se generan automáticamente varios elementos [2:44]:
- Un layout base como plantilla principal.
- Vistas de login, registro, verificación de contraseña y recuperación de password.
- Un controlador de ejemplo protegido por el middleware de autenticación, útil para comprobar que el sistema funciona correctamente.
- Rutas de autenticación registradas en el archivo de rutas.
¿Cómo se compilan los estilos y scripts del proyecto?
Al visitar el proyecto en el navegador tras la instalación, las vistas aparecen sin diseño [3:15]. Es necesario compilar los archivos CSS y JavaScript ejecutando dos comandos:
bash
npm install
npm run dev
El primer comando descarga todas las dependencias registradas en package.json y crea la carpeta node_modules [3:26]. El segundo comando compila los archivos fuente ubicados en resources/sass y resources/js, generando los archivos finales dentro de la carpeta public [3:53].
¿Qué papel cumple webpack.mix.js en la compilación?
El archivo webpack.mix.js contiene la configuración que indica qué archivos compilar y dónde colocar el resultado [4:07]:
resources/js/app.js se compila y se envía a public/js.resources/sass/app.scss se compila y se envía a public/css.
Una vez completado el proceso, el sistema de login aparece con los estilos de Bootstrap aplicados correctamente, incluyendo los botones de login y registro en la barra de navegación [4:22].
¿Cuándo conviene usar Vue o React en lugar de Bootstrap?
Si el proyecto requiere un frontend reactivo con componentes dinámicos, se puede optar por Vue o React en lugar de Bootstrap puro [4:32]:
bash
php artisan ui vue --auth
php artisan ui react --auth
Cada comando genera la estructura base correspondiente al framework elegido, manteniendo las mismas rutas y lógica de autenticación. La elección depende del stack tecnológico con el que se sienta más cómodo el equipo de desarrollo.
Es completamente posible construir un sistema de autenticación desde cero, pero conocer esta alternativa ahorra tiempo y garantiza una base sólida. Prueba los diferentes comandos de instalación y comparte en los comentarios qué cambios observas en la estructura de carpetas de tu proyecto.
