Laravel Jetstream with Livewire to work with a Scafolding

Laravel Livewire es una biblioteca para Laravel que podemos usar de forma gratuita; a diferencia de Larave base, ya podemos desarrollar interfaces de usuario dinámicas y reactivas de forma gratuita utilizando la sintaxis de plantilla Blade de Laravel.

Laravel Livewire es un esqueleto o andamiaje moderno para crear componentes basados ​​en código del lado del cliente (vistas blade) y del lado del servidor (componentes en Laravel) y comunicarse fácilmente; y aquí es donde entra Livewire en el proceso, que es el pegamento que permite que ambas partes se comuniquen de forma sencilla y sin utilizar peticiones HTTP como axios, Livewire con Jetstream también incorpora módulos ya preparados como el de usuario, con autenticación y otros añadidos.

Livewire cuenta con un conjunto de páginas listas para usar para el control de usuarios como login, registro, recuperación de contraseña, entre otras; estas funcionalidades son organizadas por jetstream, el cual se configura a través de Livewire y contempla dichas funcionalidades.

Además de lo anterior, Livewire permite crear componentes y eventos interactivos en tiempo real sin necesidad de escribir código JavaScript complejo. Por ejemplo, Livewire cuenta con atributos que se pueden definir en los archivos blade para gestionar eventos de clic, eventos de teclado, entre otros. En ellos, se pueden invocar directamente funciones definidas en Laravel a través de componentes. Esto significa que existe una forma directa de comunicar el frontend con el backend. Esta comunicación consiste en enviar peticiones a un servidor para actualizar una página. Lo interesante es que no es necesario crear estas peticiones mediante fetch o similar; de lo contrario, Livewire lo hace por nosotros. Livewire utiliza conexiones WebSocket para comunicarse bidireccionalmente entre el servidor y el cliente, lo que significa que las actualizaciones se pueden realizar rápidamente y en tiempo real.

Livewire también proporciona herramientas para manejar formularios, validaciones y acciones en el lado del servidor, simplificando el proceso de desarrollo y mejorando la seguridad de la aplicación; Livewire está basado en componentes, con los que podemos implementar toda la lógica explicada anteriormente entre muchas otras operaciones.

En este post vamos a hablar un poco sobre Laravel Jetstream con Livewire; lo primero que debes saber es que este es simplemente un paquete que podemos instalar usando composer o crear un proyecto desde cero, es decir, crear un nuevo proyecto e indicar que queremos usar Laravel Jetstream:

Nuevo proyecto de Laravel : Jet

Recordemos que el comando para crear un proyecto en Laravel sería sin la opción —jet:

Nuevo proyecto de Laravel

Si está utilizando el instalador de Laravel.

Con esto creamos un proyecto con este paquete, que también usa nuestro Laravel como núcleo, como puedes ver en composer.json:

"require" :  { 
        "php" :  "^8.0.2" , 
        "guzzlehttp/guzzle" :  "^7.2" , 
        "laravel/framework" :  "^9.2" , 
        "laravel/jetstream" :  "^2.6" , 
        "laravel/sanctum" :  "^2.14.1" , 
        "laravel/tinker" :  "^2.7" , 
        "livewire/livewire" :  "^2.5" 
} ,

Si está utilizando el instalador de Laravel.

Con esto creamos un proyecto con este paquete, que también usa nuestro Laravel como núcleo, como puedes ver en composer.json:

Aunque lo que aparece en este archivo depende de lo que hayas seleccionado como esqueleto cuando ejecutaste el comando anterior.

En este post hablaremos de Livewire + Blade y NO de Inertia.js + Vue.js; ya que del primero podría decir que es el más sencillo ya que NO usa Vue sino directamente nuestro Blade, por lo tanto, si no usas Vue o no quieres dar el salto a él, perfectamente puedes usar Livewire.

¿Qué nos ofrece Laravel Jetstream?

Laravel Jetstream simplemente nos ofrece un andamiaje o esqueleto para poder partir de algo más que un proyecto vacío, por lo tanto esto es simplemente un proyecto Laravel con esta capa de personalización.

Laravel Jetstream nos ofrece un esquema o funcionalidades simples ya implementadas; una vista de perfil, modificar datos vacíos, subir un avatar, cambiar la contraseña, crear tokens de autenticación con Laravel Sanctum y administrar equipos que puedan trabajar en base a un sistema de roles; todas estas funcionalidades pueden ser fácilmente desactivadas o eliminadas de nuestro proyecto.

Qué permiten los equipos Laravel Livewire

Los equipos son un mecanismo para agrupar usuarios bajo un perfil determinado; por lo tanto, un usuario pertenece a uno o varios equipos, que puede ser el equipo que se crea automáticamente cuando creamos el usuario o también podemos crear otros a través de nuestro esqueleto; podemos crear equipos (aunque ya tengamos uno creado con nuestro usuario al registrarlo):

Seleccione otros equipos que tenemos asignados:

Y gestionar que otros usuarios formen parte de nuestro equipo:

Y si echamos un vistazo a la base de datos:

Disponemos de varias tablas para gestionar los equipos y usuarios y por supuesto la tabla dinámica para tal fin; además de tokens de acceso con Laravel Sanctum:

Laravel Jetstream con Livewire y Tailwind.CSS

Este paquete utiliza por defecto el framework CSS conocido como tailwind.css, el cual, al igual que Bootstrap, nos ofrece un completo conjunto de clases para personalizar nuestra interfaz; pero, la diferencia fundamental con este último, radica en que NO tenemos componentes; no tenemos componentes como letras, botones, y prácticamente cualquier cosa que aparezca en la sección de componentes de Bootstrap.

But through these classes we can build these components; this has its good and bad side at the same time:

• The good side is that we can create an interface with a higher level of customization than we can do in Bootstrap, since Bootstrap with existing components if we want to change them we would have to overwrite CSS rules.
• The bad side is precisely the effect that is obtained from the first point; Being a more manual design we have to spend time creating these components and therefore a slower development.

But hey, ultimately we have this fascinating tool with which we can build our interface; and you can always switch back to another CSS framework or CSS kit like Bootstrap in case you want to use something else.

Although really the power of Livewire is to use components, therefore, using tailwind.css is recommended at this point; other than that all the basic views were created with tailwind.css.

Getting to know Laravel Jetstream with Livewire

Anyway; In order to see what this package offers us, we first have to register a user, and this is to be able to access the administration module that we have for users; we have to go to the route that will allow us to register a new user:

http://jetstream.test/register

And with our user, we go to the login page and start the session:

http://jetstream.test/login

And then to our Dashboard; If we go to our web.php we will see that we have a Dashboard route that is the one we entered previously.

Apart from the fact that we already have a fully functional and customizable module for the user, to register the user, log in, retrieve credentials, edit credentials...

Here we have EVERYTHING generated by this package by default:

Profile

On this profile page, we will see that we have the basic administration of our user; basic information, upload an avatar, change the password and activate double authentication.

In addition to other configurations such as closing the sessions that we have open and deleting our account:

Double authentication

Laravel Livewire allows us a complete double authentication system, for this we can use applications such as Google or Microsoft Authenticator, 1Password, etc; we simply enable the option in the corresponding module and follow the rest of the steps.

Then, if we close the session, you will need to enter the code generated by your authentication app in addition to the username and password pair.

Teams

An interesting addition to this package is the management of the equipment; teams are simply a mechanism by which we can group users and assign them a role; in this way we can determine what actions these users can perform; From our options menu we can create teams and assign users to teams.

Authentication Token Management

From the API Tokens option we can generate authentication tokens that we can use in any other application, for this remember that we use Laravel Sanctum.

And this is the main thing you have to know about Laravel Livewire.

Conclusions

Estos son los componentes principales que tenemos en Laravel JetStream con Livewire, pero por supuesto podemos escalar esto como si fuera un proyecto desde cero, quitando configuraciones, modificando o añadiendo nuevas funcionalidades de forma organizada y potente como estamos acostumbrados con Laravel.

Por supuesto, este es un tema fundamental en nuestro curso de Laravel junto con muchos más temas de Laravel que puedes tomar en Udemy desde el enlace de cursos que puedes consultar en el menú en la parte superior de este blog.