29. Como utilizar Bootstrap con Laravel Jetstream

aun sin resolver

Aún sin resolver

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

Ok, gracias

Hola Juan, gracias por el aporte.

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

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.

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

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.

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!

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

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

¿Alguien sabe, si ya salio el video?

x2

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.

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.

Willy, podría llamarse una solución temporal. Menos mal leí tu comentario antes de instalar Bootstrap.

Hola Victor, tienes un video que permita psar de Vite a Web Pack para poder trabajar con bootstrap?