“Vite” actualmente se ha convertido paquete frontend predeterminado para los proyectos en el framework de Laravel y, por lo tanto, también ha cambiado su sistema de autenticación. Por este motivo, el objetivo de este documento es explicar y mostrar cómo aplicar dichos cambios en un proyecto nuevo, teniendo en cuenta que previamente ya se debe tener herramientas y recursos específicos que se detallarán a continuación para que el desarrollo base se pueda dar sin inconvenientes.
I. VITE Y SU INSERCIÓN EN LARAVEL
Para comenzar, “Vite” se define como una herramienta del lado del frontend creada por Evan You (creador de Vue) y, que se encarga de apoyar al desarrollador a crear proyectos sin necesidad de que este se encuentre atado a un framework en específico, esto hace que su uso sea cómodo y sencillo.
De esta manera, el equipo de desarrollo de Laravel ha tratado de implementar dicha herramienta a su framework, logrando así publicar una nueva actualización el 29 de junio del 2022 donde ya se puede hacer el uso de esta tecnología y, se estableció como paquete por defecto para el mismo.
Sin embargo, este cambio ha afectado al sistema de autenticación por defecto que ha tenido Laravel, por eso es necesario saber desde la raíz cómo se puede aplicar el paquete de Vite en un nuevo proyecto.
II. IMPLEMENTACIÓN DEL SISTEMA DE AUTENTICACIÓN EN LARAVEL
Previo a la implementación del sistema de autenticación, se debe tomar en cuenta que el ejemplo se desarrolló en un computador con el sistema operativo de Windows 11 y que se debe tener las siguientes herramientas y/o recursos:
- Visual Studio Code.
- XAMPP inicializado con el servicio Apache y MySQL.
- Laravel, Composer y Node.js.
Entonces, se debe generar el nuevo proyecto con el comando laravel new [nombre del proyecto].
Luego, hay que dirigirse a la carpeta del proyecto e inicializar Visual Studio Code para abrir una nueva terminal.
Ahora, se procede a utilizar Laravel Breeze ejecutando el comando composer require laravel/breeze.
A continuación, se procede a instalar dicho paquete con php artisan breeze:install vue.
Así, solamente falta ejecutar los comandos npm install y npm run dev respectivamente para tener configurado el ambiente correctamente.
De esta forma, ya se tendrá aplicado el sistema de autenticación en el proyecto, por lo cual queda inicializar el servidor Apache y MySQL de la herramienta XAMPP.
Se crea una base de datos (se recomienda que tenga el nombre exacto del proyecto) y se realiza la inserción de las variables de conexión en el archivo .env.
Finalmente, se debe abrir una nueva terminal en Visual Studio Code y se ejecutan los comandos php artisan migrate:fresh y php artisan serve para poder observar los resultados.
Así, los resultados obtenidos se ven reflejados en las siguientes imágenes:
La plantilla de Laravel con la implementación ya realizada de este sistema de autenticación se puede obtener del siguiente link:
https://github.com/raul-tenorio/laravel-authentication-vite-template
El documento PDF con la información de esta publicación se puede obtener aquí.
III. REFERENCIAS
[1] Redmond, P. (2022, 29 junio). Vite is now the default frontend asset bundler for Laravel applications. Laravel News. https://laravel-news.com/vite-is-the-default-frontend-asset-bundler-for-laravel-applications
[2] Laravel LLC. (2022). Laravel - The PHP Framework For Web Artisans. Laravel. https://laravel.com/docs/9.x/frontend
Top comments (0)