No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

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
Recursos

Cuando desplegamos nuestras aplicaciones con Firebase Hosting necesitamos un archivo firebase.json donde podemos configurar la siguiente informaci贸n:

  • 鈥減ublic鈥: Es el 煤nico campo obligatorio en este archivo, aqu铆 debemos indicar la carpeta o directorio con nuestros archivos est谩ticos.
  • 鈥渋gnore鈥: Muchos archivos y carpetas (el directorio node_modules, por ejemplo) los necesitamos para trabajar en entornos de desarrollo, no para desplegar nuestra aplicaci贸n, podemos omitirlos y ahorrarnos algo de tiempo al subir las diferentes versiones del proyecto.
  • 鈥渞edirects鈥: Podemos configurar algunas rutas de nuestra aplicaci贸n para que apunten a alg煤n sitio web o a otra parte de nuestra aplicaci贸n.
  • 鈥渞ewrites鈥: As铆 como los redirects, podemos configurar algunas rutas o patrones de nuestra aplicaci贸n, pero en vez de cambiar la URL, vamos a seleccionar el archivo est谩tico que debe aparecer en estas rutas especiales.

Aportes 11

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

{
  "hosting": {
    "public": "public", 
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "redirects": [
      {
        "source": "/posts",
        "destination": "/",
        "type": 301
      }
    ],
    "rewrites": [ 
      {
        "source": "/**",
        "destination": "/index.html"
      }
    ],
    "headers": [ 
      {
        "source": "**/*[email protected](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鈥檚 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. =(

鈥**/*[email protected](jpg|jpeg |gif|png)鈥