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:

fullscreen
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:

fullscreen
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:

fullscreen
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:

fullscreen
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.