Solucionando el Error 404 al Servir Archivos Estáticos con Bun y Hono

En este artículo, abordaremos un problema común que enfrentan los desarrolladores al intentar servir aplicaciones frontend estáticas utilizando Bun y Hono, específicamente cuando ocurre un error 404 incluso cuando los archivos existen. Si te encuentras en esta situación, aquí hay algunas sugerencias para resolver el problema.

Entendiendo el Problema

Cuando intentas servir archivos estáticos desde un servidor creado con Bun y Hono, es posible que tu aplicación devuelva un error 404. Esto suele suceder por rutas incorrectas o configuraciones no óptimas en la asignación del directorio de archivos estáticos.

Tu código muestra que has intentado usar varias rutas, pero persiste el error. Aquí hay algunas claves para solucionarlo.

Pasos para Solucionar el Error

1. Verifica la Estructura del Directorio:
   Asegúrate de que la estructura del directorio coincida con las rutas que proporcionaste. Por ejemplo, las rutas en tu código apuntan a "../dist/links/assets/" y "../dist/portfolio/assets/", verifica que estos directorios y archivos realmente existan.

2. Ajusta las Rutas en serveStatic:
   Es posible que necesites ajustar la configuración de las rutas para que se correspondan correctamente con las rutas físicas. Asegúrate de que las rutas que pasas a serveStatic sean absolutas o relativa correctamente desde donde se está ejecutando el servidor.

   Por ejemplo, intenta usar path.resolve() para asegurarte de que las rutas sean correctas:

   import path from 'path';
   ...
   app.use("/assets/*", serveStatic({ root: path.resolve('../dist/links/assets/') }));
   app.use(
    "/portfolio/assets/*",
    serveStatic({ root: path.resolve('../dist/portfolio/assets/') })
   );

3. CORS y Métodos HTTP:
   Aunque tu configuración de CORS parece correcta, asegúrate de que las solicitudes a los archivos estáticos se realicen utilizando los métodos permitidos. Solo has permitido GET y POST. Asegúrate de que las peticiones a los recursos estáticos están utilizando GET.

4. Prueba la Ruta Directamente:
   Intenta acceder a una ruta de archivo estático directamente en tu navegador. Por ejemplo, intenta navegar a http://localhost:3000/assets/archivoDeseado.ext para ver si el archivo se sirve correctamente. Esto te dará una mejor idea de si el problema es con la ruta o con algo más en tu configuración.

5. Manejo de Errores en el Servidor:
   Asegúrate de que tu servidor está configurado para manejar errores. Puedes agregar lógica para registrar un mensaje más detallado si ocurre un error 404, lo que puede ayudarte a diagnosticar el problema.

Conclusión

Sirviendo aplicaciones estáticas con Bun y Hono debería ser un proceso fluido si las rutas y configuraciones son correctas. Con los pasos anteriores, deberías poder identificar y resolver el problema del error 404. Recuerda siempre verificar la existencia de archivos y la configuración de rutas. Si el problema persiste, no dudes en consultar la documentación oficial y buscar ayuda en comunidades de desarrolladores. ¡Buena suerte!