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

    It Vmc hace 4 meses

    Video no disponible

    • Alexander Zarate hace 2 meses

      aun sin resolver

  • Gloria Coral

    Gloria Coral hace 11 meses

    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 11 meses

      Hola Gloria, este paquete fue creado para trabajar con Laravel 8 y Laravel Mix. Actualmente no es disponible para Laravel 10

    • Gloria Coral hace 11 meses

      Ok, gracias

  • Erick Aya

    Erick Aya hace 11 meses

    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

    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

    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 11 meses

      ¿Se omite la instalación de laravel-mix?

  • Walter

    Walter hace 1 año

    ? 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

    Juan Ramos hace 1 año

    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 1 año

      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 1 año

      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 11 meses

      ¿Alguien sabe, si ya salio el video?

  • Willy Londoño

    Willy Londoño hace 1 año

    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 1 año

      x2

       

    • Victor Arana Flores hace 1 año

      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 1 año

      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

    Jonathan Rojas hace 1 año

    Excelente aclaración y guía, además que es sencillo.