Publicando en Firebase Hosting

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
Viendo ahora

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:39

Publicando en Firebase Hosting

Curso de Angular 4

Clase 72 de 80

Clase 72 / 80

Recursos

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?