Despliegue de aplicación Angular en Firebase Hosting

Publica tu app de Angular en Firebase Hosting con un flujo claro y confiable. Desde instalar firebase-tools hasta ajustar el firebase.json y ejecutar el deploy con npm, aquí se concentra todo lo esencial para pasar a producción sin tropiezos.

¿Cómo preparar Firebase CLI y la autenticación?

Primero, instala la CLI de Firebase de forma global y autentícate con la misma cuenta que usas en Firebase. Acepta los permisos para que Gemini funcione dentro de Firebase y la recolección de datos bajo políticas de privacidad. Cuando la terminal confirme el login, ya podrás inicializar el hosting.

Comandos clave:

npm install -g firebase-tools
firebase login

¿Qué proyecto seleccionar al inicializar el hosting?

Inicializa el hosting en el proyecto de Angular y elige un proyecto existente. Selecciona el proyecto “firebase angular 20 chat”. Establece un directorio público temporal (por ejemplo, “entry”) y confirma el reescrito del índice para single page application. Omite la configuración automática con GitHub Actions.

firebase init hosting

Puntos importantes: - Usar proyecto existente y confirmar el rewrite del index para SPA. - Evitar el enlace automático con GitHub si no lo necesitas. - El directorio público se ajustará después del build.

¿Cómo hacer el build y evitar warnings de CSS?

Ejecuta el build de Angular para generar la carpeta de salida. Si ves warnings por el tamaño de CSS, ajusta los “budgets” en el archivo angular.json. Incrementarlos elimina los avisos molestos sin afectar el resultado si los tamaños son razonables.

npm run build

Después del build, observa que ahora Angular genera la salida en la ruta con carpeta dist/.../browser. Este cambio es clave: actualiza el firebase.json para que “public” apunte a esa carpeta. Así el hosting servirá correctamente tu aplicación.

¿Dónde apuntar el public en firebase.json?

Asegura que el hosting use la carpeta “browser” y que el índice se reescriba para SPA.

{
  "hosting": {
    "public": "dist/.../browser",
    "rewrites": [
      { "source": "**", "destination": "/index.html" }
    ]
  }
}

Claves de configuración: - “public” debe vincularse a dist/.../browser. - Reescritura a /index.html para rutas de SPA. - Verifica la presencia de index.html en la carpeta correcta.

¿Cómo automatizar y ejecutar el deploy con npm?

Es útil agregar scripts de deployment en package.json, como “deploy” y “deploy quick”. En este caso, se usó un deploy completo desde la terminal. El proceso compila y luego publica en Firebase Hosting.

npm run deploy

Al finalizar, verás “Deploy complete” con dos URLs: una para la consola del proyecto y otra para acceder al sitio. Abre el enlace público y valida que todo funcione: autenticación con Google, historial de mensajes y respuestas de Gemini.

¿Qué validar tras el deploy en Firebase Hosting?

• La URL pública responde sin errores.
• La autenticación con Google funciona.
• Se ve el historial de mensajes desde Firestore.
• Gemini responde y arma los mensajes.
• Las rutas de SPA cargan correctamente.

Conceptos y habilidades aplicadas: - Instalación de firebase-tools de forma global con npm. - Uso de Firebase CLI para login e inicialización del hosting. - Ajuste de “budgets” en angular.json para evitar warnings de CSS. - Configuración de firebase.json apuntando a dist/.../browser y reescritura del index. - Ejecución de build y deploy con npm. - Verificación de Firestore, Gemini y autenticación en producción.

¿Te gustaría compartir cómo organizas tus scripts de deploy o qué ajustes haces en angular.json para producción? Comenta tu experiencia y resultados.