CursosEmpresasBlogLiveConfPrecios

Publicando en Firebase Hosting

Clase 72 de 80 • Curso de Angular 4

Resumen

Publica tu app de Angular 4 con confianza: en pocos pasos, pasando de desarrollo a producción, con minificación, carpeta dist optimizada y despliegue directo a Firebase Hosting. Aquí verás los comandos esenciales y decisiones clave para evitar errores comunes como el 404 en single page applications.

¿Cómo preparar Angular 4 para producción?

Para pasar de un entorno de desarrollo a producción, genera una versión optimizada. ng build agrupa y minifica los archivos, creando la carpeta dist con lo mínimo necesario, incluyendo index.html. Esto mejora el rendimiento frente a la gran cantidad de archivos de node_modules que usas en desarrollo.

  • Entorno de desarrollo vs producción: desarrollo muestra errores detallados y recarga automática; producción minimiza y agrupa archivos.
  • Minificación: JavaScript se junta en un solo archivo para cargar más rápido en el browser.
  • Salida optimizada: la carpeta dist contiene lo necesario para servir la app, siendo index.html el punto de entrada.

Comando clave:

ng build

Habilidades puestas en práctica:

  • Optimización de build: reducción de tamaño y mejora de carga.
  • Estructura de proyecto: entender la diferencia entre node_modules y dist.

¿Cómo configurar Firebase Hosting desde la terminal?

Con Firebase ya configurado, instala su CLI, autentica tu cuenta y prepara el proyecto para hosting. Acepta la recolección de datos si se solicita; si no se abre el browser, usa la URL que muestra la terminal.

¿Qué instalar con NPM para Firebase Hosting?

  • Instalar herramientas de Firebase con NPM.
  • Considerar permisos: a veces se usa sudo para instalar.
  • Autenticarse en la cuenta de Google con firebase login.

Comandos:

npm install -g firebase-tools
firebase login

Puntos clave:

  • Instalación global: herramientas disponibles en cualquier carpeta del proyecto.
  • Login exitoso: la terminal confirma con “success”.

¿Cómo inicializar el proyecto con firebase init?

  • Ejecutar firebase init y seleccionar Hosting.
  • Elegir el proyecto correcto (por ejemplo, platzi.squared).
  • Definir el directorio público: escribir dist.
  • Configurar como single page application: responder “sí” para redirigir todo a index.html y evitar 404 tras un refresh fuera del home.
  • No sobrescribir index.html existente.

Comando:

firebase init

Conceptos importantes:

  • Single page application: reescritura de rutas hacia index.html para que el hosting entienda la navegación del cliente.
  • Directorio público: dist contiene los archivos servibles de producción.

¿Cómo hacer el deploy y validar la URL pública?

Con la configuración lista, sube los archivos a Firebase Hosting. La consola mostrará el progreso y, al finalizar, verás la URL pública para compartir y probar en cualquier browser.

¿Qué hace firebase deploy en el hosting?

  • Sube la salida de dist al hosting de Firebase.
  • Aplica la configuración creada con firebase init.
  • Muestra mensajes de fin de despliegue y la URL generada.

Comando:

firebase deploy

Resultados esperados:

  • URL pública: por ejemplo, platzi.squared.firebaseapp.com.
  • Registro en la consola: confirmación de subida y enlaces útiles.

¿Cómo comprobar que la app está online?

  • Ir al panel de Firebase y abrir la sección de Hosting.
  • Hacer clic en la URL desplegada y navegar la app.
  • Compartir la URL para pruebas o colaboración.

Buenas prácticas aplicadas:

  • Verificación post-deploy: revisar en Firebase console y en el browser.
  • Colaboración: compartir la URL para feedback o QA.

¿Tienes dudas sobre algún paso o comando? Escribe en los comentarios qué parte te gustaría profundizar y qué setup usas para tu deploy.