Valió la pena cada maldito segundo, pude hacerlo desde principio hasta fin y solucionar problemas de paso ;). Sin duda eres el mejor creador de contenido de programación que he visto de habla hispana. Muy completo, y lo que mas me gusta es que siempre te enfocas en dejar la menor cantida de es huecos posibles. Incluso me sorprendió que explicaras el useContext hook en este vídeo, ya que se supone que quienes vemos esto ya hemos trabajado con las siglas de MERN antes. Te agradezco mucho porque con estos conocimientos puedo crear una web completa de inicio a fin y a medida.
Si ves esto actualmente ya el fs que trae Nodejs ya soporta promesas asi que no necesitas instalar fs-extra, solo importas fs y utilizas "await fs.promises.rm(req.files.image.tempFilePath)" y listo :3 excelente curso Fazt
Excelente video, se nota que sabes y mucho, me sirvió demaciado tu video tutorial, solo que al finar, me hice bolas completamente con tanto modulos que utilizabas, gran video!
Hi, me encanta como explicas y me he hecho Miembro Prémium, ya lo fui, pero no sabía mucho, ahora estoy bastante avanzado para seguir lo que haces e incluso implementar. Muchas gracias
Fazt Code. Sí lo colocaste " async ". Minuto 54:39 . Pero igual que lo colocaste lo borraste. sin darte cuenta. Un saludo. Muchas gracias. Fazt. Aprendo mucho contigo.
No puedo expresar el placer que me dio conocer la extencion de MongoDB del VS Code. Siempre use la terminal pero tener esa interfaz grafica en el mismo editor junto con el Thunder Client que remplazo a mi viejo Postman estan haciendo que ya no salga del editor para nada. Gracias por esto
gran aporte fazt, no sabes lo que he aprendido contigo, seria bueno que hagas un video de react pero usando SWR, solo te doy una idea mas, para tus futuros videos
Buenas, en el momento 1:17:52, en el apartado subir imagen, cuando yo le doy "enviar" me da un error el cual dice "Connection was forcibly closed by a peer." ya busque en bastantes sitios pero no encontré nada parecido, me gustaría que me ayudaras, de antemano gracias.
Buenas, en el modulo de subir imagen, cuando yo le doy "enviar" me da un error el cual dice "JSON: Unexpected token position at 0" y me decía también "Payload to large error: request entity too large". Espero que alguien me pueda ayudar :/
4:01:24 si al actualizar les sale un rerror de react que debe tener una key o no les renderiza, Estuve un rato y bueno era que en mi controller desde mi backend en la parte de updatepost Yo retornaba un mensaje Cuando deberia retornar el post, La funcion findByIdAndUpdate retorna el objeto nuevo, entonces deberiamos ponerle eso con un json -> return res.json(post) y listo por si alguno se quedo jaja ;)
Hola! Ahora estoy en la hora 3:54:00 y tengo el problema de que al darle en Delete no solo sale el modal para eliminar sino que me redirecciona a posts/:id :( cuando en realidad solo tendría que salir el modal sin redireccionar a ningún lado. Me pueden orientar sobre el porque sucede esto? no encuentro diferencia entre mi código con lo hecho en el tutorial.
Mas adelante lo explico y según recuerdo si lo he añadido. Lo que pasa es que como el botón está dentro de la tarjeta ambos eventos se disparan. Para evitar esto hay una función que puedes añadirle al click del botón delete llamado e.stopPropagation() el cual hace cuando desde click en el button acabe allí y no dispare el evento del elemento padre, en este caso la tarjeta
buenas tardes, cuando trato de hacer el edit me aparece esto "A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info:" so me pueden ayudar, gracias
Hola! Estoy por iniciar la 3ra hora del tutorial pero tengo este problema de Formik: Warning: An unhandled error was caught from submitForm() TypeError: createPost is not a function . Está relacionado con el handleSubmit y el createPost. Cuando paso como prop createPost desaparece ese Warning pero igual no me funciona.
@@MrJackferson Gracias! ese era mi problema. Ahora estoy en la hora 3:54:00 y tengo el problema de que al darle en Delete no solo sale el modal para eliminar sino que me redirecciona a posts/:id :(
No entiendo!! por que me da error en el deployd. El error es el siguiente: e.map is not a function en Homepage.js My ERROR: return ( {posts.map((post) => ( ))} ); }; e.map es posts.map, pero no es leido....
tengo una duda, ya que estoy realizando algo parecido con un crud en mern en el cual ocupo estar almacenando imagenes, pero si es necesario que suba mas de 2 imagenes como puedo realizarlo
Buenas una pregunta en la parte subir las imagenes con cloudinary añado la variable image que contiene la url y el id pero cuando se "sube" a mongo db no pone esos datos aunque sí que se sube a cloudbinary
Hola Fazt excelentes explicaciones. Tengo una duda al final de la explicación del BackEnd. Cuando se desea subir una publicación o post son requeridos los campos title y description y la imagen es opcional. Luego de implementar la parte del cloudinary me pasa que si no envío la imagen ya no me permite crear la publicación. Como se podría solucionar esto gracias.
hay alguna manera de editar la terminal cuanto se ejecute en c/c++ por visual estudio , un ejemplo serie que en la terminal se ejecute un menu y este te pida que ingreses un numero de 1 al 4 pero esta no me deja ingresar nada (no me permite editar), asi que si te sabes la solucion por favor comunicamela
Buenos días, por favor en el minuto 1.17.30 tengo este error: SyntaxError: Unexpected token - in JSON at position 0 at JSON.parse () at createStrictSyntaxError (C:\Users\Usuario1\Desktop\carpetas-de-proyectos\carpeta-nodejs-andmore-29-11-22\mern-crud-2 ode_modules\body-parser\lib\types\json.js:160:10) Que puede ser?
He podido resolver el problema creo, porque ahora me apareció la carpeta upload, creo porque en thunder client tenia marcado Content-type application/json; me podrías explicar el error? si explicaras un poco en 'Headers' en Tunder client cosa hay que marcar y porque me sería util entender. muchas gracias
@@sparkiedoteth no se aquí en youtube como poner un screen shot pero en la consola dice esto: bundle.js:229 Uncaught (in promise) AxiosError {message: 'Request failed with status code 431', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}code: "ERR_BAD_REQUEST"config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}message: "Request failed with status code 431"name: "AxiosError"request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}response: {data: '', status: 431, statusText: 'Request Header Fields Too Large', headers: AxiosHeaders, config: {…}, …}stack: "AxiosError: Request failed with status code 431 at settle (localhost:3000/static/js/bundle.js:55392:12) at XMLHttpRequest.onloadend (localhost:3000/static/js/bundle.js:54103:66)"[[Prototype]]: Error getPosts @ bundle.js:229 y también: Failed to load resource: the server responded with a status of 431 (Request Header Fields Too Large)
@@sparkiedoteth parece que hay un problema con los 'headers' que le llega demasiada información pero no se como hacer para que le llegue menos o permitir que pueda recibir más, eliminé y he creado otra vez la base de datos y sigue igual
Minuto 1:24:00 Cuando explicas que puedes subir o bien la ruta o bien el archivo. creo tener un error. Me pide el parámetro file. se crea un error message: { "message": "Missing required parameter - file" } Si lo ve conveniente dejo este error ya solucionado. solamente me falto una letra por eso sale ese error. no me reconocía uploadImage(req.files.image.temFilePath) me faltó una letra en tempFilePath. Ahora ya funciona.
Holaaaa! Estoy en la hora 4:55:57 (Ya terminando después de una semana de amanecidas jeje) y antes de hacer el build deberíamos borrar el node_modules del client? como para que el build no lo considere? Por que el peso de mi compilado sigue siendo 87.1M y veo que el node_modules sigue en el build a pesar del cambio implementado en package.json. Mil gracias!
No recuerdo, pero creo que si mostre como eliminarlo en el video añdiendo el comando 'rm -rf', o simplemente añadelo a tu gitignore y haria un proceso similar.
hola amigo, tehago una pregunta. Puedo llevar a cabo este proyecto tal como lo hiciste vos pero creando el proyecto con vite en vez de create-react-app ?? espero tu respuesta y gracias !
Excelente video, lastima que no puedo avanzar ya que cuando intento hacer un post desde el form en thunder me tira un error Unexpected token "-" y todavia no doy en la tecla.
A alguien le ha salido el error ""msj": "Cannot read properties of undefined (reading 'image')"?, no he dado para solucionarlo y desaparece si quito la sección de código que se encarga de procesar la imagen
estas cerca, next basicamente se utiliza para saltar a la siguiente funcion. Por ejemplo, si tienes esta funcion: app.use('/hello', first, second) en donde first y second son funciones. si usas next() dentro de la funcion 'first', este continuará con la funcion 'second'; pero si ejecutaste return en la funcion 'first', ya no continuará, acabará allí
varios lo mencionarón, asi que añadi unas cuantas lineas de código en el repositorio de código que esta en la descripción, de alli te puedes guiar. Basicamente sí, tienes que volver a enviar la imagen y eliminas la anterior la vuelves a subir y el nuevo enlace es el que guardas en tu colección de mongodb
Hello bro really really good tutorial but is problem with item update, when select another image it works not correct, instead of the obj with new image is inputed empty obj and because of that img not showing
Hola!! Ya he logrado desplegar la aplicación pero me queda un par de dudas: 1) En el caso de que a la url le agregue /posts me devuelve un json con todos los posts. Como se evitaría esto? POr ejemplo, yo quiero aplicar esto a una aplicación para registrar ventas pero no sería adecuado que con ponerle algo como /ventas le muestre todas las ventas que hay a cualquier persona; 2) Hay algún video sobre el despliegue de alguna aplicación final osea ya para producción teniendo en cuenta los aspectos de seguridad para evitar que sea vulnerada la aplicación? Yo tengo mi shared hosting en namecheap y quiero desplegar el aplicativo que estoy creando en base a este tutorial allí pero me preocupa que sea fácilmente vulnerado porque seguro hay cosas que no considero al desplegar. Mil gracias por el tutorial! Me sirvió bastante para consolidar mis conocimientos y resolver dudas existenciales que tenía. Ahora me falta poder desplegar la aplicación a un escenario real con dominio propio y evitar que sea fácilmente vulnerada.
Muchas gracias Fazt por este video, aprendi muchisimo a comprender react y el uso del contexto. Te quiero hacer una consulta, en el momento de crear un post y el usuario no llena los campos, el boton save sigue funcionando, como se podria validar y que el boton se desactive si todavia no se llenaron los campos? Desde ya, mucas gracias.
Hola! De vuelta por aquí jeje, quería consultarte sobre Eslint, yo le puse Eslint a mi proyecto pero al final tuve que eliminarlo porque no hacía el build por un conflicto con la librería de airbnb. Mi mayor duda es en la cofiguración de Eslint que me dice si va a usar import/export o require, o si va a ejecutar en Browser vs Node... En este caso tengo un Package Json en la raíz del proyecto y otro package json en la carpeta client que está dentro del proyecto. Eslint lo instalé dos veces. En este sentido, no sería redundante tener 2 package json? que me recomendarías hacer? Gracias!!!
Exelente video Fazt, oye como redirecciono a otra pagina fuera de este proyecto dentro del onClick() del div del Componente PostCard? En vez de esto: onClick={() => navigate(`/update-post/${post._id}`)} que deberia ir dentro para redireccionar a una url fuera de este proyecto? lo que quiero es pasarle la url de la imagen de cloudinary para cuando se clickee la card me lleve a esa url de la imagen, se que deberia ir dentro algo asi: {post.image ? post.image.url : null} pero dentro de que?? Gracias Fazt
Cuando añado un nuevo post si se pinta en el frontend pero cuando edito o elimino no se vuelve a renderizar, tengo que refrescar la página... creo que el problema soy yo xd
Puede pasar quizas porque no estas actualizando el estado del Context, o si en caso si lo estas actualizando, puede que al actualizar estés actualizando la dirección de la imagen a vacío (" ") otra vez🤔 Te recomiendo revisar el repo de la descripción
Oye una pregunta, porque tu no tuviste que instalar CORS para permitir hacer el fetch del frontend al backend ? que hciste que no me di cuenta o que ? gracias
Añadí un proxy al package.json que hace que sirva la api en el mismo dominio del frontend. Pero si vas a desplegar la aplicación en servicios separados vas a necesitar probablemente el paquete cors
@@FaztCode Con razon es que no me funciono el proxy, por eso tuve que recurrir a esa opcion, pero mirare que estoy haciendo mal. Por cierto, otra cosita, mira que me percate que ya al final del proyecto si actualizas un post sin imagen y le añades alguna, esto no hace nada, no modifica ni el backend ni la ingresa en Cloudinary, podrias sugerirme como corregir este problema ? gracias por tu tiempo.
@@FaztCode Gracias bro!! Cuestion que lo segui todo al pie de la letra, repasandolo y haciendolo, de forma local anda perfecto, pero mi unica traba fue hacer el deploy... y no lo puedo lograr, una lastima! seguramente haya que actualizar un poco el codigo...
Exacto digo lo mismo, todo muy bien, pero faltaría ese toque que también se pueda editar las imágenes, para evitar problemas de bug, ya que lo hay, cuando se quiere editar la imagen uu
Hola Martín, he actualizado el respositorio de código, y ahora tambien permite actualizar desde frontend la imagen. Puedes ver el código en github: github.com/FaztWeb/mern-context-crud o clonar el repo, colocarle tus credenciales y ver como funciona.
The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string. puedes hacer un videos explicando este error ya que no encuentro la solucion
El problema es que el archivo .env lo tiene en la carpeta tiene que estar fuera en la carpteta raiz....y se soluciona tu problemas....saludos de los andes peruanos
El problema es que el archivo .env lo tiene en la carpeta tiene que estar fuera en la carpteta raiz....y se soluciona tu problemas....saludos de los andes peruanos
@@cattleya6802 con la versión de thunder client 10 no tuve que poner nada en el headers(ni content-type ni aplicaciónJson ni nada) para mandar la peticion post y haces el código tal cual fazt y carga las imágenes desde cloudinary desde postform de react tal cual hace fazt((cuando vas a desinstalar la última versión de thunder aparece una solapita que te da la opción de elegir versiones anteriores,proba alguna anterior))
Fazt, ame tu video y me sirvio de mucho, muchas gracias. Tengo una duda, en caso de que quiera subir multiples imagenes, este metodo, de subirlo a cloudinary, tambien funcionaria?
Por supuesto, cloudinary como esta especializado en subir solo archivos permite subir cualquier tipo de archivos y varios al mismo tiempo tambien, solo cambiaria el metodo con el que lo subes. solo cambias en lugar de upload.simple() por upload.array() y le pasas tus multiples imagenes
Hola Amigo, ¿Cuando mencionas las funciones te refieres a los modulos de node, como path, url, http, y esos? El next() es un callback de Javascript en realidad, que no es un metodo de Nodejs sino de express, el framework, asi que para entenderlo primero debes saber que es un middleware en express. Por ahora te dejo un video ruclips.net/video/794Q71KVw1k/видео.html pero ya estoy planeando renovar ese video esta semana y tambien uno de manejo de errores. SI tienes otra duda, dejalo en nuevo comentario para poder verlo en mi feed :)
Una pregunta querida comunidad !! Alguno tuvo un error en el despliegue , no le deja subir la aplicación , cuando intenta ejecutar el comando build del server !! No encuentra la carpeta del front o algo mal en el path no direcciona bien . Alguna recomendación , la aplicación me anda perfecto en mi máquina jajajajajajaja
Hola David, acabo de actualizar el respositorio y ahora puedes actualizar las imágenes tambien usando el mismo formulario. El proceso de subida es actualizar es con la misma lógica que la subida. Es decir, cuando actualizas subes una nueva imagen, esta se guarda en cloudinary y solo cambias la url y el public_id en la base de datos. github.com/FaztWeb/mern-context-crud Colocale tus credenciales y pruebalo. Cualquier otra duda, hacerlo en un comentario nuevo que de esa forma me entero. Saludos
@@FaztCode Muchas gracias eres un crack, lo único que faltaría es que haga una validación para las imágenes, si funciona al crearla y que sea requerida, pero cuando se quiere editar se cruza solo seria ese pequeño detalle de ahí todo esta perfecto :3, verdad gente si desean que al actualizar también se borre la imagen de cloudinary y ingrese la otra para que de esa manera no les consuma espacio en cloudinary pueden ejecutar este código en los post.controllers.js let post = await Post.findById(req.params.id) await deleteImage(post.image.public_id);
en la funcion export const updatePost = async (req, res) => {let post = await Post.findById(req.params.id) await deleteImage(post.image.public_id); } pongalo primero antes de cargar la imagen actualizada
Al momento de declarar Los hooks, considerar que deben empezar (Obligatoriamente) con MAYUSCULAS, en el ejemplo "PostContaniner", yo lo declare como "postContainer" estuve 2 dias con ese bendito error, tuve q leerme la API Hooks. Saludos y espero sirvan el comentario.
@@FaztCode dr una consulta, y es que no puedo solucionarlo. Como haria para acceder desde el archivo App.js al estado (useState) "posts " que pertenece al archivo postContext.js. Intente importarlo, pero me salta errores del react-router-dom. creo que entra en un ciclo sin fin. Espero puedas ayudarme. Saludos
cuando desde el front-end hace la peticion POST, Fazt le pone el signo de (?) al condicional req.files?.image ,si les marca error al guardar como fue mi caso, hice asi y pude hacer la peticion POST sin enviar image,y nada es solo para colaborar si es que puedo ,exelente trabajo de Fazt de quien siempre aprendo => if (!req.files) { const newPost = new Post({ title, description, image }) await newPost.save(); res.send(newPost); } if (req.files.image) { const result = await uploadImageCloudinary(req.files.image.tempFilePath) await fs.remove(req.files.image.tempFilePath) image = { url: result.secure_url, public_id: result.public_id } const newPost = new Post({ title, description, image }) await newPost.save(); res.send(newPost); }
hola Cristian... yo he seguido y he usado también y he desplegado el repo del hace mas menos 2 días desde esta fecha.. no puedo cargar las imágenes. tu código soluciona eso???? quiero implementar pero no estoy seguro si hablamos de mismas fechas desde el repo descargado..... Saludos y gracias por cualquier ayuda-.
@@perrochokoo hola campeón mira por lo que estuve viendo esta app tiene instalado React- scripts 5.0.0 en el packjson ,y se e ve que tiene cambios de versiones anteriores muy novedosas ,para algunos errores lo desintalaba instalaba alguna versión 4 u después volvía a instalar la 5 y me curaba errores,(((lo que si es que si vas a usar una versión 4 de react-scripts no te reconoce tailwinds,tenés que usar Bootstrap))también instale una versión anterior de thunder client,creo que la 10 o 12 y si instalas la última creo que es la 16 y el content-type no lo reconoce para el post (hablo por mi)..por ahora hasta la el edit de los posts en react me funciona perfecto ,todavía no probé subir archivo de imagen desde el postform ,saludos
@@cristian_27 gracias... Voy a revisar por ese lado, aun que el código no es muy antiguo al pareser... De todas maneras veremos por ese lado si mejora o revienta en algún punto 😅
@@perrochokoo con la versión de thunder client 10 no tuve que poner nada en el headers(ni content-type ni aplicaciónJson ni nada) para mandar la peticion post y haces el código tal cual fazt y carga las imágenes desde cloudinary desde postform de react tal cual hace fazt((cuando vas a desinstalar la última versión de thunder aparece una solapita que te da la opción de elegir versiones anteriores,proba alguna anterior))
Genial fazt! gran video, tengo una duda, cuando mando por consola req.files.image.tempFilePath me dice que Property 'tempFilePath' does not exist on type 'UploadedFile | UploadedFile[]'. Psdt: Lo estoy haciendo con ts
FATZ TE AMOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
![Blox Fruits Dragon Rework Update [Full Stream]](http://i.ytimg.com/vi/EqDAp8udhm0/mqdefault.jpg)
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
Valió la pena cada maldito segundo, pude hacerlo desde principio hasta fin y solucionar problemas de paso ;). Sin duda eres el mejor creador de contenido de programación que he visto de habla hispana. Muy completo, y lo que mas me gusta es que siempre te enfocas en dejar la menor cantida de es huecos posibles. Incluso me sorprendió que explicaras el useContext hook en este vídeo, ya que se supone que quienes vemos esto ya hemos trabajado con las siglas de MERN antes. Te agradezco mucho porque con estos conocimientos puedo crear una web completa de inicio a fin y a medida.
¿Crees que me voy a pasar casi 5 horas viendo tu video?, pues sí, estás en lo correcto, bueno Fazt siempre un placer ver tus videos!.
Y no una vez, varias veces😅
Order!! To be orderly is to read what goes first. Thank you Fazt. I love you
¡¡Orden!! Ser ordenado es leer lo que va primero. Gracias Fazt. Te amo
Si ves esto actualmente ya el fs que trae Nodejs ya soporta promesas asi que no necesitas instalar fs-extra, solo importas fs y utilizas "await fs.promises.rm(req.files.image.tempFilePath)" y listo :3 excelente curso Fazt
gracias
Excelente video, se nota que sabes y mucho, me sirvió demaciado tu video tutorial, solo que al finar, me hice bolas completamente con tanto modulos que utilizabas, gran video!
que JEFE , me viene de lujo, estoy haciendo un proyecto ahora muy parecido, Muchas gracias Fazt
Hola Fazt , disfruto mucho de tus videos ya que ademas de aprender me resultan muy entretenidos
Gracias por todo lo que he aprendido!!
Hola Fazt
Excelente, cada vez te superas más y más.
Gracias
Eres un crack, gracias por compartir tus conocimientos.
Hola de nuevo un agradecimiento enorme tus videos me han servido de mucho para mi propio desarrollo
Gracias Fazt.... me ayudo mucho este video-tutorial... como siempre.!!! 🙌
Muchas gracias amigo por este videazo gracias a este video he aprendido mucho eres un grande
Excelente Fazt gracias por tus conocimientos !!!
Gracias por esto Fazt, justo estaba buscando un tutorial de MERN...
Muchisimas Gracias Fazt, ha sido como siempre una marabilla! :D Es increible aprender contigo! :D
Maestro de maestros
Hi, me encanta como explicas y me he hecho Miembro Prémium, ya lo fui, pero no sabía mucho, ahora estoy bastante avanzado para seguir lo que haces e incluso implementar. Muchas gracias
Muy util este tutorial!!! justo me hacia falta conocer de cloudinary
Gracias por todos los videos que haces Fazt
Fazt Code. Sí lo colocaste " async ". Minuto 54:39 . Pero igual que lo colocaste lo borraste. sin darte cuenta. Un saludo. Muchas gracias. Fazt. Aprendo mucho contigo.
UN HEROE SIN COMPARACIÓN
Excelente contenido fazt, de lo mejor como siempre
3:17:05 Configurar tabs de espacios y prittier
4:17:47 Stop Propagation (Detener la propagacion de evento click)
Eres el mejor Fazt gracias por todos tus vídeos
Gracias por compartirnos esto, fazt. 🤩🤩
Creo que lees la mente para saber q necesitamos Fazt 😍
Me gustó mucho tu video Fazt..y por cierto eres un crack....en cuando puedas, me gustaría ver lo mismo pero con Vuejs...gracias
¡Qué buenos videos! El mejor.
No puedo expresar el placer que me dio conocer la extencion de MongoDB del VS Code. Siempre use la terminal pero tener esa interfaz grafica en el mismo editor junto con el Thunder Client que remplazo a mi viejo Postman estan haciendo que ya no salga del editor para nada. Gracias por esto
Al momento de instalar esa extensión me arroja un warning en mi package.json, me podrías ayudar?
@@ProgramaThor Puedo intentarlo. tenes una foto del warning?
gran aporte fazt, no sabes lo que he aprendido contigo, seria bueno que hagas un video de react pero usando SWR, solo te doy una idea mas, para tus futuros videos
Buenísima idea, lo anoto para hacer algunos ejemplos
Buenas, en el momento 1:17:52, en el apartado subir imagen, cuando yo le doy "enviar" me da un error el cual dice "Connection was forcibly closed by a peer." ya busque en bastantes sitios pero no encontré nada parecido, me gustaría que me ayudaras, de antemano gracias.
Tengo el mismo problema ya encontraste la solucion?
estoy emocionado
Terminado. No lo subí, queda pendiente para cuando me ponga a aprender producción. Gracias Totales!!!
si lo pudiste hacer el deploy messirve jaja el ayudin
sos el verdadero 1 faztsito
Que tipo más capo 👏
Contenido genial, Gracias!!
Es muy bueno este vídeo, gracias señor Fazt!!
Fazt: sube un nuevo video.
Yo: -messirve
Buenas, en el modulo de subir imagen, cuando yo le doy "enviar" me da un error el cual dice "JSON: Unexpected token position at 0" y me decía también "Payload to large error: request entity too large". Espero que alguien me pueda ayudar :/
Hola buenas buenas ! pudiste solucionarlo???
@@khalilaliviera3200 Hola, nono lo dejé sin la subida de imágenes
4:01:24 si al actualizar les sale un rerror de react que debe tener una key o no les renderiza, Estuve un rato y bueno era que en mi controller desde mi backend en la parte de updatepost Yo retornaba un mensaje Cuando deberia retornar el post, La funcion findByIdAndUpdate retorna el objeto nuevo, entonces deberiamos ponerle eso con un json -> return res.json(post) y listo por si alguno se quedo jaja ;)
Hola! Ahora estoy en la hora 3:54:00 y tengo el problema de que al darle en Delete no solo sale el modal para eliminar sino que me redirecciona a posts/:id :( cuando en realidad solo tendría que salir el modal sin redireccionar a ningún lado. Me pueden orientar sobre el porque sucede esto? no encuentro diferencia entre mi código con lo hecho en el tutorial.
Mas adelante lo explico y según recuerdo si lo he añadido. Lo que pasa es que como el botón está dentro de la tarjeta ambos eventos se disparan. Para evitar esto hay una función que puedes añadirle al click del botón delete llamado e.stopPropagation() el cual hace cuando desde click en el button acabe allí y no dispare el evento del elemento padre, en este caso la tarjeta
@@FaztCode geniaaal. Pensé algo así pero estuve usando el z-index en el botón pero no sirvió. Seguiré viendo el tutorial entonces. Gracias!
buenas tardes, cuando trato de hacer el edit me aparece esto "A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info:" so me pueden ayudar, gracias
¿Lo solucionaste? Me sale lo mismo :(
Bro eres un crack, oye no se si hayas subido algun tutorial de MERN para un e-commerce, gracias por todo me has ayudado mucho para mis trabajos :D
Justo estoy creando uno porque me lo piden mucho a más tardar lo publico el viernes entrante
@@FaztCode Estaría genial usar React Hook Form en vez de Formik
Uff, que buena idea para un video
@@FaztCode Ya lo estamos esperando con ansias :)
Hola! Estoy por iniciar la 3ra hora del tutorial pero tengo este problema de Formik: Warning: An unhandled error was caught from submitForm() TypeError: createPost is not a function . Está relacionado con el handleSubmit y el createPost. Cuando paso como prop createPost desaparece ese Warning pero igual no me funciona.
Estás exportando la función desde el postContext?
@@MrJackferson Gracias! ese era mi problema. Ahora estoy en la hora 3:54:00 y tengo el problema de que al darle en Delete no solo sale el modal para eliminar sino que me redirecciona a posts/:id :(
Tengo un error al subirlo a heroku me dice react-scripts not found y falla el build, alguna idea?
No entiendo!! por que me da error en el deployd. El error es el siguiente: e.map is not a function en Homepage.js My ERROR: return (
{posts.map((post) => (
))}
);
};
e.map es posts.map, pero no es leido....
Increíble tu contenido! Eres de los mejores en YT. El cloudinary sirve también para videos?
Si por supuesto, tambien puedes subir videos, audios, hasta pdfs
tengo una duda, ya que estoy realizando algo parecido con un crud en mern en el cual ocupo estar almacenando imagenes, pero si es necesario que suba mas de 2 imagenes como puedo realizarlo
Buenas una pregunta en la parte subir las imagenes con cloudinary añado la variable image que contiene la url y el id pero cuando se "sube" a mongo db no pone esos datos aunque sí que se sube a cloudbinary
Una última cosa, alguien conoce la manera de poder ver la imagen a pantalla completa al pulsar en ella?, no he dado con la solución. Gracias
Hola Fazt excelentes explicaciones. Tengo una duda al final de la explicación del BackEnd. Cuando se desea subir una publicación o post son requeridos los campos title y description y la imagen es opcional. Luego de implementar la parte del cloudinary me pasa que si no envío la imagen ya no me permite crear la publicación. Como se podría solucionar esto gracias.
Cual es la diferencia de http y https ?
hay alguna manera de editar la terminal cuanto se ejecute en c/c++ por visual estudio , un ejemplo serie que en la terminal se ejecute un menu y este te pida que ingreses un numero de 1 al 4 pero esta no me deja ingresar nada (no me permite editar), asi que si te sabes la solucion por favor comunicamela
Buenos días, por favor en el minuto 1.17.30 tengo este error:
SyntaxError: Unexpected token - in JSON at position 0
at JSON.parse ()
at createStrictSyntaxError (C:\Users\Usuario1\Desktop\carpetas-de-proyectos\carpeta-nodejs-andmore-29-11-22\mern-crud-2
ode_modules\body-parser\lib\types\json.js:160:10)
Que puede ser?
He podido resolver el problema creo, porque ahora me apareció la carpeta upload, creo porque en thunder client tenia marcado Content-type application/json; me podrías explicar el error? si explicaras un poco en 'Headers' en Tunder client cosa hay que marcar y porque me sería util entender. muchas gracias
Reinicia el servidor :)
@@sparkiedoteth lo hice varias veces hoy y ayer...
@@sparkiedoteth no se aquí en youtube como poner un screen shot pero en la consola dice esto:
bundle.js:229 Uncaught (in promise) AxiosError {message: 'Request failed with status code 431', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}code: "ERR_BAD_REQUEST"config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}message: "Request failed with status code 431"name: "AxiosError"request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}response: {data: '', status: 431, statusText: 'Request Header Fields Too Large', headers: AxiosHeaders, config: {…}, …}stack: "AxiosError: Request failed with status code 431
at settle (localhost:3000/static/js/bundle.js:55392:12)
at XMLHttpRequest.onloadend (localhost:3000/static/js/bundle.js:54103:66)"[[Prototype]]: Error
getPosts @ bundle.js:229
y también:
Failed to load resource: the server responded with a status of 431 (Request Header Fields Too Large)
@@sparkiedoteth parece que hay un problema con los 'headers' que le llega demasiada información pero no se como hacer para que le llegue menos o permitir que pueda recibir más, eliminé y he creado otra vez la base de datos y sigue igual
Minuto 1:24:00 Cuando explicas que puedes subir o bien la ruta o bien el archivo. creo tener un error. Me pide el parámetro file. se crea un error message: {
"message": "Missing required parameter - file"
}
Si lo ve conveniente dejo este error ya solucionado. solamente me falto una letra por eso sale ese error. no me reconocía uploadImage(req.files.image.temFilePath) me faltó una letra en tempFilePath. Ahora ya funciona.
Grande Fazt 🚀
Holaaaa! Estoy en la hora 4:55:57 (Ya terminando después de una semana de amanecidas jeje) y antes de hacer el build deberíamos borrar el node_modules del client? como para que el build no lo considere? Por que el peso de mi compilado sigue siendo 87.1M y veo que el node_modules sigue en el build a pesar del cambio implementado en package.json. Mil gracias!
No recuerdo, pero creo que si mostre como eliminarlo en el video añdiendo el comando 'rm -rf', o simplemente añadelo a tu gitignore y haria un proceso similar.
hola amigo, tehago una pregunta. Puedo llevar a cabo este proyecto tal como lo hiciste vos pero creando el proyecto con vite en vez de create-react-app ?? espero tu respuesta y gracias !
Excelente video, lastima que no puedo avanzar ya que cuando intento hacer un post desde el form en thunder me tira un error Unexpected token "-" y todavia no doy en la tecla.
A alguien le ha salido el error ""msj": "Cannot read properties of undefined (reading 'image')"?, no he dado para solucionarlo y desaparece si quito la sección de código que se encarga de procesar la imagen
Revise su sintaxis al igual le faltó una simple letra. A mi me a pasado con tempFilePath. Me faltó una simple letra.
En este caso, se solucionó agregando if (req.files?.image)
@@josephespitiacorrea6702 Lo importante es que funcione. Saludos.
gracias Fazt
super!!!!
Puedo conectar todo eso con angular ?
El backend tal y como está lo puedes usar con angular sin problemas
@@FaztCode Perfecto! Gracias fazt siempre tan genio
amigo entonces, next () se utilizar para saltar un middleware a otro ? en el caso de uso de return que pasa ?
estas cerca, next basicamente se utiliza para saltar a la siguiente funcion. Por ejemplo, si tienes esta funcion:
app.use('/hello', first, second)
en donde first y second son funciones. si usas next() dentro de la funcion 'first', este continuará con la funcion 'second'; pero si ejecutaste return en la funcion 'first', ya no continuará, acabará allí
@@FaztCode okis muchas gracias!!!!
@@FaztCode entonces el return sería equivalente a next('route'), según la documentación de expressJS
Te quiero.
Oye y si quiero actualizar la imagen, requiero volverlo al formato form al server
varios lo mencionarón, asi que añadi unas cuantas lineas de código en el repositorio de código que esta en la descripción, de alli te puedes guiar. Basicamente sí, tienes que volver a enviar la imagen y eliminas la anterior la vuelves a subir y el nuevo enlace es el que guardas en tu colección de mongodb
@@FaztCode de hecho hace rato que las vi, pero muchas gracias por responder mi pregunta Lindo
Hello bro really really good tutorial but is problem with item update, when select another image it works not correct, instead of the obj with new image is inputed empty obj and because of that img not showing
Hola!! Ya he logrado desplegar la aplicación pero me queda un par de dudas: 1) En el caso de que a la url le agregue /posts me devuelve un json con todos los posts. Como se evitaría esto? POr ejemplo, yo quiero aplicar esto a una aplicación para registrar ventas pero no sería adecuado que con ponerle algo como /ventas le muestre todas las ventas que hay a cualquier persona; 2) Hay algún video sobre el despliegue de alguna aplicación final osea ya para producción teniendo en cuenta los aspectos de seguridad para evitar que sea vulnerada la aplicación? Yo tengo mi shared hosting en namecheap y quiero desplegar el aplicativo que estoy creando en base a este tutorial allí pero me preocupa que sea fácilmente vulnerado porque seguro hay cosas que no considero al desplegar. Mil gracias por el tutorial! Me sirvió bastante para consolidar mis conocimientos y resolver dudas existenciales que tenía. Ahora me falta poder desplegar la aplicación a un escenario real con dominio propio y evitar que sea fácilmente vulnerada.
Excelente como siempre, esperamos el curso de TailwindCSS o No?
Tengo uno introductorio que publicaré pronto :)
Muchas gracias Fazt por este video, aprendi muchisimo a comprender react y el uso del contexto. Te quiero hacer una consulta, en el momento de crear un post y el usuario no llena los campos, el boton save sigue funcionando, como se podria validar y que el boton se desactive si todavia no se llenaron los campos? Desde ya, mucas gracias.
Ya estoy en ese nivel en donde entiendo todo el código pero aún así no podría escribirlo como fazt
Hola! De vuelta por aquí jeje, quería consultarte sobre Eslint, yo le puse Eslint a mi proyecto pero al final tuve que eliminarlo porque no hacía el build por un conflicto con la librería de airbnb. Mi mayor duda es en la cofiguración de Eslint que me dice si va a usar import/export o require, o si va a ejecutar en Browser vs Node... En este caso tengo un Package Json en la raíz del proyecto y otro package json en la carpeta client que está dentro del proyecto. Eslint lo instalé dos veces. En este sentido, no sería redundante tener 2 package json? que me recomendarías hacer? Gracias!!!
Master 🫡
Exelente video Fazt, oye como redirecciono a otra pagina fuera de este proyecto dentro del onClick() del div del Componente PostCard?
En vez de esto:
onClick={() => navigate(`/update-post/${post._id}`)}
que deberia ir dentro para redireccionar a una url fuera de este proyecto? lo que quiero es pasarle la url de la imagen de cloudinary para cuando se clickee la card me lleve a esa url de la imagen, se que deberia ir dentro algo asi:
{post.image ? post.image.url : null}
pero dentro de que??
Gracias Fazt
1:34:06 Extraño fallo de sonido en el video.
Cuando añado un nuevo post si se pinta en el frontend pero cuando edito o elimino no se vuelve a renderizar, tengo que refrescar la página... creo que el problema soy yo xd
Puede pasar quizas porque no estas actualizando el estado del Context, o si en caso si lo estas actualizando, puede que al actualizar estés actualizando la dirección de la imagen a vacío (" ") otra vez🤔
Te recomiendo revisar el repo de la descripción
habrá curso de webassembly usando c++? la mayoría de tutoriales que vi eran con C
Oye una pregunta, porque tu no tuviste que instalar CORS para permitir hacer el fetch del frontend al backend ? que hciste que no me di cuenta o que ? gracias
Añadí un proxy al package.json que hace que sirva la api en el mismo dominio del frontend. Pero si vas a desplegar la aplicación en servicios separados vas a necesitar probablemente el paquete cors
@@FaztCode Con razon es que no me funciono el proxy, por eso tuve que recurrir a esa opcion, pero mirare que estoy haciendo mal. Por cierto, otra cosita, mira que me percate que ya al final del proyecto si actualizas un post sin imagen y le añades alguna, esto no hace nada, no modifica ni el backend ni la ingresa en Cloudinary, podrias sugerirme como corregir este problema ? gracias por tu tiempo.
Podrías explicar los fallos de CORS al hacer fetch o con axios?
Gracias por tus videos. Se puede decir que la primera parte antes de iniciar con REACT es una API?
Si así es, sería una REST API :)
puede ser que heroku no sea gratuito para desplegar la app?
ya no es gratuito, ahora hay otras alternativas:
ruclips.net/video/BqLVnocxxF0/видео.html
ruclips.net/video/C3NhmT__Mn4/видео.html
@@FaztCode Gracias bro!! Cuestion que lo segui todo al pie de la letra, repasandolo y haciendolo, de forma local anda perfecto, pero mi unica traba fue hacer el deploy... y no lo puedo lograr, una lastima! seguramente haya que actualizar un poco el codigo...
¿el tuyo actualiza la imagen y la muestra? Me parece que te faltó esa parte. Por demás, me encanta y estimula tu contenido
Exacto digo lo mismo, todo muy bien, pero faltaría ese toque que también se pueda editar las imágenes, para evitar problemas de bug, ya que lo hay, cuando se quiere editar la imagen uu
Hola Martín, he actualizado el respositorio de código, y ahora tambien permite actualizar desde frontend la imagen. Puedes ver el código en github:
github.com/FaztWeb/mern-context-crud
o clonar el repo, colocarle tus credenciales y ver como funciona.
The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string. puedes hacer un videos explicando este error ya que no encuentro la solucion
Estas seguro de no tener un error tipográfico?, tu problema debe ser una falta de comillas o algo por el estilo
El problema es que el archivo .env lo tiene en la carpeta tiene que estar fuera en la carpteta raiz....y se soluciona tu problemas....saludos de los andes peruanos
El problema es que el archivo .env lo tiene en la carpeta tiene que estar fuera en la carpteta raiz....y se soluciona tu problemas....saludos de los andes peruanos
tus videos son muy buenos..en un futuro puedes agregar a este mismo proyecto JWT para que cada usuario tenga permisos CRUD ?
El thunder client ahora no te deja subir imagenes solo en la version de pagaaa :((
Si no les carga la imagen en Thunder Client, prueben en el Headers en vez de Content-Type prueben Accept-Charset.
gracias brother,llevaba estancado 2 dias
Ufff Muchas gracias brother!!!!!!!!
@@cattleya6802 con la versión de thunder client 10 no tuve que poner nada en el headers(ni content-type ni aplicaciónJson ni nada) para mandar la peticion post y haces el código tal cual fazt y carga las imágenes desde cloudinary desde postform de react tal cual hace fazt((cuando vas a desinstalar la última versión de thunder aparece una solapita que te da la opción de elegir versiones anteriores,proba alguna anterior))
@Nixlu tiene la solución al problema descrito por en los comentarios más abajo gracias
Fazt, ame tu video y me sirvio de mucho, muchas gracias. Tengo una duda, en caso de que quiera subir multiples imagenes, este metodo, de subirlo a cloudinary, tambien funcionaria?
Por supuesto, cloudinary como esta especializado en subir solo archivos permite subir cualquier tipo de archivos y varios al mismo tiempo tambien, solo cambiaria el metodo con el que lo subes. solo cambias en lugar de upload.simple() por upload.array()
y le pasas tus multiples imagenes
el backend no esta terminado si sigues el video, caso contrario al backend/files q esta en el Github
Amigo, hace un videos cortos sobre los funciones de node por fa, consulta cual es la diferencia entre next() con un return en node?
Hola Amigo, ¿Cuando mencionas las funciones te refieres a los modulos de node, como path, url, http, y esos?
El next() es un callback de Javascript en realidad, que no es un metodo de Nodejs sino de express, el framework, asi que para entenderlo primero debes saber que es un middleware en express. Por ahora te dejo un video
ruclips.net/video/794Q71KVw1k/видео.html
pero ya estoy planeando renovar ese video esta semana y tambien uno de manejo de errores.
SI tienes otra duda, dejalo en nuevo comentario para poder verlo en mi feed :)
@@FaztCode como path, url, http, y esos? siii son muchichimos... :)
Hola Fazt. ¿qué distro de Linux utilizas en este proyecto?
Hola Bob. Estoy usando xubuntu
Una pregunta querida comunidad !! Alguno tuvo un error en el despliegue , no le deja subir la aplicación , cuando intenta ejecutar el comando build del server !! No encuentra la carpeta del front o algo mal en el path no direcciona bien . Alguna recomendación , la aplicación me anda perfecto en mi máquina jajajajajajaja
Todo muy perfecto, pero no se puede editar las imágenes, solo crearlas ¿Cómo se podrían? ayuda uu
Hola David, acabo de actualizar el respositorio y ahora puedes actualizar las imágenes tambien usando el mismo formulario. El proceso de subida es actualizar es con la misma lógica que la subida. Es decir, cuando actualizas subes una nueva imagen, esta se guarda en cloudinary y solo cambias la url y el public_id en la base de datos.
github.com/FaztWeb/mern-context-crud
Colocale tus credenciales y pruebalo. Cualquier otra duda, hacerlo en un comentario nuevo que de esa forma me entero. Saludos
@@FaztCode Muchas gracias eres un crack, lo único que faltaría es que haga una validación para las imágenes, si funciona al crearla y que sea requerida, pero cuando se quiere editar se cruza solo seria ese pequeño detalle de ahí todo esta perfecto :3, verdad gente si desean que al actualizar también se borre la imagen de cloudinary y ingrese la otra para que de esa manera no les consuma espacio en cloudinary pueden ejecutar este código en los post.controllers.js
let post = await Post.findById(req.params.id)
await deleteImage(post.image.public_id);
en la funcion export const updatePost = async (req, res) => {let post = await Post.findById(req.params.id)
await deleteImage(post.image.public_id); } pongalo primero antes de cargar la imagen actualizada
para los que se conectaron con Mongo DB Atlas e instalaron mongo db for vsc, a mi solo me conecto poniendo la url que va en dotenv
Fazt haciendo un tutorial con linux, eso si que no se ve a menudo
Si creo que en este canal lo voy a usar más en videos, y en el principal al ser más generico solo Windows :)
no me funciono el proxy
Estás usando webpack o Vite?
@@FaztCode Vite
Al momento de declarar Los hooks, considerar que deben empezar (Obligatoriamente) con MAYUSCULAS, en el ejemplo "PostContaniner", yo lo declare como "postContainer" estuve 2 dias con ese bendito error, tuve q leerme la API Hooks. Saludos y espero sirvan el comentario.
Correcto. De hecho es un componente, por eso sigue las mismas reglas para crear componentes en React. Gracias por comentar tu solución :)
@@FaztCode dr una consulta, y es que no puedo solucionarlo. Como haria para acceder desde el archivo App.js al estado (useState) "posts " que pertenece al archivo postContext.js. Intente importarlo, pero me salta errores del react-router-dom. creo que entra en un ciclo sin fin. Espero puedas ayudarme. Saludos
1:30:03
cuando desde el front-end hace la peticion POST, Fazt le pone el signo de (?) al condicional req.files?.image ,si les marca error al guardar como fue mi caso, hice asi y pude hacer la peticion POST sin enviar image,y nada es solo para colaborar si es que puedo ,exelente trabajo de Fazt de quien siempre aprendo =>
if (!req.files) {
const newPost = new Post({ title, description, image })
await newPost.save();
res.send(newPost);
}
if (req.files.image) {
const result = await uploadImageCloudinary(req.files.image.tempFilePath)
await fs.remove(req.files.image.tempFilePath)
image = {
url: result.secure_url,
public_id: result.public_id
}
const newPost = new Post({ title, description, image })
await newPost.save();
res.send(newPost);
}
hola Cristian... yo he seguido y he usado también y he desplegado el repo del hace mas menos 2 días desde esta fecha.. no puedo cargar las imágenes. tu código soluciona eso???? quiero implementar pero no estoy seguro si hablamos de mismas fechas desde el repo descargado..... Saludos y gracias por cualquier ayuda-.
@@perrochokoo hola campeón mira por lo que estuve viendo esta app tiene instalado
React- scripts 5.0.0 en el packjson ,y se e ve que tiene cambios de versiones anteriores muy novedosas ,para algunos errores lo desintalaba instalaba alguna versión 4 u después volvía a instalar la 5 y me curaba errores,(((lo que si es que si vas a usar una versión 4 de react-scripts no te reconoce tailwinds,tenés que usar Bootstrap))también instale una versión anterior de thunder client,creo que la 10 o 12 y si instalas la última creo que es la 16 y el content-type no lo reconoce para el post (hablo por mi)..por ahora hasta la el edit de los posts en react me funciona perfecto ,todavía no probé subir archivo de imagen desde el postform ,saludos
@@cristian_27 gracias... Voy a revisar por ese lado, aun que el código no es muy antiguo al pareser... De todas maneras veremos por ese lado si mejora o revienta en algún punto 😅
@@perrochokoo con la versión de thunder client 10 no tuve que poner nada en el headers(ni content-type ni aplicaciónJson ni nada) para mandar la peticion post y haces el código tal cual fazt y carga las imágenes desde cloudinary desde postform de react tal cual hace fazt((cuando vas a desinstalar la última versión de thunder aparece una solapita que te da la opción de elegir versiones anteriores,proba alguna anterior))
Genial fazt! gran video, tengo una duda, cuando mando por consola req.files.image.tempFilePath me dice que Property 'tempFilePath' does not exist on type 'UploadedFile | UploadedFile[]'.
Psdt: Lo estoy haciendo con ts
FATZ TE AMOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO