Laravel: Bootstrap con Jetstream – capítulo de transición (parte 22)

¿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