Configuración Personalizada de Hosting con Firebase

Potencia tu implementación en Firebase con una configuración precisa de firebase.json. Aquí se explica cómo ajustar public, ignore, la página 404, crear redirects, aplicar rewrites y añadir headers de caché para mejorar el rendimiento. Todo se basa en el flujo real de despliegue con firebase deploy y verificación en la consola de administración.

¿Cómo configurar firebase.json para Firebase Hosting?

Configurar hosting en un archivo JSON implica usar pares atributo–valor dentro del objeto hosting. El único campo obligatorio es public: ahí va la carpeta que se desplegará. Además, ignore impide subir archivos de configuración, archivos ocultos y los node_modules. Al desplegar, se genera una página 404 que puedes personalizar.

• Campo public: carpeta que se publica, por ejemplo "public".
• Campo ignore: evita subir archivos de config, ocultos y node_modules.
• Página 404: aparece cuando una ruta no existe; se puede editar.
• Versiones y rollback: se gestionan en la consola de administración.

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

¿Qué son los redirects y cómo configurarlos?

Un redirect redirige al usuario si la URL coincide con un patrón. Se define con un arreglo de objetos en redirects, cada uno con source, destination y type.

¿Cómo definir source y destination?

• source: patrón de URL a capturar, por ejemplo "/post".
• destination: adónde redirigir, por ejemplo "/" para volver al dominio.

{
  "hosting": {
    "public": "public",
    "redirects": [
      {
        "source": "/post",
        "destination": "/",
        "type": 301
      }
    ]
  }
}

¿Qué código HTTP usar en type?

• type: según se explicó, con 301 se hace un redireccionamiento temporal.
• Puedes definir varios redirects: agrega más objetos separados por comas.
• Aplica cambios con firebase deploy y verifica la nueva versión en la consola.

¿Cómo usar rewrites y headers para control avanzado?

Un rewrite sobreescribe lo que devuelve una ruta y sirve un archivo local. Por ejemplo, enviar siempre index.html para cualquier ruta. Los headers agregan metadatos HTTP, como Cache-Control, para mejorar el rendimiento.

¿Cómo reescribir rutas al index.html?

• Objetivo: que cualquier URL muestre el index.html.
• Patrón de captura: "/**" para cubrir todo lo que siga al dominio.

{
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "/**",
        "destination": "/index.html"
      }
    ]
  }
}

• Efecto: si el usuario escribe una ruta inexistente, se sirve el index.html.
• Despliegue rápido: no cambia la app, solo el archivo de configuración.

¿Cómo agregar headers de caché para imágenes?

• Meta: añadir headers para que imágenes se guarden en caché por dos horas.
• Clave–valor: key es "Cache-Control" y value es "max-age=7200".
• Se puede aplicar a tipos JPG, JPEG, GIF y PNG.

{
  "hosting": {
    "public": "public",
    "headers": [
      {
        "source": "**/*.jpg",
        "headers": [
          { "key": "Cache-Control", "value": "max-age=7200" }
        ]
      },
      {
        "source": "**/*.jpeg",
        "headers": [
          { "key": "Cache-Control", "value": "max-age=7200" }
        ]
      },
      {
        "source": "**/*.gif",
        "headers": [
          { "key": "Cache-Control", "value": "max-age=7200" }
        ]
      },
      {
        "source": "**/*.png",
        "headers": [
          { "key": "Cache-Control", "value": "max-age=7200" }
        ]
      }
    ]
  }
}

• Por defecto el navegador guarda por una hora, aquí se sobrescribe a dos horas.
• También puedes apuntar a un archivo específico, por ejemplo "index.html".
• Despliega y valida la versión actualizada en la consola.

¿Quieres que revisemos un caso de redirects, rewrites o headers para tu proyecto? Cuéntame en los comentarios qué patrón necesitas y lo armamos juntos.