En este tutorial, vamos a explorar cómo funciona Vite en producción cuando se utiliza con Laravel. Vite es una herramienta de compilación de frontend extremadamente rápida y eficiente que se ha vuelto muy popular en la comunidad de desarrolladores de JavaScript en los últimas años. En este tutorial, aprenderás a configurar Vite en un proyecto de Laravel y cómo optimizar su rendimiento para su uso en producción.
Paso 1: Instalar Vite en Laravel
Lo primero que debes hacer es asegurarte de tener Node.js instalado en tu sistema. Puedes descargarlo e instalarlo desde su sitio web oficial si aún no lo tienes.
Una vez que tienes Node.js instalado, puedes instalar Vite globalmente en tu sistema utilizando el siguiente comando:
npm install -g create-viteLuego, crea un nuevo proyecto de Vite en tu directorio Laravel utilizando el siguiente comando:
create-viteEsto generará una estructura de directorios básica para tu proyecto de Vite. Ahora, debes mover todos los archivos generados a tu directorio Laravel y configurar la integración con Laravel.
Paso 2: Configurar Vite en Laravel
Primero, necesitas instalar las dependencias de Vite en tu proyecto Laravel. Puedes hacerlo utilizando el siguiente comando:
npm install vite @vitejs/plugin-vueLuego, debes configurar Vite para que trabaje junto con Laravel. Para ello, crea un archivo vite.config.js en la raíz de tu proyecto y configúralo de la siguiente manera:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/': 'http://localhost:8000'
}
}
})Esta configuración te permite usar Vue junto con Vite en tu proyecto Laravel, y además configura un proxy para redirigir las solicitudes a tu servidor de desarrollo de Laravel.
Paso 3: Integrar Vite con Laravel
Para integrar Vite con Laravel, necesitas crear una vista Blade que cargue los archivos generados por Vite. Puedes hacerlo agregando el siguiente código a tu archivo blade.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name', 'Laravel') }}</title>
<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="{{ mix('/js/app.js') }}"></script>
</body>
</html>Este archivo Blade carga los archivos CSS y JS generados por Vite en tu proyecto Laravel. Ahora, cuando accedas a esta vista desde tu navegador, verás la aplicación frontend creada con Vite.
Paso 4: Construir y optimizar para producción
Una vez que tienes configurado Vite en tu proyecto Laravel, debes construir y optimizar los archivos para su uso en producción. Puedes hacer esto usando el siguiente comando:
npm run buildEsto generará los archivos optimizados en la carpeta dist de tu proyecto Vite. Luego, simplemente copia estos archivos a tu proyecto Laravel y asegúrate de que las rutas en tu archivo Blade apunten a los nuevos archivos generados.
Conclusión
En este tutorial, aprendiste cómo funciona Vite en producción cuando se usa junto con Laravel. Configuraste Vite en un proyecto Laravel, integraste Vite con Laravel y optimizaste los archivos para su uso en producción. Ahora estás listo para desarrollar aplicaciones frontend extremadamente rápidas y eficientes utilizando Vite y Laravel juntos. ¡Buena suerte!
muchas gracias
Me sacaste de todas las dudas eres un crack men!
Excelente video y muy claro el contenido.
Buenas tardes, tengo un problema, cuando corro el npm run build, se ejecuta sin problema pero al recargar la página no se aplica el estilo, en la consola de desarrollador me dice que tiene error 404, estoy en laravel 10 y viste 4.5.3
Enhorabuena por el curso! de lo mejor que he visto! Una duda. Al hacer npm run build, subo los ficheros al servidor compartido que tiene el directorio www en vez de public y me da el error de que no encuentra el manifest en …/public/… cómo puedo configurar el directorio en el que vite tiene que buscar el manifest?
como no tener error con npm run dev si lo subo a un hosting como hostinger?
Una duda: Si yo tengo JS que en su interior tiene una funcion, por que al compilarlos con vite me los da vacios
me aparece mix-manifest.json no existe
¿Se puede usar el build en desarrollo? Me explico, estoy en un proyecto que no será subido a servidor web, se ejecutará localmente nada más.
Si se puede hacer, agradecería ese dato. ¡Mil gracias!
Están increíbles tus videos ¿Tendrás algún video utilizando o enseñando a Utilizar laravel livewire power Grid ?
muy buena explicacion
Super !!!
🥳🥳🥳