Kits de inicio

• Introducción
• Laravel Breeze
  • Instalación
  • Breeze y Blade
  • Breeze y Livewire
  • Breeze y React / Vue
  • Breeze y Next.js / API
• Laravel Jetstream

Introducción

Para facilitar el inicio de la construcción de su nueva aplicación Laravel, nos complace ofrecer kits de autenticación y kits de inicio de aplicaciones. Estos kits estructuran automáticamente su aplicación con las rutas, controladores y vistas necesarios para registrar y autenticar a los usuarios de su aplicación.

Si bien puede utilizar estos kits de inicio, no son obligatorios. Puede construir su propia aplicación desde cero simplemente instalando una copia nueva de Laravel. De cualquier manera, sabemos que construirá algo grandioso.

Laravel Breeze

Laravel Breeze es una implementación mínima y sencilla de todas las funciones de autenticación de Laravel, que incluyen inicio de sesión, registro, restablecimiento de contraseña, verificación de correo electrónico y confirmación de contraseña. Además, Breeze incluye una página "perfil" simple donde el usuario puede actualizar su nombre, dirección de correo electrónico y contraseña.

La capa de vista predeterminada de Laravel Breeze está compuesta por sencillos templates de Blade con estilo de Tailwind CSS. Además, Breeze proporciona opciones de estructuración basadas en Livewire o Inertia, con la opción de usar Vue o React para la estructuración basada en Inertia.

<img src="https://laravel-docs.com/images/docs/10.x/breeze-register.png">

Laravel Bootcamp

Si eres nuevo en Laravel, siéntete libre de participar en el Laravel Bootcamp. El Laravel Bootcamp te guiará en la construcción de tu primera aplicación Laravel utilizando Breeze. Es una excelente manera de conocer todo lo que Laravel y Breeze tienen para ofrecer.

Instalación

Primero, debería crear una nueva aplicación Laravel, configurar su base de datos y ejecutar sus migraciones de base de datos. Una vez que haya creado una nueva aplicación Laravel, puede instalar Laravel Breeze usando Composer:

composer require laravel/breeze --dev

Después de que Composer haya instalado el paquete Laravel Breeze, puede ejecutar el comando Artisan breeze:install. Este comando publica las vistas de autenticación, rutas, controladores y otros recursos en su aplicación. Laravel Breeze publica todo su código en su aplicación para que tenga control total y visibilidad sobre sus características e implementación.

El comando breeze:install le pedirá que elija su pila frontend preferida y su marco de pruebas:

php artisan breeze:install
 
php artisan migrate
npm install
npm run dev

Breeze y Blade

La "pila" predeterminada de Breeze es la pila Blade, que utiliza sencillos templates de Blade para renderizar el frontend de su aplicación. La pila Blade se puede instalar invocando el comando breeze:install sin otros argumentos adicionales y seleccionando la pila frontend Blade. Después de que se haya instalado la estructura de Breeze, también debe compilar los activos frontend de su aplicación:

php artisan breeze:install
 
php artisan migrate
npm install
npm run dev

A continuación, puede navegar a las URL de /login o /register de su aplicación en su navegador web. Todas las rutas de Breeze están definidas en el archivo routes/auth.php.

Nota Para obtener más información sobre cómo compilar el CSS y JavaScript de su aplicación, consulte la documentación de Vite de Laravel.

Breeze y Livewire

Laravel Breeze también ofrece estructuración con Livewire. Livewire es una forma poderosa de construir interfaces de usuario dinámicas y reactivas en el frontend utilizando solo PHP.

Livewire es ideal para equipos que utilizan principalmente templates de Blade y buscan una alternativa más sencilla a los marcos SPA impulsados por JavaScript, como Vue y React.

Para utilizar la pila Livewire, puede seleccionar la pila frontend Livewire al ejecutar el comando Artisan breeze:install. Después de que se haya instalado la estructura de Breeze, debe ejecutar las migraciones de su base de datos:

php artisan breeze:install
 
php artisan migrate

Breeze y React / Vue

Laravel Breeze también ofrece estructuración con React y Vue a través de una implementación frontend de Inertia. Inertia le permite construir aplicaciones modernas de React y Vue de una sola página utilizando enrutamiento y controladores del lado del servidor.

Inertia le permite disfrutar de la potencia frontend de React y Vue combinada con la increíble productividad del backend de Laravel y la compilación ultrarrápida de Vite. Para utilizar una pila Inertia, puede seleccionar las pilas frontend Vue o React al ejecutar el comando Artisan breeze:install.

Al seleccionar las pilas frontend Vue o React, el instalador de Breeze también le pedirá que determine si desea Inertia SSR o soporte TypeScript. Después de que se haya instalado la estructura de Breeze, también debe compilar los activos frontend de su aplicación:

php artisan breeze:install
 
php artisan migrate
npm install
npm run dev

A continuación, puede navegar a las URL de /login o /register de su aplicación en su navegador web. Todas las rutas de Breeze están definidas en el archivo routes/auth.php.

Breeze y Next.js / API

Laravel Breeze también puede estructurar una API de autenticación lista para autenticar aplicaciones modernas de JavaScript, como aquellas impulsadas por Next, Nuxt y otras. Para comenzar, seleccione la pila de API como su pila deseada al ejecutar el comando Artisan breeze:install:

php artisan breeze:install
 
php artisan migrate

Durante la instalación, Breeze agregará una variable de entorno FRONTEND_URL al archivo .env de su aplicación. Esta URL debería ser la URL de su aplicación de JavaScript. Esto suele ser http://localhost:3000 durante el desarrollo local. Además, asegúrese de que su APP_URL esté configurada como http://localhost:8000, que es la URL predeterminada utilizada por el comando Artisan serve.

Next.js Reference Implementation

Finalmente, está listo para combinar este backend con el frontend de su elección. Una implementación de referencia de Next del frontend de Breeze está disponible en GitHub. Este frontend es mantenido por Laravel y contiene la misma interfaz de usuario que las pilas tradicionales de Blade e Inertia proporcionadas por Breeze.

Laravel Jetstream

Si bien Laravel Breeze proporciona un punto de partida simple y mínimo para construir una aplicación Laravel, Jetstream aumenta esa funcionalidad con características más robustas y tecnologías frontend adicionales. Para aquellos que son nuevos en Laravel, recomendamos aprender los conceptos básicos con Laravel Breeze antes de pasar a Laravel Jetstream.

Jetstream proporciona una estructura de aplicación bellamente diseñada para Laravel e incluye inicio de sesión, registro, verificación de correo electrónico, autenticación de dos factores, gestión de sesiones, soporte API a través de Laravel Sanctum y gestión opcional de equipos. Jetstream está diseñado utilizando Tailwind CSS y ofrece su elección entre Livewire o Inertia para el andamiaje frontend.

La documentación completa para instalar Laravel Jetstream se puede encontrar dentro de la documentación oficial de Jetstream.