Debido a las actualizaciones recientes (a fecha de esta entrada) necesitamos actualizar nuestra base de conocimientos. Es muy útil tener un glosario a modo de resumen de ciertas definiciones. Además, los pasos para crear un proyecto desde cero han variado ligeramente.

Crear un proyecto

Cuando creamos un proyecto nuevo de Laravel 9 con los comandos habituales, elegiremos en más de una ocasión usar Jetstream. En el momento de ejecutar el comando de instalación de Laravel con Jetstream, la consola de comandos nos preguntará si queremos usar Liveware o Inertia. Al elegir Liveware, se creará el proyecto con esas opciones. Se ejecutará el comando «npm install» (instalando todas las dependencias de npm dentro del proyecto) seguido de «npm run dev», que creará un nuevo servidor de Vite.

Cuando necesitemos subir el proyecto tendremos que hacer uso del comando «npm run build» para que se cree el manifiesto donde estará compilado todo nuestro js y css. El servidor de Vite ya no será necesario, pero el proyecto esperará tener los manifiestos.

Glosario

Jetstream

Jetstream es un kit de inicio de aplicaciones diseñado para Laravel y proporciona la implementación para el inicio de sesión, el registro, la verificación de correo electrónico, la autenticación de dos factores, la gestión de sesiones, la API a través de Laravel Sanctum y las funciones opcionales de gestión de equipos de su aplicación.

A la hora de trabajar con Jetstream hayq ue escoger entre dos interfaces: Livewire e Inertia.js. La elección depende del lenguaje de los templates.

Liveware

Laravel Livewire es una librería que simplifica las interfaces de Blade y las hace más modernas, reactivas y dinámicas.

https://laravel-livewire.com/

Al usar Livewire, se puede elegir qué partes de la aplicación serán un componente de Livewire, mientras que el resto de la aplicación se puede representar como las plantillas Blade tradicionales.

Vite

Vite es un compilador que se mantendrá a la escucha de cualquier cambio en nuestro código de javascript y css, y creará los assets que incluiremos finalmente en nuestra página.

Para poder trabajar en el entorno local y cargar los estilos de nuestra aplicación, necesitamos tener el servidor encendido. Para ello ejecurtaríamos el comando «npm run dev» y ya veríamos los estilos.

Laravel ahora usa Vite: https://www.youtube.com/watch?v=4gxxWTe3pVA&list=PLZ2ovOgdI-kWWS9aq8mfUDkJRfYib-SvF&index=32

Bootstrap

Cómo usar Bootstrap en Laravel 9 usando Vite: https://www.youtube.com/watch?reload=9&v=D_-i6ZiWHuQ

Bootstrap es un framework front-end utilizado para desarrollar aplicaciones web y sitios mobile first, o sea, con un layout que se adapta a la pantalla del dispositivo utilizado por el usuario. El propósito del framework es ofrecerle al usuario una experiencia más agradable cuando navega en un sitio.

Por esta razón, tiene varios recursos para configurar los estilos de los elementos de la página de una manera simple y eficiente, además de facilitar la construcción de páginas que, al mismo tiempo, están adaptadas para la web y para dispositivos móviles.

¿Cómo funciona Bootstrap?
Bootstrap está constituido por una serie de archivos CSS y JavaScript responsables de asignar características específicas a los elementos de la página.

¿Cómo configurar y usar Bootstrap?
Hay diferentes formas de configurarlo o estructurarlo para usarlo en una aplicación web. Sin embargo, para que funcione correctamente, es necesario agregar las bibliotecas JQuery y Popper.js, necesarias para la ejecución de algunos componentes de Bootstrap.

Para comenzar a usar Bootstrap en una página, es necesario agregar las referencias de los principales archivos del framework en la página principal de la aplicación.

Tailwind

Tailwind es un framework CSS. Es Brinda un conjunto único de clases de utilidad que hace que el proceso de desarrollo sea muy fácil y da como resultado un diseño único. El código y el diseño web se puede personalizar libremente.

Instalar el framework Tailwind no es tan simple como instalar un framework bootstrap, requiere un poco de configuración con laravel Mix.

Npm

https://docs.npmjs.com/cli/v6/commands/npm

npm es el administrador de paquetes para la plataforma Node JavaScript. Coloca los módulos en su lugar para que el nodo pueda encontrarlos y gestiona los conflictos de dependencia de manera inteligente.

Usualmente npm se necesita porque el proyecto requiere instalaciones.

Laravel Mix (antes de Vite)

https://laravel.com/docs/8.x/mix

Laravel Mix proporciona una API fluida para definir los pasos de compilación de Webpack utilizando varios procesadores de CSS y JavaScript comunes.

El objetivo es, entre otras cosas, procesar todo nuestro código css, minificarlo y combinarlo en un solo archivo. Lo mismo para el código javascript, minificar, ofuscar y combinar todo el código en un solo archivo. Con laravel mix nuestras páginas web son mas seguras y rápidas.

Laravel mix está optimizado para usar con Laravel, pero se puede utilizar en cualquier aplicación web, aunque no se use Laravel.

¿Qué es Jetstream?

Directamente de la documentación de Laravel:

Jetstream provides the implementation for your application’s login, registration, email verification, two-factor authentication, session management, API…

Instalación

Nuevo proyecto con Jetstream

Vamos a la consola de Gitbash, y dentro de nuestro directorio htdocs de XAMPP la línea de más abajo para un nuevo proyecto. A este lo llamaremos «bootstrap».

Tendremos que elegir entre liveware y inertia. Si estás familiarizado con blade, es más sencillo liveware. Con inertia es mejor si estás más familiarizado con javascript, por ejemplo Vue. Lo haremos con liveware.

laravel new bootstrap --jet

Base de datos

El siguiente paso es crear una base de datos llamada bootstrap (así la llamaremos) dentro de phpmyadmin.

Desde la misma consola de Gitbash, podemos ir a nuestro proyecto:

cd bootstrap

Y ejecutar las migraciones:

php artisan migrate

Iniciar el server

Inicializamos el servidor así:

php artisan serve

Se nos informará que podemos acceder mediante una url como: http://127.0.0.1:8000.

Instalar Bootstrap

Abrimos nuestro proyecto desde VSC. En la carpeta principal podemos encontrar el archivo de configuración de tailwind, pero nosotros queremos bootstrap, con lo que instalaremos un paquete llamado Jetstrap.

La siguiente línea la hemos encontrado en el repositorio de Github https://github.com/nascent-africa/jetstrap, en el readme.

composer require nascent-africa/jetstrap --dev

Ahora necesitamos ejecutar el siguiente comando para liveware:

php artisan jetstrap:swap livewire

Nos aparece el siguiente mensaje una vez terminado: Please execute the «npm install && npm run dev» command to build your assets para que los estilos se compilen. Ya estaremos viendo que el archivo de configuración de tailwind no existe, y que en la carpeta resource/sass están las variables y estilos de bootstrap, y que el archivo webpack.mix.js todo se va a compilar con sass y que buscará el archivo de la carpeta sass que se llama app.scss.

Ejecutamos por orden:

npm install
npm run dev

Al ejecutar el segundo comando nos hemos encontrado un error de la versión de node que se explica en el vídeo siguiente:

Descargamos el instalador del node más actualizado para nuestro sistema operativo y los instalamos. Con esto hemos podido ejecutar el comando, pero los estilos no se cargan y probamos a empezar todo de nuevo, esta vez con node actualizado a la última versión.

Y ahora nos encontramos con otro «problema», con una actualización Laravel ahora usa Vite, con lo que los pasos anteriores no funcionan como esperábamos.

IMPORTANTE: Para los estilos es indispensable conocer el funcionamiento de Vite, que es una mejora de Laravel con respecto a las versiones anteriores. Por lo tanto, el uso y la instalación de Tailwind o de Bootstrap va a estar condicionado por el funcionamiento de Vite.

Recursos:

Enlace de Youtube: https://www.youtuhttps://www.youtube.com/watch?v=v-R5FLGAB58&list=PLZ2ovOgdI-kWWS9aq8mfUDkJRfYib-SvF&index=30