Crea prototipos y prueba apps web con el emulador de Firebase Hosting

Antes de comenzar el prototipado y las pruebas de tu app web con el emulador de Firebase Hosting, asegúrate de comprender el flujo de trabajo general de Firebase Local Emulator Suite y de instalar y configurar el Local Emulator Suite, y revisa los comandos de su CLI.

También debes conocer las funciones y el flujo de trabajo de implementación de Firebase Hosting. Comienza con la introducción a Firebase Hosting.

¿Qué puedo hacer con el emulador de Firebase Hosting?

El emulador Firebase Hosting proporciona una emulación local de alta fidelidad de servicios de Hosting, lo que proporciona gran parte de la funcionalidad que se encuentra en el Hosting de producción. El emulador de Hosting te permite hacer lo siguiente:

  • Crear un prototipo de los sitios estáticos y las apps web sin incurrir en cargos de almacenamiento o acceso
  • Crear prototipos, probar y depurar funciones de HTTPS antes de implementarlas en tu sitio de Hosting
  • Probar sitios y apps web en flujos de trabajo de integración continua alojados en contenedores

Elige un proyecto de Firebase

El Firebase Local Emulator Suite emula los productos para un solo proyecto de Firebase.

Para seleccionar el proyecto que quieres usar, ejecuta firebase use en la CLI en tu directorio de trabajo antes de iniciar los emuladores. También puedes pasar la marca --project a cada comando del emulador.

El Local Emulator Suite admite la emulación de proyectos reales de Firebase y de demostración.

Tipo de proyecto Características Uso con emuladores
Real

Los proyectos de Firebase reales son aquellos que creaste y configuraste (probablemente usando Firebase console).

Los proyectos reales tienen recursos activos, como instancias de bases de datos, buckets de almacenamiento, funciones o cualquier otro recurso que hayas configurado para ese proyecto de Firebase.

Cuando trabajas con proyectos reales de Firebase, puedes ejecutar emuladores para cualquiera de los productos compatibles o todos ellos.

Si se trata de un producto que no estás emulando, tus apps y código interactuarán con los recursos activos (instancias de bases de datos, bucket de almacenamiento, función, etcétera).

Demostración

Los proyectos de demostración de Firebase no tienen una configuración real de Firebase ni recursos activos. Por lo general, se accede a estos proyectos mediante codelabs o algún otro instructivo.

Los IDs de los proyectos de demostración tienen el prefijo demo-.

Cuando trabajas con proyectos de demostración de Firebase, tus apps y código interactúan solo con emuladores. Si tu app intenta interactuar con un recurso para el cual no se está ejecutando un emulador, ese código fallará.

Te recomendamos que uses proyectos de demostración siempre que sea posible. Estos son algunos de los beneficios:

  • Configuración más sencilla, ya que puedes ejecutar los emuladores sin crear un proyecto de Firebase
  • Mayor seguridad, ya que, si tu código invoca de forma accidental recursos no emulados (de producción), no hay posibilidad de que se modifiquen los datos, el uso ni la facturación
  • Mejor soporte sin conexión, ya que no es necesario acceder a Internet para descargar la configuración del SDK

Flujo de trabajo principal para el prototipado

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 app web en una URL alojada localmente.

  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. 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"
    }
  }

Genera tokens de autenticación para flujos de trabajo de integración continua

Si tus flujos de trabajo de integración continua dependen de Firebase Hosting, deberás acceder con un token para ejecutar firebase emulators:exec. Los otros emuladores no requieren acceso.

Para generar un token, ejecuta firebase login:ci en tu entorno local. Esta acción no debe realizarse desde un sistema de CI. Sigue las instrucciones para realizar la autenticación. Puesto que el token será válido en todas las versiones, solo debes realizar este paso una vez por proyecto. El token se debe tratar como si fuera una contraseña, así que asegúrate de mantenerlo en secreto.

Si el entorno de CI te permite especificar variables de entorno que se pueden usar en las secuencias de comandos de la versión, solo crea una variable de entorno que se llame FIREBASE_TOKEN y que el valor sea la cadena del token de acceso. La Firebase CLI detectará automáticamente la variable de entorno FIREBASE_TOKEN y los emuladores se iniciarán de forma correcta.

Como último recurso, puedes incluir el token en tu secuencia de comandos de compilación, pero asegúrate de que los terceros no confiables no tengan acceso. Para este enfoque hard-coded, puedes agregar --token "YOUR_TOKEN_STRING_HERE" al comando firebase emulators:exec.

Próximos pasos