Llevar tu aplicación Angular a producción con Firebase Hosting es uno de los pasos más satisfactorios del proceso, porque ahí pasas de tener un proyecto local a una URL pública que puedes compartir en tu portafolio. Aquí aprenderás a configurar el proyecto, instalar las herramientas necesarias y publicar tu aplicación de forma gratuita usando la suite de Google.
¿Qué es Firebase Hosting y por qué usarlo en proyectos Angular?
Firebase es una suite de servicios de Google que va mucho más allá del hosting. Incluye autenticación, bases de datos, analíticas y más, pero su servicio de Hosting es ideal cuando necesitas un espacio gratuito, rápido y bien integrado para una single page application.
Para empezar, necesitas una cuenta de Gmail asociada y entrar a console.firebase.google.com. Si es tu primer proyecto, te aparecerá una pantalla de bienvenida; si ya tienes experiencia, verás tus proyectos existentes [00:20].
¿Firebase Hosting es gratis? Sí, ofrece un plan gratuito que te entrega una URL pública por defecto. También puedes conectar un dominio propio si lo compras aparte.
¿Cómo crear un proyecto en la consola de Firebase?
Dentro de la consola, presionas crear nuevo proyecto y le asignas un nombre, por ejemplo My Day App si tu aplicación organiza tareas diarias. Confirmas los términos y continúas.
Firebase te ofrecerá habilitar Google Analytics para llevar métricas de uso. Puedes activarlo o desactivarlo según prefieras; mantenerlo activo te da visibilidad sobre el comportamiento de los usuarios. Después de aceptar la configuración, Firebase prepara el entorno y te lleva al panel principal [01:05].
Desde el menú lateral, dentro de la sección Build, encuentras la opción Hosting. Ahí inicias el flujo de despliegue, que se compone de tres pasos: instalar Firebase Tools, autenticarte y desplegar.
¿Cómo configurar Firebase Tools y desplegar desde la terminal?
La consola te da los comandos exactos que necesitas ejecutar. El primero instala Firebase Tools, la herramienta de línea de comandos que conecta tu proyecto local con Firebase.
Instalación e inicio de sesión
Copias el comando de instalación y lo ejecutas en tu terminal. Una vez instalado, el siguiente paso es autenticarte:
bash
firebase login
Este comando abre una URL en el navegador donde seleccionas tu cuenta de Gmail y otorgas permisos. Cuando vuelves a la terminal, ya aparecerás logueado con la cuenta asociada [02:30].
Inicialización del proyecto con firebase init
Con la sesión activa, ejecutas:
bash
firebase init
Firebase te preguntará qué servicio usar. Seleccionas Hosting con la barra espaciadora y presionas enter. Luego eliges usar un proyecto existente y seleccionas el que creaste antes en la consola.
El paso más importante viene a continuación: te pide la carpeta pública, es decir, dónde está la compilación de tu proyecto Angular. Esa ruta corresponde a la carpeta dist/nombre-del-proyecto que se genera al hacer el build de producción.
¿Qué carpeta debo usar como public directory en Angular? Debes apuntar a dist/ seguido del nombre de tu proyecto, porque ahí queda la versión compilada lista para servirse.
Después Firebase te hace tres preguntas clave:
- Si quieres reescribir todas las URLs hacia
index.html, lo cual es necesario para una single page application. Respondes que sí.
- Si quieres configurar deploys automáticos con GitHub Actions. Para este flujo manual, respondes que no.
- Si quieres sobrescribir el
index.html existente. Respondes que no, porque Angular ya lo generó correctamente [04:10].
¿Cómo subir y verificar tu aplicación en producción?
Con la inicialización lista, solo falta el comando final:
bash
firebase deploy
Firebase toma la carpeta de compilación, la sube a su hosting y te devuelve una URL pública. Esa dirección ya muestra tu aplicación en un entorno de producción real [05:00].
Para comprobar que todo funciona, creas algunas tareas dentro de la app, marcas algunas como completadas, recargas la página y confirmas que el estado se guarda. Si abres la misma URL en otra pestaña, deberías ver la misma información, lo que confirma que la persistencia está activa y que los filtros, la edición y la eliminación funcionan correctamente.
Con esto tienes tu primera aplicación en Angular desplegada, aplicando programación reactiva y disponible en una URL que puedes compartir en tu portafolio. ¿Qué nombre le pusiste a tu proyecto y qué dominio te gustaría conectarle? Cuéntame en los comentarios.
