Despliegue con Firebase Hosting

Curso de Angular 17: Creación de Aplicaciones Web

Introducción a Angular y Fundamentos

Aprende Angular 17

Creando tu primer proyecto en Angular

Implementando estilos

Mostrando elementos

Property Binding en Angular

Event Binding: click y doble click

Event binding: keydown

Modelo de reactividad con Signals

Creando un Signal en Angular

Estructuras de control en Angular

Directivas de control

Uso de ngFor

ngFor para objetos

Update Tasks

Uso de ngIf

Uso de ngSwitch y ngSwitchDefault

Controlando un input

Manejo de formularios en Angular

Alistando tu aplicación para producción

Estilos al modo Angular

Clases en Angular

Editing mode

Estados compuestos con computed

Usando effect para localStorage

Uso de ngbuild

Despliegue con Firebase Hosting

Nueva sintaxis en Angular

Directivas @For, @switch

Migrando a la nueva sintaxis de Angular v17

Componentes Reutilizables y Comunicación

Construyendo un e-commerce en Angular

Componentes en Angular

Mostrando los componentes

Angular DevTools

Uso de Inputs en Angular

Uso de Outputs en Angular

Componentes para Producto

Ciclo de vida de los componentes

Ciclo de vida de componentes

Ciclo de vida de componentes: ngOnChanges

Ciclo de vida de componentes: ngOnInit

Detectando cambios en los inputs

Evitando memory leaks con ngDestroy

Audio player con ngAfterViewInit

Creando la página "about us" o "conócenos"

Mejorando la interfaz del producto

Creando componente de productos

Creando el Header

Creando el carrito de compras

Comunicación padre e hijo

Calculando el total con ngOnChanges

El problema del prop drilling

Reactividad con signals en servicios

Entendiendo la inyección de dependencias

Integración y Datos

Obteniendo datos una REST API

Importaciones cortas en Typescript

Pipes en Angular

Construyendo tu propio pipe

Utilizando librerías de JavaScript en Angular

Conociendo las directivas

Deployando un proyecto en Vercel

Enrutamiento y Navegación

Ruta 404

Uso del RouterLink

Vistas anidadas

Uso del RouterLinkActive

Detalle de cada producto

Obteniendo datos del producto

Galería de imagenes

Detalle de la galería

Perfeccionando tu e-commerce

Mostrando categorias desde la API

Url Params

LazyLoading y Code Splitting

Aplicando LazyLoading

Prefetching

Usando la nueva sintaxis de Angular 17

Lanzando tu aplicación a producción

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 28

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Julian Franco

hace un año

Si a alguno le aparece un mensaje de Firebase Hosting Setup Complete You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary Primero verifiquen que su carpeta `dist/<name-project>` No exista una carpeta `browser` Si existe cuando ejecuten el `firebase init` y llegue el momento de escribir la informacion en public ponga el path tal cual `dist/<name-project>/browser` Y adicional antes de ejecutar `firebase deploy ` verifiquen que en el archvo `firebase.json` No este esta configuracion "rewrites": \[ { "source": "\*\*", "destination": "/index.html" } ] ```js "rewrites": [ { "source": "**", "destination": "/index.html" } ] ```Si esta configuracion existe, borrarla y dejar unicamente la primera parte y luego si ejecutar el `firebase deploy` Ya con esto no deberian tener incovenientes. Si alguno de aqui sabe como hacer para que angular no genere la carpeta browser quedo atento a sus comentarios.

Cristian David Franco Garcia

hace un año

Con esta configuración me funcionó. ![](https://static.platzi.com/media/user_upload/image-eaaaf7f5-d9bc-4172-a005-2f5d2dea2372.jpg)

Cristian Leiton Valencia

hace un año

.gitignore (Firebase)

# Created by https://www.toptal.com/developers/gitignore/api/firebase
# Edit at https://www.toptal.com/developers/gitignore?templates=firebase

### Firebase ###
.idea
**/node_modules/*
**/.firebaserc

### Firebase Patch ###
.runtimeconfig.json
.firebase/

# End of https://www.toptal.com/developers/gitignore/api/firebase

Sebastian Gutierrez

hace un año

<https://todoapp-angular-ashy.vercel.app/> lo realice con vercel, me parece mas comodo

Juan José ortiz bolaños

hace un año

Al hacer deploy y abrir el link de mi aplicación me aparece este prompt : Welcome # Firebase Hosting Setup Complete You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary! [OPEN HOSTING DOCUMENTATION](https://firebase.google.com/docs/hosting/) No lo he podido solucionar, cualquier ayuda o sugerencia se agradece mucho.

Cristian Leiton Valencia

hace un año

Si observan que el directorio dist genera un directorio browser, revisen las configuraciones de “architect.build.builder”

Ruddy Milton Cordero Torrez

hace 5 meses

en caso de salir este mensaje en mi caso hice estos pasos ![](https://static.platzi.com/media/user_upload/Untitled-5e027c41-dd55-4abb-8985-de89fb3a1bf5.jpg) npm uninstall -g firebase-tools ![](https://static.platzi.com/media/user_upload/Untitled2-a8992517-4bff-4510-b68f-1ed333a4aa76.jpg) elminar de forma manual .**firebaserc** y **firebaserc** volver a instalar npm install -g firebase-tools firebase login ... colocar la ruta correcta en mi caso era "dist/todoapp/browser" firebase init

Manuel Alvarado

hace un año

Hola, lo que sucedio es que si solo le vuelven a dar firebase init el index.html que esta ya sobrescrito en dist/\<tu proyecto>/browser (si lo tienes ahi) es el que tienesobrescrito lo de hosting y lo redirige, lo ideal es dar primero ng build para reiniciar de 0 el build y luego el firebase init sin sobrescribir nada

Christian Leon

hace 2 meses

Hola a todos, quiero dejar mi aporte para la discusión del tema de que no funciona el deploy. Si dentro de `dist` existe la carpeta `browser` y están viendo el mensaje **Firebase Hosting Setup Complete** luego de hacer el deploy, deben hacer lo siguiente (esto es lo que me funcionó a mi): 1. Correr el `ng build` 2. Ejecutar `firebase init` y seleccionar la opción de Hosting (la que dijo el profesor). 3. Cuando les pregunte por el directorio público deben poner la ruta `dist/<nombre-de-tu-proyecto>/browser` . Lo único diferente aquí a lo que dijo el profesor es que se agrega el `/browser` 4. En la opción de sobreescribir el index.html darle **NO** 5. Hacer el deploy `firebase deploy` 6. Cuando accedan a la url del proyecto deben borrar la caché Y listo, eso es todo.

Wilson Dev

hace 2 meses

Los que están trabajando con Windows y Git Bash. Ojo con con el backslash en ruta. ```js dist\todoapp\browser ```dist\todoapp\browser

FELIX HERNANDEZ

hace un mes

A mi me manda estos errores: ![](https://static.platzi.com/media/user_upload/image-415ae036-d334-4b52-9ea5-1830ca581774.jpg) Ya probe varias de las soluciones recomendadas y persisten los errores

Andrés Eduardo Martinez Morgado

hace 2 meses

Gracias Nicolas, hace mucho tiempo me hice el de angular 8 y ahora con este siento que aporta mucho conocimiento incluyendo este despliegue a firebase, eres un crack!

Juan Esteban Valdés Ospina

hace 3 meses

Si alguien está teniendo problemas con el hoisting, me funcionó abrir el link de la aplicación en modo incógnito o en otro navegador. También puedes intentar usar la ruta: `dist/"nombre de tu app"/browser`

Carolina Dominguez

hace 8 meses

Si te sale el error de Welcom Firebase, fijate que el index.html este en la carpeta dist/\<nombre-del-proyecto>/browser. Si es asi lo primero , como ya as hecho el deploy una vez tienes que borrar la cache y luego si volver a hacer el init con esta ruta. Lo intente mil veces y hasta que no borre la cache no me salia.

Javier cárdenas duque

hace 8 meses

cordial saludo, Después de intentar solucionar y seguir las recomendaciones de algunos quienes daban alguna solución para ver la aplicación desplegada con firebase, la única forma en que puedo ver el despliegue es autocompletando la url que da al final de realizar el deploy: Hosting URL: <https://todoapp-2b566.web.app> para ver la aplicación desplegada tuve que adicionar la palabra home y/o labs, de la siguiente manera: <https://todoapp-2b566.web.app/home> Si solo empleo la url tal cual la da , solo me arroja la pagina en blanco.

Francisco Manuel Sanchez Morales

hace 9 meses

*Hoola estoy en 03/2024* A mi me funciono primero hacer los cambios en el archivo angular.json que comentaban y luego usar el comando ***firebase init hosting*** con ese comando segui ya las instrucciones del video y logre hacer el deploy ![](https://static.platzi.com/media/user_upload/Screenshot%202024-03-18%20at%208.41.09%E2%80%AFp.m.-a219c036-7712-4a89-8edb-11a54cce7036.jpg)

Dave Juanes

hace 9 meses

A mi me funcionó con el path `dist/name-app/browser` Ejecute luego desde `firebase init` y los pasos siguientes

Alejandro Espitia

hace un año

Que terminal usa el profesor? Trabaja en entorno windows y me parece que le es muy util

Elioenai Garcia Garcia

hace 10 meses

Comparto mi despliegue de Todoapp 😎👇

https://todoapp-rho-drab.vercel.app/

Santiago Monjes

hace 10 meses

Estoy teniendo problemas con el login de Firebase. `Error: Cannot run login in non-interactive mode. See login:ci to generate a token for use in non-interactive environments.` Como la consola de Linux de WSL me estaba generando problemas, usé bash para todo el proyecto. Creo que es eso lo que me genera el error, pero no estoy encontrando la forma de iniciar sesión para subir el proyecto

John Alexander Peña Bedoya

hace 10 meses

Comparto mi link :3 <https://mydayapptasks.web.app/>

Alex Gallardo

hace un año

No funciona, me aparece siempre esto: ## Welcome # Firebase Hosting Setup Complete You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary! [OPEN HOSTING DOCUMENTATION](https://firebase.google.com/docs/hosting/)

Javier Vargas

hace un año

Recuerda que cada vez que cada vez que quieras hacer el deploy (Subir tus avances al hosting de Firebase), debes ejecutar el comando: ```js ng build ```Ya que con eso, actualizas la carpeta dist con tus nuevos cambios. Luego, darle a: ```js firebase deploy ```Y listo!

Alejandro Hurtado Benavides

hace un año

"Me funcionó usando `firebase init hosting` en vez de `firebase init` y `firebase deploy --only hosting` en vez de `firebase deploy`."

Ruth Lovece

hace un año

Hola, les comparto mi gestor de tareas: <https://todo-151da.web.app/> Cambie un poco los estilos y lo hice en formato tabla. Tarda un poco en cargar porque el hosting q use para cargar la persistencia es un poco lento. Simulé la parte backend con un JsonServer.

Mario Felipe Luevano Villagomez

hace un año

[Todoapp (marioluevano.online)](https://todoapp.marioluevano.online/)

Leandro Ariel Bustamante

hace un año

Me funciono luego de hacer un refresh furioso (**ctrl+shift+r varias veces**) en *chrome* (en *firefox* anduvo porq nunca lo abro). Me tiraba **404 not found** de todos los *scripts* y *css minificados* que genera el **ng build**. Antes igual pase por varios errores desde la sobre-escritura del firebase init de mi index.html, a suprimir a mano la carpeta *browser* dentro de *dist/\<projectName>* etc

ANDRES ALFONSO MIRA MEJIA

hace un año

✅