28 - Laravel ahora usa Vite ¿Que ocurrió con Webpack?
HTML-код
- Опубликовано: 30 июл 2022
- En este capítulo de Laravel, hablaremos sobre el cambio reciente que ha sucedido en la configuración de Laravel, en la que se ha dejado de utilizar Webpack y se ha adoptado Vite como el nuevo paquete de herramientas para la compilación de activos. Vite es un paquete de herramientas moderno y rápido para la compilación de activos web, que se ha vuelto muy popular en la comunidad de desarrolladores web en los últimos años.
En este capítulo, te explicaremos por qué Laravel ha decidido hacer el cambio a Vite y cuáles son las ventajas que ofrece en comparación con Webpack. También cubriremos cómo configurar y utilizar Vite en tu proyecto Laravel, incluyendo la instalación de paquetes, la compilación de activos y la integración con Blade y otras características de Laravel.
Al final de este capítulo, estarás familiarizado con el cambio a Vite y tendrás los conocimientos necesarios para comenzar a utilizar Vite en tu proyecto Laravel y disfrutar de las ventajas que ofrece esta herramienta moderna y rápida.
------------------------------------------------------------------------------------------------
CURSOS
🔴 Facturacion electronica Perú: youtube.codersfree.com/larave...
🟠 Laravel avanzado: youtube.codersfree.com/larave...
🟢 Ecommerce: youtube.codersfree.com/ecommerce
🔵 Api: youtube.codersfree.com/api-re...
🟠 Plataforma de cursos: youtube.codersfree.com/plataf...
🔴 Vue e Ineria: youtube.codersfree.com/vue-3-...
🟣 Eloquent Avanzado: youtube.codersfree.com/eloque...
🟡 Pasarela de pagos: youtube.codersfree.com/pasare...
⚫ Laravel Web Socket: youtube.codersfree.com/larave...
🟣 Notificaciones: youtube.codersfree.com/notifi...
🟢 Laravel Excel: youtube.codersfree.com/larave...
🔵 Digital Ocean: youtube.codersfree.com/despli...
🟡 Laravel Voyager: youtube.codersfree.com/larave...
🟣 Datatable Livewire: youtube.codersfree.com/datata...
🟠 Tenancy for Laravel: youtube.codersfree.com/multi-...
🔵 TDD Laravel: youtube.codersfree.com/tdd-la...
⚫ Traducir páginas: youtube.codersfree.com/traduc...
🟠 Wire UI: youtube.codersfree.com/livewi...
🔴 Acortador de links: youtube.codersfree.com/acorta...
🟡 Banhammer for laravel: youtube.codersfree.com/banham...
🟢 Laravel backup: youtube.codersfree.com/larave...
🔵 Actualizar a Laravel 10: youtube.codersfree.com/actual...
-----------------------------------------------------------------------
DONACIONES
Patreon: / codersfree
PayPal: www.paypal.com/paypalme/Coder... 
Наука
![Jordan Adetunji - KEHLANI REMIX (feat. Kehlani) [Official Video]](http://i.ytimg.com/vi/EeJ8n5PxFGE/mqdefault.jpg)
Excelente información para mantenerse actualizado :)
Gracias Víctor, estos días sufri mucho en producción por vite. Sigue adelante. Éxitos en todo master!!!!! 😎😎😎
Maestro, te felicito pro dar en el clavo en al menos todas mis dudas, apenas andaba con un problema buscando inquieto en las pruebas.... pum, en proximo video de la playlist lo tacklea fuerte ! gracias.
gran aporte instale laravel 9 para probar y me llamo la atencion vite, me ahorraste la investigacion
¡Excelente ayuda! gracias por el aporte... saludos y un próspero año 2024.
Muy bien explicado, muchas gracias 👍
Gracias. Todo muy bien explicado. Me has ayudado a entender vite.
Excelente video. Mejor explicado imposible.
Felicitaciones, muchas Gracias y Feliz Año
Parece bueno. Me quitaste la duda del servidor que pensé que había que tener siempre activo. 👍🏼
Explicas muy bien, muchas gracias
Muchas gracias por la información.
Excelente explicación, muchas gracias.
Excelente video
Excelente contenido 👍
Gracias crack estaba que reventaba la compu buscando por que no me aparecían los estilos de tailwind jajaj 👌👌👌👌
Excelente!
Hoo genial, haber si haces un project con vite y ckeditor, seria genial estar informado
gracias hermano
gracias por tu explicacion, estoy empezando a aprender laravel y no entendia bien lo que hacia run dev, y mas que los videos que salen estan en otro idiomas. Ahora se que para visualizar los cambios de mis clases en mi servidor php debo tener abierto el servidor xamp y el artisan. De este modo no tengo que hacer a cada rato npm run build y despues php artisan serve, para visualizar los cambios.
Muchas gracias por la info, aun no me convence de usar laravel pero a mi hermano le vendra bien para sus nuevos proyectos
Jajajaja que hace viendo videos de laravel si no usa laravel usando la logica el que debe ver el video es su hermano XD
@@sirians2831 que no lo use no significa que este cerrado a las nuevas tecnologías y a conocer un poco más, siempre viene bien tener por lo menos una idea de las cosas además si uso vueJS y Vite se usa con vue puro también, y sobre todo eso al ver el vídeo ganó conocimiento para compartir y ayudo a mis conocidos
Justo era lo que buscaba, gracias por tu aporte, apenas estoy creando un nuevo proyecto con el nuevo Laravel, y estoy viendo lo de Vite (de donde salio esto? jejeje) y lo subi a produccion y no se muestra el acceso de login y register, con tu explicacion muy bien se entendió. Gracias
buen video Victor, una actualizacion de los planes que tenias de crear un projeto de facturacion pls.
Hola buenas, como siempre gracias por tus videos, solo para comentar algo que estuve instalando la nueva versión de Laravel con vite a día de hoy y no tuve ningún problema con los estilos, simplemente arranque el servidor de Laravel y con eso corre a la perfección, quizás más adelante me salga algo, pero de momento va bien, gracias por todo...!!!!
Hola José, si recién has creado un proyecto solo tienes cargado algunos estilos (los mismos que se usan para mostrar las vistas de login y dashboard) para que puedas usar todos los estilos tendrás que prender el servidor de vite. Saludos
@@CodersFree gracias, seria excelente si de alguna manera podrias enseñar como instarlar Laravel + Jetstream + Bootstrap + vite, buenas noches gracias..
Tengo este problema sabes como solucionarlo?
Unable to locate file in Vite manifest
Hola excelente video, pero tengo un problema, el vite deja de refrescar la página cuando empiezo a configurar los archivos siguiendo los pasos para instalar Adminlte tal como lo explicas en tu video, por que sucede?
Un tip: no usen Brave porque los estilos no cargan cuando está corriendo el servidor de Vite.
solo desactiva los escudos de brave en esa pagina y funciona
alguien sabe como puedo hacer para que cargue el run build tambien tome una carpeta de imagenes completas de esta manera en el vite.config.js:
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
'resources/images/*'
],
ya que ejecuto el comando npm run build sale el error (Could not resolve entry module "resources/images/*") y solo corre cuando pongo imagen por imagen en el vite.config.js y no lo toma toda la carpeta.
Hola Victor, hago la instalacion de un nuevo proyecto con laravel new projecto --jet pero no me sale lo mismo que a usted. No se ejecuta el servidor de vite y ademas me aparece el archivo webpack.mix.js..... como hago para solucionar eso? me interesa mas trabajar con vite como uated
He realizado los.pasos según el tutorial pero no compila nada y el form del login se queda sin estilos. ¿A qué debera este punto?
He estado instalando la versión 8.8x y me sale siempre 3 errores de child desde el mix, he tenido que modificar muchos archivos. Es bueno tener Vite.
Gracias por la info. Espero que merezca la pena el cambio de webpack a vite. Supongo que habrá qu toquetear los requerimientos de composer.json para que no nos destroce los proyectos con webpack. Por cierto, ¿Seguirás con el curso de edición de imágenes en ckeditor 5? Un saludo
Amigo, recuerda que composer sirve para instalar paquetes php, mientras que vite es el compilador de nuestros assets. Una cosa no tiene que ver con la otra 😁
@@CodersFree Ya lo se pero es composer quien se encarga de actualizar las dependencias y si lo dejas tal como está, la proxima vez que intentes actualizar las dependencias puedes fastidiar algo. Me explico. Esto es parte del composer.json:
"require": {
"php": "^8.0.2",
"guzzlehttp/guzzle": "^7.2",
"laravel/framework": "^9.2",
"laravel/sanctum": "^2.14.1",
"laravel/tinker": "^2.7"
},
Como puedes ver, mi versión es la 9.2 y quiero seguir en ella y seguir usando webpack por lo que tendré que hacer algo así:
"require": {
"php": "^8.0.2",
"guzzlehttp/guzzle": "^7.2",
"laravel/framework": "9.2",
"laravel/sanctum": "2.14.1",
"laravel/tinker": "2.7"
},
Y no permitir que upgradee dichas librerías. ¿Ves que he quitado los caracteres comodín? Un saludo
Hola Alberto, si esta trabajando con Webpack, por más que se actualice la versión de Laravel, tu seguirías trabajando con webpack.
Tendrías que hacer una migración manual vite, si quisieras usar esa tecnología
@@CodersFree Gracias Víctor, eso es lo que quería saber :)
Yo estaba con miedo de hacer el update a L9 porque pensé que iba a cambiarme el webpack que ya tenía configurado para un cliente 😂
De todas maneras, probé Vite y es una bestia!
Hola estoy usando el comando php artisan serve y me sale este error: Could not open input file: artisan || alguien sabe la solucion?
Cuando compilo localmente los assets, me sigue tratando de buscar el servidor de Vite... hay forma de evitar esto y no tener siempre corriendo el servidor de vite?
@juanxolin
Tengo la misma inquietud, estoy realizando un sitio que no será cargado en un servidor web, sino es para usarse localmente (el cliente así lo quiere). Si encontraste cómo realizarlo, serías tan amable de compartir el dato? Te agradecería mucho!
Gracias Víctor. Te quería comentar que para importar archivos css en la carpeta app.css me genera un error. ¿Hay una nueva forma de importar estos archivos?
Gracias por tu tiempo de antemano
En el video explico todo lo que hay que saber sobre Vite. Si te marca error te recomiendo ver los requerimientos mínimos para trabajar con Vite, o tomale captura al error y publicalo en el grupo Coders Free de Facebook
Cielos, tu video a x1.75 de velocidad suena normal. Procura modificar eso en la edición, en cuando el resto, gracias por la info.
Ahora no sé cómo importar de forma dinámica todos los archivos Vue en la app :c ahora tengo que hacerlo de uno en uno o donde se necesite
Porque no me funciona los estilos de tailwind
man a donde puedo contactarte para una implementación de un proyecto? ? ?
Esta modificación tengo entendido que sirve solo si utilizamos las vistas con Blade??
Como menciono en el video, Vite es el nuevo compilador de assets.
tengo el servidor de vite encendido escuchando los cambios pero es nesesario cargar nuevamente la pagina para poder visualizarlos, alguien sabe porque pasa esto?
Encontraste una solución para que refresque la página automáticamente?
Como hago para subir un proyecto de laravel jetstream que tiene vite a un hosting como hostinger
codersfree.com/cursos/deploy-en-proyectos-laravel-guia-practica
4:08 O sea, reemplaza en comando el NPM RUN WATCH
Como podemos ingresar a nuestro proyecto con el servidor local php -
artisan serve - -host con vite?
cambia el app URL del .env a tu localhost, y luego ejecuta artisan serve y después npm run dev, aunque hay que configurar los assets en el vite.config y usar la directiva @vite
Alpinejsno funciona, alguien sabe cuál es el problema.
Yo estoy usando laraval 9.22 con el adminlte y no veo que hace el vite, no se si para eso no lo usa, pero la verdad estoy medio confundido como funciona ahora laravel.
Vite es el compilador de assets estimado.
Tendras algun curso de laravel donde uses Vite y React ?
No estimado
@@CodersFree gracias por tu pronta respuesta soy nuevo en esto de laravel hay manera de validar un input text... por ejemplo si escribo un usuario que ya existe en la base de datos le muestre un mensaje al usuario al momento de saltar al siguiente input...me refiero que lo valide en un onchange ...que el usuario no deba oprimir siquiera el boton para enviar los datos del formulario. Yo lo hacia en codigo nativo usando ajax pero aqui se podra con Vue o que deberia de usar
actualiza los tutoriales
?
?
?
?
Crea un canal y haz tu videos actualizados que no se a que putas te refieres si se supone que esta funcion es actual, se refiere a que cambie todo los videos donde usaba webpack por vite? jajajaja a ver si se pone a estudiar lo quiere todo molidito
hice lo que tu y no refresca nada!! tache
Encontraste una solución para que refresque la página automáticamente?
Hola Victor, tuve algunos inconvenientes con el servidor local, la dirección de los estilos siempre se mostraba así ::1:5173, después de probar con varios proyectos nuevos, me di cuenta que el archivo llamado hot tiene esa linea de código, la cambie por la que genera vite y funciono, pero aun no entiendo porque pasa esto.
donde esta ese archivo no lo encuentro