Integración de Backend

Nota

Si quieres servir el HTML utilizando herramientas backend tradicionales (como Rails, Laravel) pero usando Vite para servir los recursos, revisa la lista de integraciones existentes en Awesome Vite.

Si necesitas una integración personalizada, puedes seguir los pasos de esta guía para configuración manual.

1. En tu configuración de Vite, configura el archivo de entrada y habilita el manifest de compilación:

   // vite.config.js
   export default defineConfig({
     build: {
       // genera el archivo .vite/manifest.json en outDir
       manifest: true,
       rollupOptions: {
         // sobreescribe la entrada por defecto .html
         input: '/path/to/main.js',
       },
     },
   })

   Si no has desactivado el polyfill de precarga de modulos, tambien necesitarás importarlo en tu entrada.

   // agrega esto en el archivo de entrada de tu app
   import 'vite/modulepreload-polyfill'

2. Para desarrollo: coloca lo siguiente en la plantilla de servidor HTML (reemplaza http://localhost:5173 con la URL local donde Vite se está ejecutando):

   <!-- si es desarrollo -->
   <script type="module" src="http://localhost:5173/@vite/client"></script>
   <script type="module" src="http://localhost:5173/main.js"></script>

   Para servir correctamente los recursos, tienes dos opciones:

   • Asegúrarse de que el servidor esté configurado para enviar solicitudes de recursos estáticos al servidor de Vite.
   • Configurar server.origin para que las URL de recursos generados resuelvan en la URL del servidor backend en lugar de una ruta relativa.

   Esto es necesario para que los recursos, como imágenes, se carguen correctamente.

   Ten en cuenta que si estas usando React con @vitejs/plugin-react, tambien necesitarás agregar esto antes del script de arriba, esto porque el plugin no podrá modificar el HTML que estás sirviendo (reemplaza http://localhost:5173 con la URL local donde Vite se está ejecutando):

   <script type="module">
     import RefreshRuntime from 'http://localhost:5173/@react-refresh'
     RefreshRuntime.injectIntoGlobalHook(window)
     window.$RefreshReg$ = () => {}
     window.$RefreshSig$ = () => (type) => type
     window.__vite_plugin_react_preamble_installed__ = true
   </script>

3. Para producción: despues de ejecutar vite build, se generará un archivo .vite/manifest.json junto a otros archivos de recursos. Un ejemplo de un archivo manifest sería algo como esto:

   {
     "main.js": {
       "file": "assets/main.4889e940.js",
       "src": "main.js",
       "isEntry": true,
       "dynamicImports": ["views/foo.js"],
       "css": ["assets/main.b82dbe22.css"],
       "assets": ["assets/asset.0ab0f9cd.png"]
     },
     "views/foo.js": {
       "file": "assets/foo.869aea0d.js",
       "src": "views/foo.js",
       "isDynamicEntry": true,
       "imports": ["_shared.83069a53.js"]
     },
     "_shared.83069a53.js": {
       "file": "assets/shared.83069a53.js"
     }
   }

   • El manifest tiene una estructura Record<name, chunk>.
   • Para fragmentos de entrada fija o dinámica, la key es la ruta src relativa de la raíz del proyecto.
   • Los fragmentos contendrán información en sus importaciones estaticas y dinamicas (ambos son keys que mapean al correspondiente fragmento en el manifest), y tambien su correspondiente css y archivo de recurso estatico (si los hay).

   Tambien puedes usar este archivo para renderizar links o precargar directivas con archivos con hash (nota: la sintaxis aquí es meramente explicativa, reemplazalo con el lenguage de plantilla del servidor.)

   <!-- if production -->
   <link rel="stylesheet" href="/assets/{{ manifest['main.js'].css }}" />
   <script type="module" src="/assets/{{ manifest['main.js'].file }}"></script>