Ponte al día con lo más destacado de Firebase en Google I/O 2023. Más información

Prueba tu app web de forma local, comparte los cambios con otras personas y, luego, impleméntala

Antes de implementar en tu sitio, te recomendamos consultar y probar los cambios. Firebase Hosting te permite consultar y probar los cambios de forma local y, además, interactuar con los recursos del proyecto de backend emulado. Si necesitas que tus compañeros de equipo vean y prueben tus cambios, Hosting puede crear URL de vista previa de tu sitio, las que son temporales y se pueden compartir. Incluso admitimos una integración en GitHub para implementar a partir de una solicitud de extracción.

Antes de comenzar

Sigue los pasos que se mencionan en la página de introducción de Hosting, específicamente, las siguientes tareas:

  1. Instala Firebase CLI o actualízala a la versión más reciente.
  2. Conecta el directorio del proyecto local (que incluye el contenido de tu app) a tu proyecto de Firebase.

De manera opcional, puedes implementar el contenido y la configuración de Hosting de tu app, pero no es un prerrequisito para los pasos en esta página.

Paso 1: Realiza pruebas de forma local

Si realizas iteraciones rápidas o quieres que la app interactúe con los recursos del proyecto de backend emulados, puedes probar de forma local el contenido y la configuración de Hosting. Cuando realizas pruebas locales, Firebase entrega tu aplicación web en una URL alojada localmente.

Hosting forma parte de Firebase Local Emulator Suite, que permite que tu app interactúe con el contenido y la configuración de Hosting emulados, así como, de manera opcional, con tus recursos de proyecto emulados (funciones, bases de datos y reglas).

  1. Opcional: De forma predeterminada, tu app alojada de forma local interactuará con los recursos del proyecto (funciones, base de datos, reglas, etc.) reales, no emulados. De manera opcional, puedes conectar tu app para que use cualquier recurso del proyecto emulado que hayas configurado. Obtén más información: Realtime Database | Cloud Firestore | Cloud Functions

  2. Desde la raíz del directorio del proyecto local, ejecuta el siguiente comando:

    firebase emulators:start

  3. Abre tu aplicación web en la URL local que muestra la CLI (generalmente http://localhost:5000).

  4. Para actualizar la URL local con los cambios, actualiza el navegador.

Realiza pruebas desde otros dispositivos locales

De forma predeterminada, los emuladores solo responden a las solicitudes de localhost. Esto significa que podrás acceder al contenido alojado mediante el navegador web de tu computadora, pero no desde otros dispositivos de la red. Si quieres realizar pruebas desde otros dispositivos locales, configura tu firebase.json de la siguiente manera:

"emulators": {
    // ...

    "hosting": {
      "port": 5000
      "host": "0.0.0.0"
    }
  }

Paso 2: Obtén una vista previa y compártela

Si deseas que otras personas vean los cambios en tu app web antes de publicarlos, puedes usar los canales de vista previa.

Después de la implementación en un canal de vista previa, Firebase entrega tu app web en una “URL de vista previa”, que es una URL temporal que se puede compartir. Cuando usas una URL de vista previa, la app web interactúa con el backend real de todos los recursos del proyecto (excepto las funciones “fijadas” en la configuración de tus reescrituras).

Ten en cuenta que, aunque las URLs de vista previa son difíciles de adivinar (ya que contienen un hash aleatorio), son públicas. Por lo tanto, cualquier persona que conozca la URL puede acceder a ella.

  1. Desde la raíz del directorio del proyecto local, ejecuta el siguiente comando:

    firebase hosting:channel:deploy CHANNEL_ID

    Reemplaza CHANNEL_ID por una cadena sin espacios (por ejemplo, feature_mission-2-mars). Este ID se usará para crear la URL de vista previa asociada con el canal de vista previa.

  2. Abre la app web en la URL de vista previa que muestra la CLI. Será similar a esta: PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

  3. Para actualizar la URL de la vista previa con cambios, ejecuta el mismo comando nuevamente. Asegúrate de especificar el mismo CHANNEL_ID en el comando.

Obtén más información para administrar canales de vista previa, lo que incluye configurar el vencimiento de un canal.

Firebase Hosting admite una acción de GitHub que crea y actualiza automáticamente una URL de vista previa cuando confirmas los cambios en una solicitud de extracción. Aprende a configurar y usar esta acción de GitHub.

Paso 3: Implementa

Cuando estés listo para compartir tus cambios con otras personas, implementa tu contenido y configuración de Hosting en tu canal publicado. Firebase ofrece varias opciones para este paso según tu caso de uso (consulta las opciones a continuación).

Opción 1: Realiza una clonación a partir del canal de vista previa en el canal publicado

Esta opción garantiza que implementes en tu canal publicado los mismos contenidos y configuración que probaste en un canal de vista previa. Obtén más información sobre la clonación de versiones.

  1. Desde cualquier directorio, ejecuta el siguiente comando:

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

    Reemplaza cada marcador de posición por lo siguiente:

    • SOURCE_SITE_ID y TARGET_SITE_ID: Estos son los ID de los sitios de Hosting que contienen los canales.

      • En el sitio de Hosting predeterminado, usa el ID de tu proyecto de Firebase.
      • Puedes especificar sitios que se encuentren en el mismo proyecto de Firebase o incluso en diferentes proyectos de Firebase.

    • SOURCE_CHANNEL_ID: Este es el identificador del canal que está entregando la versión que deseas implementar en tu canal publicado.

      • Para un canal publicado, usa live como ID de canal.

  2. Revisa tus cambios (paso siguiente).

Opción 2: Implementa desde el directorio de tu proyecto local hasta el canal publicado

Esta opción te brinda flexibilidad para ajustar la configuración específica del canal publicado o para realizar implementaciones, incluso si no usaste un canal de vista previa.

  1. Desde la raíz del directorio del proyecto local, ejecuta el siguiente comando:

    firebase deploy --only hosting

  2. Revisa tus cambios (paso siguiente).

Paso 4: Revisa los cambios en el sitio publicado

Las dos opciones anteriores implementan tu contenido y configuración de Hosting en los siguientes sitios:

  • Los subdominios aprovisionados por Firebase para tu sitio de Hosting predeterminado y cualquier otro sitio de Hosting adicional:
    SITE_ID.web.app (como PROJECT_ID.web.app)
    SITE_ID.firebaseapp.com (como PROJECT_ID.firebaseapp.com)

  • Cualquier dominio personalizado que hayas conectado a tus sitios de Hosting

Para restringir la implementación a un sitio de Hosting específico, indica un destino de implementación en el comando de la CLI.

Otra información y actividades de implementación

Agrega un comentario para la implementación

De manera opcional, puedes agregar un comentario a la implementación. Se mostrará junto con otra información de implementación en el panel de Hosting en Firebase console. Por ejemplo:

firebase deploy --only hosting -m "Deploying the best new feature ever."

Agrega tareas de secuencia de comandos previas y posteriores a la implementación

De manera opcional, puedes conectar secuencias de comandos de shell al comando firebase deploy para realizar tareas previas a la implementación o posteriores a ella. Por ejemplo, un hook posterior a la implementación podría notificar a los administradores cuando se implementa contenido nuevo del sitio. Consulta la documentación de Firebase CLI para obtener más detalles.

Almacena en caché el contenido implementado

Cuando se realiza una solicitud de contenido estático, Firebase Hosting almacena en caché de forma automática el contenido en la CDN. Si vuelves a implementar el contenido del sitio, Firebase borra automáticamente todo el contenido estático almacenado en caché en la CDN para que las solicitudes nuevas reciban el contenido nuevo.

Ten en cuenta que puedes configurar el almacenamiento en caché del contenido dinámico.

Realiza entregas mediante HTTPS

Asegúrate de que todos los recursos externos que no estén alojados en Firebase Hosting se carguen a través de SSL (HTTPS), incluidas las secuencia de comandos externas. La mayoría de los navegadores no permiten que los usuarios carguen “contenido mixto” (tráfico SSL y no SSL).

Próximos pasos