Post Top Ad

Your Ad Spot

jueves, 8 de octubre de 2020

Ejemplo de andamio de autenticación de Laravel 8 con Jetstream Inertia.js y Livewire Stacks

 En este tutorial, aprenderá a usar el nuevo paquete Jetstream con pilas Inertia.js y Livewire para el scaffolding de autenticación de Laravel 8.

Jetstream hace uso de las plantillas Tailwind CSS, Vue.js y Blade para estilos y UI.

Inertia.js es una pila proporcionada por Jetstream que usa Vue.js como lenguaje de plantillas,

Laravel 7 introdujo el laravel/uipaquete para crear andamios de autenticación, pero con la última versión de Laravel 8, laravel/jetstreamse introduce un nuevo paquete.

Según los documentos oficiales de Jetstream :

Laravel Jetstream es un andamio de aplicación bellamente diseñado para Laravel. Jetstream proporciona el punto de partida perfecto para su próxima aplicación Laravel e incluye inicio de sesión, registro, verificación de correo electrónico, autenticación de dos factores, administración de sesiones, soporte de API a través de Laravel Sanctum y administración de equipo opcional.

Jetstream no solo es un andamio para la autenticación de Laravel 8, sino también otros requisitos de aplicaciones comunes, como la API y la gestión de equipos, que pueden ayudarlo a crear fácilmente aplicaciones SaaS con Laravel 8.

Jetstream no se basa en los estilos Bootstrap, sino en Tailwind CSS y le proporciona dos pilas: Livewire o andamios de inercia. Este último está basado en Vue.js.

Tailwind CSS es un marco CSS de utilidad para crear rápidamente diseños personalizados. Es un marco CSS de bajo nivel altamente personalizable que le brinda todos los componentes básicos que necesita para crear diseños a medida sin los molestos estilos obstinados por los que debe luchar para anular.

Laravel Livewire es una biblioteca que le permite construir interfaces dinámicas, reactivas y modernas usando Laravel Blade como su lenguaje de plantillas, mientras que la pila Inertia.js proporcionada por Jetstream usa Vue.js como su lenguaje de plantillas.

Andamio Laravel 8 Auth

Veamos cómo crear un tutorial de ejemplo de autenticación Laravel 8 con andamios Jetstream y luego veremos cómo usar Inertia.js para una interfaz de usuario con tecnología Vue o Livewire para una interfaz de usuario con tecnología Blade.

¿Qué es Laravel 8 Jetstream?

Laravel 8 Jetstream es un nuevo paquete que proporciona andamios.

Jetstream lo ayuda a construir rápidamente una aplicación web con inicio de sesión, registro, verificación de correo electrónico, autenticación de dos factores, administración de sesiones, soporte de API a través de Laravel Sanctum y administración de equipo opcional. Ahora veamos cómo usarlo para implementar la autenticación de Laravel 8.

Instalación de Laravel 8 con Composer

Primero, comencemos instalando el instalador de Laravel 8 usando Composer de la siguiente manera:

$ composer global require laravel/installer

Creando una aplicación Laravel 8 con Jetstream

A continuación, cree una nueva aplicación Laravel 8 usando el siguiente comando:

$ laravel new laravel8authapp --jet

Debe usar la --jetopción para crear una nueva aplicación Laravel 8 basada en Jetstream.

También puede instalar Jetsteram en su aplicación usando Composer, si creó su aplicación sin Jetstream, usando los siguientes comandos:

$ cd laravel8authapp
$ composer require laravel/jetstream

Si instaló Jetstream usando Composer, debe ejecutar el jetstream:installcomando artisan que acepta el nombre de la pila que prefiere (livewire o inercia).

Autenticación de andamios con Livewire

Puede ampliar la autenticación con inicio de sesión básico, registro y verificación por correo electrónico y, opcionalmente, administración de equipos mediante los siguientes comandos:

$ php artisan jetstream:install livewire
$ php artisan jetstream:install livewire --teams

A continuación, proceda a migrar su base de datos usando el siguiente comando:

$ cd laravel8authapp
$ php artisan migrate

Finalmente, debe instalar las dependencias de frontend usando el siguiente comando:

$ npm install 
$ npm run dev

Puede habilitar o deshabilitar las funciones de Jetstream desde el config/fortify.phparchivo de la siguiente manera:

 'features' => [
        Features::registration(),
        Features::resetPasswords(),
        Features::emailVerification(),
        Features::updateProfileInformation(),
        Features::updatePasswords(),
        //Features::twoFactorAuthentication(),
    ],

También puede agregar o eliminar funciones del config/jetstream.phparchivo:

'features' => [
        Features::profilePhotos(),
        Features::api(),
        Features::teams(),
    ],

Laravel 8 Auth Scaffolding usando Jetstream e Inertia.js

La pila Inertia.js proporcionada por Jetstream usa Vue.js como lenguaje de plantillas. La creación de una aplicación de inercia es muy similar a la creación de una aplicación típica de Vue; sin embargo, usará el enrutador de Laravel en lugar del enrutador Vue. Inertia es una pequeña biblioteca que te permite renderizar componentes Vue de un solo archivo desde tu backend de Laravel proporcionando el nombre del componente y los datos que deben ser hidratados en los "accesorios" de ese componente.

Puede crear andamios de autenticación con Jetstream Inertia.js utilizando los siguientes comandos:

$ php artisan jetstream:install inertia
$ php artisan jetstream:install inertia --teams

A continuación, instale y cree sus dependencias frontend de la siguiente manera:

$ npm install
$ npm run dev

Finalmente, migre su base de datos usando el siguiente comando:

$ php artisan migrate

Conclusión

En este artículo, hemos visto cómo usar el andamio Jetstream para implementar la autenticación de Laravel 8 usando Inertia.js (Vue.js) y Livewire (Blade).

Jetstream hace uso de las plantillas Tailwind CSS, Vue.js y Blade para estilos y UI.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas