Publicar una aplicación Angular en Firebase Hosting es el paso final que lleva tu proyecto desde el entorno local hasta la nube, accesible para cualquier persona con un enlace. Aquí aprenderás a instalar Firebase Tools, inicializar el hosting, ajustar la configuración para Angular 20 y ejecutar el deploy completo con autenticación, Firestore y Gemini funcionando.

¿Cómo instalar Firebase Tools y autenticarte desde la terminal?

El primer paso para hostear tu app es instalar la CLI de Firebase de forma global y vincularla a tu cuenta. Sin esto, ningún comando posterior va a funcionar.

Abre tu terminal y ejecuta la instalación global de Firebase Tools [00:24]. El flag -g asegura que la herramienta esté disponible desde cualquier carpeta de tu sistema.

bash npm install -g firebase-tools

Una vez instalado, autentícate con tu cuenta. Es fundamental que uses la misma cuenta que tienes en la consola de Firebase, porque ahí vive tu proyecto.

bash firebase login

Al ejecutarlo, se abre un cuadro de diálogo que te pregunta si quieres habilitar Gemini dentro de Firebase y si permites recolección de datos bajo políticas de privacidad. Luego se abre el navegador para autenticar [01:05]. Cuando veas el mensaje de éxito en la terminal, ya estás listo.

¿Qué hace firebase login? Vincula tu CLI local con tu cuenta de Firebase para que puedas inicializar proyectos, desplegar y administrar servicios desde la terminal sin volver a iniciar sesión.

¿Cómo inicializar Firebase Hosting en un proyecto Angular?

Con la CLI lista, toca conectar tu proyecto Angular con el servicio de hosting. Aquí es donde se definen carpetas, reescrituras y comportamiento de SPA.

Ejecuta el comando de inicialización [01:38] y selecciona estas opciones:

• Usar un proyecto existente y elegir el que ya creaste en la consola, por ejemplo Firebase Angular 20 Chat.
• Aceptar el public directory por defecto (lo modificarás después).
• Confirmar que es una single page application para que el index.html se sobrescriba con las reescrituras.
• Decir que no a GitHub Actions, ya que eso pertenece a otro flujo de integración continua.

bash firebase init hosting

La carpeta public que sugiere por defecto no es donde Angular deja tu build, así que ese valor lo vas a corregir más adelante.

¿Por qué hay que buildear Angular antes de configurar la carpeta de hosting?

Firebase necesita apuntar a la carpeta donde Angular genera los archivos finales. Esa carpeta solo existe después de compilar el proyecto, así que el orden importa.

Ejecuta el build completo desde la raíz del proyecto:

bash npm run build

¿Cómo silenciar los warnings de tamaño en CSS?

Durante el build pueden aparecer warnings indicando que tu CSS, por ejemplo chat.css, supera el presupuesto de tamaño definido [03:00]. Esto se ajusta en el archivo angular.json, dentro del bloque de budgets de producción.

Duplicar el límite máximo es una solución segura siempre que manejes tamaños razonables. Hablamos de archivos en el rango de 12 KB, 24 KB, 1 MB o 2 MB, que no representan ningún problema real de rendimiento. Al volver a buildear, los warnings desaparecen.

¿Dónde quedan los archivos compilados en Angular 20?

Aquí viene un detalle importante: en Angular 20 el build genera una subcarpeta browser dentro de dist. Antes esto no existía, y la estructura era distinta [04:05]. Por eso confiar en las configuraciones por defecto de Firebase puede romper tu deploy.

La ruta correcta queda así:

dist/angular-20-firebase-chat/browser

¿Cómo modificar firebase.json y agregar scripts de deploy?

Abre firebase.json y reemplaza la propiedad public por la ruta real donde vive tu build:

{ "hosting": { "public": "dist/angular-20-firebase-chat/browser" } }

Formatea el archivo con Alt + Shift + F para mantener el código limpio. Dentro de esa carpeta encontrarás el index.html que Firebase reescribirá automáticamente para que funcione como SPA.

Una práctica que te ahorra tiempo es agregar scripts de despliegue en package.json, justo después de test:

• deploy: ejecuta primero el build y luego el deploy completo.
• deploy:quick: solo despliega el hosting sin volver a buildear, útil cuando ya tienes la última versión compilada.

Así lanzas todo desde una sola línea sin recordar comandos largos.

¿Qué diferencia hay entre deploy y deploy:quick? El primero buildea y despliega en un solo paso. El segundo asume que ya hiciste build y solo sube los archivos, ideal para iteraciones rápidas.

¿Cómo verificar que tu app funciona en la nube?

Con todo configurado, ejecuta el deploy desde la terminal:

bash npm run deploy

Firebase compila, sube los archivos y al terminar muestra el mensaje deploy complete junto con dos URLs [05:50]: una lleva a la consola del proyecto y otra al sitio publicado.

Al abrir la URL del sitio podrás:

• Iniciar sesión con Continuar con Google y recuperar tu historial previo.
• Enviar un mensaje y comprobar que Gemini responde en tiempo real.
• Ver que Firestore sigue recuperando los mensajes guardados.
• Confirmar que la autenticación funciona igual que en local.

La app está oficialmente en la nube, con autenticación, base de datos y Gemini conectados. Si llegaste hasta aquí con tu proyecto desplegado, cuéntame en los comentarios qué funcionalidad le agregarías a continuación.