Deploy Angular con Firebase: guia paso a paso

Por qué Firebase Hosting

Firebase Hosting es una de las mejores opciones para desplegar aplicaciones Angular, especialmente si ya usas otros servicios de Firebase como Authentication o Firestore. Ofrece:

• CDN global: Tu app se sirve desde el nodo más cercano al usuario
• SSL gratuito: Certificados HTTPS automaticos
• Deploy atomico: Los cambios se publican de forma instantanea
• Preview channels: URLs temporales para revisar cambios antes de producción
• Plan gratuito generoso: 10 GB de almacenamiento y 360 MB/dia de transferencia

En Bemorex usamos Firebase Hosting para todos nuestros proyectos Angular, incluyendo esta misma plataforma.

Prerequisitos

Antes de empezar, asegurate de tener:

• Node.js 22 o superior instalado
• Una cuenta de Google
• Un proyecto Angular funcional
• Un proyecto creado en la consola de Firebase

Paso 1: Instalar y configurar Firebase CLI

Lo primero es instalar Firebase CLI y autenticarte. Ejecuta los comandos del primer bloque de código de este articulo.

Al ejecutar firebase init hosting, el CLI te hará varias preguntas. La más importante es el directorio público: para Angular, este es dist/nombre-del-proyecto/browser (la ruta exacta depende de tu configuración en angular.json).

Paso 2: Configurar firebase.json

El archivo firebase.json es el corazon de tu configuración de hosting. La configuración clave es:

Rewrites para SPA

Angular es una Single Page Application. Necesitas que todas las rutas redirijan a index.html para que el router de Angular maneje la navegación. Esto se logra con el rewrite "source": "**".

Headers de cache

Los assets estaticos (JS, CSS, imagenes) deben tener cache agresivo porque Angular les agrega un hash en el nombre de archivo. Cuando el contenido cambia, el hash cambia y el navegador descarga la nueva versión. Pero index.html nunca debe cachearse para que siempre apunte a los assets más recientes.

Paso 3: Build de producción

Antes de desplegar, necesitas generar el build de producción:

ng build --configuration production

Este comando genera los archivos optimizados en la carpeta dist/. Verifica que el output incluya:

• Archivos JavaScript minificados con hashes
• CSS bundled y minificado
• index.html con las referencias correctas
• Assets copiados (imagenes, fuentes, etc.)

Paso 4: Deploy manual

Para tu primer deploy, hazlo manualmente:

firebase deploy --only hosting

Firebase te dara la URL donde esta disponible tu app (generalmente https://tu-proyecto.web.app). Abre la URL y verifica que todo funcione correctamente.

Verificacion post-deploy

Despues de cada deploy, verifica:

• La app carga correctamente en la URL de Firebase
• La navegación entre rutas funciona (refresca en una ruta que no sea /)
• Las imagenes y assets cargan correctamente
• La consola del navegador no muestra errores
• Los servicios de Firebase (Auth, Firestore) conectan correctamente

Paso 5: Preview channels

Los preview channels son una funcionalidad poderosa que te permite desplegar versiones temporales de tu app para revision:

firebase hosting:channel:deploy preview-feature-x

Esto crea una URL temporal como https://tu-proyecto--preview-feature-x-abc123.web.app que expira automaticamente despues de 7 dias. Es ideal para:

• Revisar pull requests antes de mergear
• Mostrar avances a clientes
• Probar cambios en un ambiente real sin afectar producción

Paso 6: CI/CD con GitHub Actions

El deploy manual esta bien para empezar, pero un pipeline automatizado es lo profesional. Configura GitHub Actions para desplegar automaticamente cada vez que hagas push a main.

Configuración del workflow

Crea el archivo .github/workflows/firebase-hosting.yml con el contenido del bloque de código de GitHub Actions mostrado arriba.

Configurar secrets

En tu repositorio de GitHub, ve a Settings > Secrets and variables > Actions y agrega:

1. FIREBASE_SERVICE_ACCOUNT: La clave JSON de tu service account de Firebase. Puedes generarla con:

firebase init hosting:github

Este comando configura automaticamente el service account y el workflow de GitHub Actions.

Paso 7: Dominio personalizado

Firebase Hosting permite configurar dominios personalizados gratuitamente:

1. Ve a la consola de Firebase > Hosting > Add custom domain
2. Ingresa tu dominio (ej: miapp.com)
3. Firebase te dara registros DNS para configurar
4. Configura los registros A en tu proveedor de dominio
5. Espera la verificación (puede tomar hasta 24 horas)
6. Firebase provisiona automaticamente un certificado SSL

Optimizaciones adicionales

Compresion automática

Firebase Hosting comprime automaticamente con Brotli y Gzip. No necesitas hacer nada especial.

Security headers

Agrega headers de seguridad en firebase.json:

{
  "source": "**",
  "headers": [
    { "key": "X-Content-Type-Options", "value": "nosniff" },
    { "key": "X-Frame-Options", "value": "DENY" },
    { "key": "X-XSS-Protection", "value": "1; mode=block" },
    { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" }
  ]
}

Redirects

Si cambias la estructura de URLs, configura redirects para no perder SEO:

{
  "redirects": [
    {
      "source": "/blog-antiguo/:slug",
      "destination": "/blog/:slug",
      "type": 301
    }
  ]
}

Firebase Hosting con SSR

Si tu app Angular usa Server-Side Rendering, la configuración es diferente. En lugar de un sitio estático, necesitas Cloud Functions o Cloud Run:

ng add @angular/fire

Este schematic configura automaticamente:

• Cloud Functions para SSR
• firebase.json con rewrites al function
• Build script que genera el server bundle

Ten en cuenta que SSR con Firebase requiere el plan Blaze (pago por uso), ya que Cloud Functions no esta disponible en el plan Spark gratuito.

Troubleshooting comun

La app muestra página en blanco

• Verifica que public en firebase.json apunte al directorio correcto
• Asegurate de que index.html existe en ese directorio
• Revisa la consola del navegador por errores de carga

Las rutas dan 404 al refrescar

• Falta el rewrite de SPA en firebase.json
• Verifica que el destino sea /index.html

Los cambios no se reflejan

• Limpia la cache del navegador
• Verifica que el deploy término correctamente con firebase hosting:channel:list

Conclusion

Firebase Hosting es una solucion robusta, rápida y economica para desplegar aplicaciones Angular. Con CI/CD automatizado, preview channels y soporte para dominios personalizados, tienes todo lo necesario para un flujo de deploy profesional sin gestionar servidores.

El siguiente paso natural es explorar otros servicios de Firebase (Auth, Firestore, Analytics) para construir aplicaciones completas con un solo ecosistema.

# Instalar Firebase CLI globalmente
npm install -g firebase-tools

# Autenticarse con tu cuenta de Google
firebase login

# Inicializar Firebase en tu proyecto Angular
cd mi-proyecto-angular
firebase init hosting

# Selecciona: dist/mi-proyecto-angular/browser
# Selecciona: Yes (configurar como SPA)
# Selecciona: No (no sobreescribir index.html)

{
  "hosting": {
    "public": "dist/mi-proyecto-angular/browser",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**/*.@(js|css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      },
      {
        "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|avif)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      },
      {
        "source": "index.html",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store"
          }
        ]
      }
    ]
  }
}

name: Deploy to Firebase Hosting
on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-versión: 22
          cache: npm

      - name: Install dependencies
        run: npm ci

      - name: Build for production
        run: npm run build

      - name: Deploy to Firebase
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          channelId: live
          projectId: tu-proyecto-firebase