29. Como utilizar Bootstrap con Laravel Jetstream
En este capítulo de Laravel, te enseñaremos cómo utilizar Jetstrap, un paquete de terceros que te permite integrar Bootstrap con Laravel Jetstream de manera rápida y sencilla. Jetstrap es una herramienta de diseño web que te permite crear rápidamente vistas y plantillas con Bootstrap, y su integración con Laravel Jetstream es fácil de configurar y personalizar.
Aprenderás cómo instalar y configurar Jetstrap en tu proyecto Laravel Jetstream y cómo utilizar sus características y componentes para diseñar vistas atractivas y responsivas. También cubriremos cómo personalizar y ajustar los estilos y la apariencia de tus vistas utilizando Jetstrap y Bootstrap. Al final de este capítulo, tendrás todos los conocimientos necesarios para utilizar Jetstrap y Bootstrap con Laravel Jetstream y crear una aplicación web atractiva y fácil de usar en poco tiempo.
9 comentarios
Inicia sesión para comentar
Comentarios:
-
It Vmc hace 9 meses
Video no disponible
-
Alexander Zarate hace 6 meses
aun sin resolver
-
Yeison López hace 2 meses
Aún sin resolver
-
-
Gloria Coral hace 1 año
Buenas tardes, tengo laravel 10, busque videos y páginas, al parecer ya me habia funcionado, pero hice muchas cosas que ya me salen errores. No se si se deba a que elimine, volvi a crear el proyecto y hice las instalaciones correspondientes. No se si alguien ya busco una manera más facil o que funcione.
-
Victor Arana Flores hace 1 año
Hola Gloria, este paquete fue creado para trabajar con Laravel 8 y Laravel Mix. Actualmente no es disponible para Laravel 10
-
Gloria Coral hace 1 año
Ok, gracias
-
-
Erick Aya hace 1 año
Buenas tardes, una pregunta, por que en laravel 10 no se puede instalar jetstrap y como implementar bootstrap en jetstream y livewire con laravel 10
-
Juan F hace 1 año
compañeros, estuve haciendo pruebas con laravel 9 y jetstrap, me marcaba errores, y no me instalaba boostrap. Descubrí que el error estaba en el node.js , desinstale la versión de Node.Js completa de mi pc e instale la versión Node.Js 17.XXX y con eso me ejecuto el comando sin problemas. les dejo el link de la versión de node.js
https://nodejs.org/download/release/v17.9.1
Espero les sea de utilidad, no lo he probado con laravel 10, pero con laravel 9 y este software de Node.Js funciona sin problemas.
Saludos-
Victor Arana Flores hace 1 año
Hola Juan, gracias por el aporte.
-
-
Jacob Figueroa hace 1 año
Hola, primero que todo gracias por compartir su conocimiento profe. En segundo, estoy siguiendo este curso pero me quede estancado en este video. He modificado el package.json eliminando vite y que ejecute laravel-mix pero al momento de compilar el css me da error:
ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read property 'config' of undefined-
Victor Arana Flores hace 1 año
Hola Jacob. Este paquete que transforma jetstream a bootstrap ya no es valido, ya que ahora Laravel trabaja con Vite, y el paquete está hecho para trabajar con webpack
-
Jacob Figueroa hace 1 año
Gracias por responer. Lo que quería era usar bootstrap en lugar de tailwind. Despues de varios días buscando sobre el tema y haciendo cambios logre que compilara.
Si algun compañero quiciera hacer lo mismo, yo lo hice siguiendo la documentación https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md#migrating-from-vite-to-laravel-mix . Tal como dice la doc no funciona, deben omitir el primer paso, no hagan ningun cambio en el archivo webpack.mix.js. -
Gloria Coral hace 1 año
¿Se omite la instalación de laravel-mix?
-
-
Walter hace 2 años
? Bootstrap 5
Creamos un nuevo proyecto Laravel con Jetstream:
laravel new bootstrap --jet
Elegimos la opción [0] livewire y [no] para el uso de teams, para terminar la instalación.
Creamos una base de datos llamada bootstrap y corremos las migraciones.
php artisan migrate
Iniciamos el servidor
php artisan serve
Abrimos el proyecto en 127.0.0.1:8000
Para usar bootstrap en nuestro proyecto instalamos jetstrap:
composer require nascent-africa/jetstrap --dev
Luego
php artisan jetstrap:swap livewire npm install npm run dev
En la carpeta public/css encontramos el archivo app.css donde están todos los estilos de bootstrap.
? Aclaración: jetstrap trabaja con Laravel Mix, y en las últimas versiones de Laravel, viene instalado Vite por defecto. Si queremos usar Jetstrap con Laravel 9, primero debemos migrar de Vite a Mix, y recién hacer la instalación del paquete.
-
Juan Ramos hace 2 años
Victor vale la pena mencionar que Jetstrap unicamente funciona con Laravel 8 y por el momento no hay compatibilidad de Jetstrap con Laravel 9.
He esta seguimiento el curso y me parece muy bueno, pero afectara esto el seguimiento del resto del curso? Existe alguna otra forma de usar Bootstrap con Jetstream o es preferible trabajar con Laravel 8?
-
Victor Arana Flores hace 2 años
Hola Juan, Jetstrap funciona en varias versiones de Laravel (no solo Laravel 8), incluido Laravel 9.
Sucede que ese paquete está hecho para trabajar con Laravel Mix, y en las ultimas versiones de Laravel, viene instalado Vite por defecto.
Si quieres utilizar Jetstrap con Laravel 9, primero debes migrar de Vite a Mix, y recién hacer la instalación del paquete. Voy a tratar de hacer un video en el que enseñe a como migrar de Vite a Mix. -
Juan Ramos hace 2 años
Entiendo y gracias, por el momento para no complicarme estoy utilizando Laravel UI, ya que viene con bootstrap por defecto, y hasta donde he avanzado en tu curso todos los comando parecen funcionar sin ningún problema, solo es de hacer algunos ajustes. Pero seria genial si pudieses hacer el video de Vite a Mix, gracias por el excelente curso!
-
Juan F hace 1 año
les dejo el proceso de migración de vite a laravel mix es el siguiente:
Migrating from Vite to Laravel Mix
Install Laravel Mix
First, you will need to install Laravel Mix using your npm package manager of choice:
npm install --save-dev laravel-mix
Configure Mix
Create a webpack.mix.js file in the root of your project:
const mix = require('laravel-mix'); /* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel applications. By default, we are compiling the CSS | file for the application as well as bundling up all the JS files. | */ mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ // ]);
Update NPM scripts
Update your NPM scripts in package.json:
"scripts": { - "dev": "vite", - "build": "vite build" + "dev": "npm run development", + "development": "mix", + "watch": "mix watch", + "watch-poll": "mix watch -- --watch-options-poll=1000", + "hot": "mix watch --hot", + "prod": "npm run production", + "production": "mix --production" }
Inertia
Vite requires a helper function to import page components which is not required with Laravel Mix. You can remove this as follows:
- import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'; createInertiaApp({ title: (title) => `${title} - ${appName}`, - resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')), + resolve: (name) => require(`./Pages/${name}.vue`), setup({ el, app, props, plugin }) { return createApp({ render: () => h(app, props) }) .use(plugin) .mixin({ methods: { route } }) .mount(el); }, });
Update environment variables
You will need to update the environment variables that are explicitly exposed in your .env files and in hosting environments such as Forge to use the MIX_ prefix instead of VITE_:
- VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}" - VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}" + MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}" + MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
You will also need to update these references in your JavaScript code to use the new variable name and Node syntax:
- key: import.meta.env.VITE_PUSHER_APP_KEY, - cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER, + key: process.env.MIX_PUSHER_APP_KEY, + cluster: process.env.MIX_PUSHER_APP_CLUSTER,
Remove CSS imports from your JavaScript entry point(s)
If you are importing your CSS via JavaScript, you will need to remove these statements:
- import '../css/app.css';
Replace @vite with mix()
You will need to replace the @vite Blade directive with <script> and <link rel="stylesheet"> tags and the mix() helper:
- @viteReactRefresh - @vite('resources/js/app.js') + <link rel="stylesheet" href="{{ mix('css/app.css') }}"> + <script src="{{ mix('js/app.js') }}" defer></script>
Remove Vite and the Laravel Plugin
Vite and the Laravel Plugin can now be uninstalled:
npm remove vite laravel-vite-plugin
Next, you may remove your Vite configuration file:
rm vite.config.js
-
Juan F hace 1 año
Abajo te coloque el proceso, aquí te dejo el link con el mismo contenido vale,
https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md#migrating-from-vite-to-laravel-mix
Espero les sea de utilidad, saludos
-
Gloria Coral hace 1 año
¿Alguien sabe, si ya salio el video?
-
-
Willy Londoño hace 2 años
No se que realizó mal, pero sigo los pasos al pie de la letra, no me sale errores al ejecutar los comandos, aún así no veo en ningún lado el archivo app.css y las vistas me aparecen sin estilos.
-
Sebastian Chinga hace 2 años
x2
-
Victor Arana Flores hace 2 años
Hola Willy. este paquete solo puedes usarlo si es que utilizas web pack. Y ahora los nuevos proyectos vienen instalados con Vite.
Voy a tratar de crear un video en el que enseño a migrar de Vite a Web Pack para los interesados en instalar este paquete. -
Willy Londoño hace 2 años
Muchas gracias Victor por tu comentario, te lo agradezco mucho.
Encontre una solución, despues de realizar todo el proceso pego los cdn de bootstrap en las vistas del dashboar, app y guest.
-
Sammy Joseph hace 1 año
Willy, podría llamarse una solución temporal. Menos mal leí tu comentario antes de instalar Bootstrap.
-
Amilcar Salas hace 1 año
Hola Victor, tienes un video que permita psar de Vite a Web Pack para poder trabajar con bootstrap?
-
-
Jonathan Rojas hace 2 años
Excelente aclaración y guía, además que es sencillo.