Laravel Breeze, genera un sistema de autenticación y configura Tailwind.css

Laravel Breeze es una excelente opción para generar un sencillo esquema de autenticación en una aplicación en Laravel; la propia gente de Laravel define este paquete como:

Laravel Breeze es una implementación mínima y simple de todas las funciones de autenticación de Laravel, incluido el inicio de sesión, el registro, el restablecimiento de contraseña, la verificación de correo electrónico y la confirmación de contraseña. La capa de vista predeterminada de Laravel Breeze se compone de plantillas Blade simples diseñadas con Tailwind CSS.

Laravel Breeze es un paquete de autenticación básico que puede ser instalado mediante composer; es un paquete desarrollado exclusivamente para Laravel y que permite agregar de una manera sencilla la funcionalidad de autenticación a una aplicación en Laravel. Breeze utiliza la plantilla Blade, Vue o React para generar cada una de las pantallas visuales y por supuesto, los controladores correspondientes para procesar las peticiones. Al instalar Breeze automáticamente la aplicación cuenta con módulos para recuperación de contraseñas, verificación de correo electrónico, login y registrarse, además, Breeze incluye una página de perfil para actualizar datos básicos del usuario autenticado; y con unos pocos cambios, puedes agregar un sencillo sistema de roles en el módulo de usuario, esto es una configuración que hacemos en el curso y libro completo sobre Laravel.

Instalar y configurar Laravel Breeze

Para poder instalarlo:

$ composer require laravel/breeze --dev

Y ejecutamos

$ php artisan breeze:install

Preguntará cual stack queremos emplear; si tienes experiencia, puede seleccionar cualquiera de las tecnologías como Vue o react:

Which stack would you like to install?

  blade ............................................................... 0  
  react ............................................................... 1  
  vue ................................................................. 2  
  api ................................................................. 3

Pero, para iniciar de a poco, se recomienda que emplees la opción de "blade"; así que, seleccionas la 0:

$ 0

Puedes habilitar el modo oscuro:

Would you like to install dark mode support? 
   (yes/no) [no]

Indicando "yes":

$ yes

Entre otras opciones, como las pruebas unitarias, que no serían necesarias:

Would you prefer Pest tests instead of PHPUnit?

   (yes/no) [no]

Indicando "no":

$ no

Y esperas hasta que termine el proceso:

INFO  Installing and building Node dependencies.

Si ves algún error como el siguiente:

failed to load config from C:\laragon\www\testlara10\vite.config.js
error when starting dev server:
Error: Cannot find module 'node:path'
Require stack:
- C:\laragon\www\testlara10\node_modules\vite\dist\node-cjs\publicUtils.cjs
- C:\laragon\www\testlara10\node_modules\vite\index.cjs
- C:\laragon\www\testlara10\vite.config.js

Significa que tienes una versión de Node muy antigua; puedes conocer tu versión de Node con:

$ node -v

Si vez una versión similar o inferior a esta:

v14.16.1

En este post estamos usando:

$ node -v
v18.14.1

Debes de actualizar tu versión; luego puedes ejecutar:

$ npm run dev

En el caso de estar empleando Laravel Sail y no tener instalado Node en tu equipo:

$ ./vendor/bin/sail npm run dev

Finalmente, veremos que es sobrescrito nuestro esquema de rutas en:

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

Y recuerda colocar nuevamente las rutas sobrescritas:

use App\Http\Controllers\Dashboard\CategoryController;
use App\Http\Controllers\Dashboard\PostController;
***
Route::group(['prefix' => 'dashboard'], function () {
    Route::resources([
        'post' => PostController::class,
        'category' => CategoryController::class,
    ]);
});

Si revisamos los archivos generados en la carpeta de resources, veremos:

// resources/css/app.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

// resources/js/app.js

import './bootstrap';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

Breeze configuró Tailwind.css y Alpine.js en nuestro proyecto con las importaciones correspondientes para tal fin.

Finalmente, el comando de npm run dev, genera los archivos de salida y levanta un proceso para el Hot Reload Replacement que permite sincronizar los cambios que hagamos en el código fuente con lo que estamos viendo en el navegador.