Curso Angular: Cómo desplegar aplicaciones en Firebase Hosting paso a paso

Curso Angular: Cómo desplegar aplicaciones en Firebase Hosting paso a paso

El despliegue de aplicaciones Angular en Firebase Hosting es una de las formas más rápidas y seguras de poner tu proyecto en producción. Firebase no solo ofrece hosting estático con CDN global, sino que también integra servicios como Firestore, Authentication y Functions, lo que lo convierte en un ecosistema ideal para aplicaciones modernas.

En este artículo aprenderás paso a paso cómo configurar y desplegar tu aplicación Angular en Firebase, con comandos claros y explicaciones de por qué se usan.

Crear un nuevo proyecto Angular

El primer paso es generar tu aplicación Angular. Esto crea la estructura básica del proyecto.

ng new app-firebase

Por qué se usa:

Este comando inicializa un proyecto Angular con configuración estándar. Puedes añadir opciones como --routing o --style=scss si tu proyecto requiere rutas o un preprocesador de estilos.

Instalar Firebase CLI

Necesitamos la Firebase CLI para interactuar con los servicios de Firebase desde la terminal.

npm install -g firebase-tools

Por qué se usa:
La instalación global (-g) permite ejecutar comandos firebase en cualquier proyecto sin necesidad de reinstalar. Es la herramienta oficial de Google para despliegues y configuraciones.

Crear un proyecto en Firebase Console

Accede a la consola de Firebase y crea un nuevo proyecto:

Consola Firebase

Ejemplo de nombre:

angular-app-nrc7369

Por qué se usa:
Cada proyecto en Firebase es un contenedor de servicios (Hosting, Firestore, Auth). El nombre debe ser único y representativo para facilitar la gestión.

Autenticarse en Firebase

Conéctate a tu cuenta de Google desde la terminal:

firebase login

Por qué se usa:
Esto vincula tu CLI con tu cuenta de Firebase, permitiendo desplegar en proyectos asociados a tu perfil.

Inicializar Hosting en el proyecto

Dentro de tu carpeta Angular, inicializa Firebase Hosting:

firebase init hosting

Por qué se usa:
Este comando configura el hosting en tu proyecto local. Durante el proceso, se te pedirá la carpeta de salida del build de Angular.

Configurar carpeta de salida

Cuando se te pregunte la carpeta pública, ingresa:

dist/app-firebase

Por qué se usa:
Angular compila el proyecto en la carpeta dist/. Es importante especificar el nombre exacto del proyecto (app-firebase) para que Firebase sirva los archivos correctos.

Respuestas recomendadas:

• ¿Configurar como SPA? → No (Angular ya maneja rutas internas).
• ¿Sobrescribir index.html? → No (evitamos perder la configuración de Angular).

Compilar el proyecto Angular

Genera la versión optimizada para producción:

ng build --configuration production

Por qué se usa:
El flag --configuration production aplica minificación, tree-shaking y optimizaciones que reducen el tamaño de los archivos y mejoran el rendimiento SEO.

Desplegar en Firebase Hosting

Finalmente, sube tu aplicación:

firebase deploy

Por qué se usa:
Este comando publica tu aplicación en la CDN global de Firebase. Obtendrás una URL pública instantánea, con HTTPS y cacheo automático.

Desplegar en otro proyecto (opcional)

Si deseas cambiar de proyecto:

firebase logout firebase use --add

Por qué se usa:
Permite gestionar múltiples proyectos desde la misma CLI, ideal si trabajas con entornos de staging y producción.

Otras dependencias útiles

Para integrar servicios de Firebase en Angular:

ng add @angular/fire npm install @angular/fire firebase

Por qué se usa:

• @angular/fire es el paquete oficial que conecta Angular con Firebase.
• Permite usar Firestore, Auth, Storage y otros servicios con sintaxis Angular-friendly.
• ng add automatiza la configuración inicial en angular.json y app.module.ts.

Conclusión

Desplegar aplicaciones Angular en Firebase Hosting es un proceso rápido y seguro.

• Firebase CLI simplifica la gestión.
• Hosting con CDN garantiza velocidad y SEO.
• Integración con AngularFire abre la puerta a servicios avanzados como Firestore y Authentication.

Con esta guía, tu aplicación estará lista para producción en minutos, con un flujo optimizado para rendimiento y escalabilidad.