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