Autenticación – Instalar el Kit de Inicio Breeze

Introducción

En este tutorial, nos enfocaremos en cómo instalar y configurar el Kit de Inicio Breeze en un proyecto de Laravel. Laravel Breeze es un kit de inicio ligero que nos proporciona una solución de autenticación rápida y sencilla para nuestras aplicaciones web.

Requisitos Previos

Antes de comenzar, asegúrate de tener instalado el siguiente software:

– PHP

– Composer

– Node.js

– NPM

– Un editor de código, como Visual Studio Code (VS Code)

– Laravel instalado

Instalación de laravel

Antes de instalar el kit de inicio de Breeze tenemos que tener instalado laravel, en este caso será la version 11 de laravel, para este caso vamos a utilizar el servidor local llamado laragon, que tiene su propio terminal y a través de su terminal instalaremos laravel 11, en tal sentido te invito a abrir terminal de laragon y en ella digita el siguiente código.

composer create-project laravel/laravel lara_bd "11.*" --prefer-dist

Para conectar con base de datos debes crear, en este tutorial utilizaremos como indique anteriormente laragon que tambien tiene phpmyadmin, ábrelo y crea tu base de datos con el nombre de lara_bd.

Ahora vamos a abrir visual estudio code que es gratuito y facil de utilizar, para eso dirígete a la raiz de tu proyecto, normal mente en laragon es:  C:\laragon\www y si verificas dentro de la carpeta www hay esta laravel que instalamos con el nombre de lara_bd, entonces la raiz de tu proyecto será esta: C:\laragon\www\lara_bd, con visual studio code ingresa dentro de la carpeta lara_bd y dentro estará las carpetas y archivos de laravel instalado. en este lugar ubica .env y cambia a estos datos.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lara_bd
DB_USERNAME=root
DB_PASSWORD=

Instalación del Kit de Inicio Breeze

Paso 1: Acceder a la Documentación de Laravel

Dirígete a la [documentación oficial de Laravel](https://laravel.com/docs/12.x/starter-kits) y busca la sección de «paquetes». Allí encontrarás la documentación de Laravel Breeze.

Paso 2: Instalar el Paquete Breeze

Abre la terminal en tu editor de código (como VS Code) y ejecuta el siguiente comando de Composer para instalar el paquete Breeze:

composer require laravel/breeze --dev

Espera a que el paquete se instale. Este proceso puede tardar unos minutos.

Paso 3: Ejecutar el Comando de Instalación

Una vez instalado el paquete, sigue las instrucciones de la documentación y ejecuta el siguiente comando para instalar el kit de inicio Breeze:

php artisan breeze:install

Este comando te preguntará por diferentes opciones de configuración:

¿Quieres utilizar una palanca de blade?: Si estás trabajando con Blade, selecciona la opción «blade».

¿Deseas agregar el modo oscuro?: Si no necesitas soporte para el modo oscuro, selecciona «no».

¿Qué probador quieres para el marco de pruebas?: Por defecto, seleccionará PHPUnit.

Paso 4: Ejecutar las Migraciones

Antes de continuar, asegúrate de que todas tus tablas de base de datos estén migradas. Si no es el caso, ejecuta:

php artisan migrate

Paso 5: Instalar Dependencias de Node.js

Ahora, instala las dependencias de Node.js ejecutando:

npm install

Paso 6: Compilar y Servir Activos

Para compilar y servir los activos, puedes ejecutar:

npm run dev

Opcionalmente, puedes construir todos tus activos con:

npm run build

Esto iniciará un servidor de desarrollo y te permitirá ver tus cambios en tiempo real.

Verificación de Instalación

Después de instalar y configurar correctamente el kit de inicio Breeze, deberías ver un enlace de autenticación en tu aplicación web. Al hacer clic en él, se abrirá la página de inicio de sesión y registro.

Creación de Usuarios

Puedes crear un nuevo usuario ficticio y ver cómo el sistema de autenticación funciona. Al registrarse, el usuario será redirigido automáticamente al panel de control.

Name: Panozin Franco

Email: panozin@gmail.com

Password: Panozin.123

Funcionalidades Adicionales

El kit de inicio Breeze incluye funcionalidades como el restablecimiento de contraseñas y la confirmación de correo electrónico. Sin embargo, para que estas funcionalidades funcionen correctamente, debes configurar el correo electrónico en tu aplicación.

Estructura de Carpetas del Proyecto

Después de instalar el kit de inicio, verás que se han agregado varias carpetas y archivos al proyecto. Aquí hay un resumen de los cambios:

Controladores: Se han creado nuevos controladores en la carpeta `app/Http/Controllers/Auth` para manejar el flujo de autenticación.

Rutas: Se han agregado rutas de autenticación en el archivo `routes/auth.php`.

Vistas: Se han creado vistas de autenticación en la carpeta `resources/views/auth`.

Componentes: Se han agregado componentes de Blade en la carpeta `resources/views/components`.

Modificaciones y Personalización

En el próximo video, intentaremos modificar algunas cosas de este sistema de autenticación para adaptarlo a nuestras necesidades específicas.

Conclusión

En resumen, Laravel Breeze es una solución rápida y fácil para implementar un sistema de autenticación en tu aplicación Laravel. Con solo ejecutar un comando, puedes tener un sistema de inicio de sesión y registro funcional en cuestión de segundos.