You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

2 Días
2 Hrs
20 Min
56 Seg
Curso de Firebase 5 para Web

Curso de Firebase 5 para Web

Juan Guillermo Gómez Torres

Juan Guillermo Gómez Torres

Redirects, rewrites y headers

27/32
Resources

When we deploy our applications with Firebase Hosting we need a firebase.json file where we can configure the following information:

  • "public": this is the only mandatory field in this file, here we must indicate the folder or directory with our static files.
  • "ignore": Many files and folders (the node_modules directory, for example) we need them to work in development environments, not to deploy our application, we can omit them and save some time when uploading the different versions of the project.
  • "redirects": We can configure some routes of our application to point to some website or to another part of our application.
  • "rewrites": As well as the redirects, we can configure some routes or patterns of our application, but instead of changing the URL, we will select the static file that must appear in these special routes.

Contributions 11

Questions 3

Sort by:

Want to see more contributions, questions and answers from the community?

{
  "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)”