diff --git a/frontend/public/bootstrap.js b/frontend/public/bootstrap.js
new file mode 100644
index 0000000..37ed862
--- /dev/null
+++ b/frontend/public/bootstrap.js
@@ -0,0 +1,70 @@
+// frontend/public/bootstrap.js
+
+(function() {
+  // El dominio donde se alojan los widgets
+  const WIDGETS_HOST = 'https://widgets.eldia.com';
+
+  // Función para cargar dinámicamente un script
+  function loadScript(src) {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.type = 'module';
+      script.src = src;
+      script.onload = resolve;
+      script.onerror = reject;
+      document.head.appendChild(script);
+    });
+  }
+
+  // Función para cargar dinámicamente una hoja de estilos
+  function loadCSS(href) {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = href;
+    document.head.appendChild(link);
+  }
+
+  // Función principal
+  async function initWidgets() {
+    try {
+      // 1. Obtener el manifest.json para saber los nombres de archivo actuales
+      const response = await fetch(`${WIDGETS_HOST}/manifest.json`);
+      if (!response.ok) {
+        throw new Error('No se pudo cargar el manifest de los widgets.');
+      }
+      const manifest = await response.json();
+
+      // 2. Encontrar el punto de entrada principal (nuestro main.tsx)
+      const entryKey = Object.keys(manifest).find(key => manifest[key].isEntry);
+      if (!entryKey) {
+        throw new Error('No se encontró el punto de entrada en el manifest.');
+      }
+      
+      const entry = manifest[entryKey];
+      const jsUrl = `${WIDGETS_HOST}/${entry.file}`;
+      
+      // 3. Cargar el CSS si existe
+      if (entry.css && entry.css.length > 0) {
+        entry.css.forEach(cssFile => {
+          const cssUrl = `${WIDGETS_HOST}/${cssFile}`;
+          loadCSS(cssUrl);
+        });
+      }
+
+      // 4. Cargar el JS principal y esperar a que esté listo
+      await loadScript(jsUrl);
+
+      // 5. Una vez cargado, llamar a la función de renderizado
+      if (window.MercadosWidgets && typeof window.MercadosWidgets.render === 'function') {
+        window.MercadosWidgets.render();
+      }
+
+    } catch (error) {
+      console.error('Error al inicializar los widgets de mercados:', error);
+    }
+  }
+
+  // Iniciar todo el proceso
+  initWidgets();
+
+})();
\ No newline at end of file
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index fba117c..b0638be 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,10 +1,10 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
-// https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-  // Eliminamos por completo la sección 'build'.
-  // Dejamos que Vite use su configuración por defecto, que es la mejor
-  // para generar archivos con hashes únicos para invalidación de caché.
+  build: {
+    outDir: 'dist',
+    manifest: true, // Esto es crucial, debe estar en true
+  }
 })
\ No newline at end of file