Redirects, rewrites y headers

{
  "hosting": {
    "public": "public", 
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "redirects": [
      {
        "source": "/posts",
        "destination": "/",
        "type": 301
      }
    ],
    "rewrites": [ 
      {
        "source": "/**",
        "destination": "/index.html"
      }
    ],
    "headers": [ 
      {
        "source": "**/*.@(jpg|jpeg|gif|png)", 
        "headers":[
          {
            "key": "Cache-Control",
            "value": "max-age=7200"
          }
        ]
      }
    ]
  }
}

Es posible ver la configuración de headers:

En resumen, el archivo de configuración de Firebase que vemos en el curso tiene los siguientes campos:

• public (String): Especifica que directorio va a ser el que se va a desplegar en Firebase, por defecto es public pero podemos escoger cualquier nombre. Este es el único campo obligatorio que nuestro archivo tenga si deseamos desplegar a Firebase Hosting.
• ignore (Array): Es un arreglo de strings, sirve para prevenir subir algunos directorios o ficheros al hosting. Puedes usar la misma sintaxis que se usa en el .gitignore (globs) aquí para estos archivos. Si no tienes idea sobre Gitignore, puedes verlo en la siguiente clase del Curso Profesional de Git y GitHub.
• rewrites (Array): Recibe un arreglo de objetos. Nos sirve para mostrar un mismo contenido a diferentes URLs. Esto es especialmente útil si estamos haciendo una Single Page Application (SPA) ya que podríamos decirle a Firebase que todas las rutas sean servidas con un archivo específico.
  • source (String): Usando globs, el patrón de URL que al coincidir debe servir otro archivo.
  • regex (String): Hace lo mismo que logra source, pero en lugar de usar globs usa RegEx.
  • destination (String): El archivo que se va a ser servido si la ruta especificada en source o regex se cumple.
• redirects (Array): Recibe un arreglo de objetos. Nos sirve para que el navegador realice una redirección si el usuario accede a ciertas URLs. Es diferente al rewrite, pues el rewrite mantendra la URL que el usuario ingresó mientras el redirect también hará un cambio en la misma.
  • source (String): Usando globs, el patrón de URL que al coincidir debe servir otro archivo.
  • regex (String): Hace lo mismo que logra source, pero en lugar de usar globs usa RegEx.
  • destination (String): La ruta hacia donde debe de ir la página web si la ruta especificada en source o regex se cumple.
  • type (Number): El Status Code que debe devolver el response:
    • 301: Moved Permanently
    • 302: Temporary Redirect
• headers (Array): Recibe un arreglo de objetos. Nos permite pasar algunos Headers extra en la respuesta de ciertos recursos.
  • source (String): Usando globs, el patrón de URL que al coincidir debe servir otro archivo.
  • regex (String): Hace lo mismo que logra source, pero en lugar de usar globs usa RegEx.
  • headers (Array): Recibe un arreglo de objetos. La lista de headers que se deben aplicar si la ruta especificada en source o regex se cumple.
    • key (String): La nombre del header (por ejemplo: Cache-Control).
    • value (String): El valor que tendrá el header.

Si quieren conocer mas a profundidad el tema, les dejo la documentación oficial
Documentación firebase hosting

Esto es como una manera de configurar un .htaccess en el hosting de firebase, es interesante

También cuando hacemos una busqueda en google, hay una flecha a cada lado de las URL’s para abrirlas con la caché almacenada

Si quiero llamar a un api, externo, lo puedo hacer …?
/api --> http://api.com, que retorna datos json, etc.

Estas configuraciones siempre suelen ser importantes así que que bueno que firebase te brinda una forma de configurarlos.

PD. Si es posible ver los headers, desde la consola de desarrollador en el apartado Network puedes seleccionar cualquier imagen y te mostrará sus headers

Porque si tecleamos la url_proyecto/otracosa/mascosas
nos muestra la página index.html pero sin estilos.

el rewrite no lo entendi muy bien parece lo mismo que redirect. =(

“**/*.@(jpg|jpeg |gif|png)”