Revisión y próximos pasos

Para iniciar el frontend del Vue.js:

• Descargar la carpeta del proyecto frontend desde “Archivos y Enlaces” de esta clase
• En consola moverse al directorio del proyecto descargado (ES UN PROYECTO APARTE, no ponerlo en el directorio del proyecto de Node que hemos venido trabajando.
• Una vez en el directorio leer el archivo README.md, aquí indica que hacer. Correrá los scripts definidos en package.json
  npm install
  npm run serve
  npm run build
  _
  Al hacer npm run serve iniciará el frontend en http:localhost:8080/
  _
  Correr el servidor del chat y recargar la página del frontend y listo!
  NOTA: asegurarse de instalar e iniciar el módulo cors en el backend del chat para que funcione

El curso genial, pero necesito un curso completo de websockets para entenderlo bien jejej

Para la gente de React, cree un frontend que utiliza esta API. Pueden descargarlo de mi github y dejarme una estrellita. Tambien pueden cambiarlo como gusten y comentar sugerencias!

Para conectar el Frontend hay que seguir los siguiente pasos:

• Descargar todos los archivos en la pestaña de Archivos y Enlaces.
• Copiar y pegar todos los archivos (ojo hay archivos que en el explorador de archivos no aparecen como el .eslintrc.js asegurate de también copiarlos) a la carpeta public del proyecto de node.
• Desde la consola estando en la carpeta general del proyecto de node, moverse a la carpeta public (cd public).
• Ejecutar el comando: npm install (se instalaran todas las dependencias del proyecto).
• Ejecuten el servidor que tienen de node: nodemon server.js (estando en la carpeta general del proyecto cd …).
• Ejecutar el comando: npm run serve (correrá el proyecto en un servidor local en el puerto 8080).
• En el navegador pongan http://localhost:8080/ y listo ahi podrán ver el front que muestran en el video funcionando!

Yo hice el front con React, aquí les dejo mi Github por si quieren darme estrellita y hacerme sugerencias 😄, también desplegué la aplicación en Heroku por si quieren probarla!

Leyendo los comentarios y resumiendo la información faltante:

Descargar la carpeta que está en Archivos y enlaces
Descomprimir
Por consola entrar a esa carpeta
ejecutar:
npm install
npm run serve
npm run serve --fix
npm run build
Debería crear una carpeta dist, entrar y copiar los archivos
Pegarlos en la carpeta public de nuestro proyecto
Listo!
nodemon server

2021 Seguimos sin poder implementar el frontend que el profe proporcionó, pero bueno, no por eso dejen de hacer su propio frontend

Les presento los retos que propone socketio:

- Broadcast a message to connected users when someone connects or disconnects.
- Add support for nicknames.
- Don’t send the same message to the user that sent it. Instead, append the message directly a soon as he/she presses enter.
- Add “{user} is typing” functionality.
- Show who’s online.
- Add private messaging.

Hola, existe alguna documentación para entender como puedo integrar el frontend de Vue en esta clase con el proyecto de Node que llevamos por a parte

Al correr npm install me da el siguiente error:

npm ERR! code ENOTFOUND
npm ERR! syscall getaddrinfo
npm ERR! errno ENOTFOUND
npm ERR! network request to http://npm.fintonic.com:4873/yorkie/-/yorkie-2.0.0.tgz failed, reason: getaddrinfo ENOTFOUND npm.fintonic.com
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Anderson\AppData\Local\npm-cache\_logs\2021-03-19T21_50_31_855Z-debug.log

¿Que debo hacer?

Cuando envio un mensaje desde insomnia, no llega al instante a la app de Vue, toca recargar, why?

Todo bien hasta esta clase

Teniendo dos clientes abiertos, y en un mismo chat, lo que escribo en el cliente 1 no se ve en tiempo real en el cliente 2.

¿Como hago para que esto pase?

El frontend esta perfecto para realizar las pruebas de lo que se estuvo trabajando, pero soy el unico al que no le funciona el socket para mostrar los mensajes en la vista de chat ?

Desde mi cliente REST envio mensajes pero no se muestran en tiempo real

Me ha encantado el curso, pero siuento que necesito retomarlo para afianzar muchas cosaas! Muchas gracias

Algo que me hubiese gustado fuera implementar un login con twj

el frontend no tiene ningna escucha de los mensajes que emite el socket desde el back, no esta en ninguna parte del codigo de vue. Les falto esa pequeña GRAN cosa.

El mejor profesor de Node del mundo

en esta clase faltó mayor explicación de como instalar vuejs en el proyecto

Excelente curso!!!

genial el curso !!!

tremendo curso!

quedó increíble el curso

Cuando añado cors al proyecto se me queda el navegador como recargando y no funciona nada… a alguien más le pasa?

Excelente curso gracias

Muy buen curso.

Muy buen curso, fácil de entender!!

No comprendo el funcionamiento, se supone que debería haber un websocket cuando abro el frontend, en la versióon compilada para producción no veo ningun websocket en la red y al correr npm run serve si se muestran websockets pero son los que vue crea para recargar la pagina cuando se modifica el código, no veo los websockets funcionando en el frontend, alguién me puede explicar esto?

Excelente curso, aunque me perdí un poco con websockets, hay que repasar. gracias

Perfecto

alguien le salio este error en la consola al ejecutar
npm run server

These dependencies were not found:

* core-js/modules/es.array.concat in ./src/store/modules/messages.js, ./src/store/modules/chat.js
* core-js/modules/es.array.for-each in ./src/store/modules/messages.js, ./src/store/modules/chat.js and 1 other
* core-js/modules/es.object.to-string in ./src/router.js
* core-js/modules/web.dom-collections.for-each in ./src/store/modules/messages.js, ./src/store/modules/chat.js
and 1 other

To install them, you can run: npm install --save core-js/modules/es.array.concat core-js/modules/es.array.for-each core-js/modules/es.object.to-string core-js/modules/web.dom-collections.for-each

ya probe con el siguiente comando y nada sigue el error

npm install core-js

tambien con lo que sugiere

npm install --save core-js/modules/es.array.concat core-js/modules/es.array.for-each core-js/modules/es.object.to-string core-js/modules/web.dom-collections.for-each

y me da el siguiente error

npm ERR! code ENOLOCAL
npm ERR! Could not install from "core-js\modules\es.array.concat" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\User\AppData\Roaming\npm-cache\_logs\2020-05-15T20_53_23_498Z-debug.log

tengo node 12.16.2

Gran curso ahora a practicar todo lo aprendido para tener el stack de MEAN controlado ❤️

excelente curso, se nota la experiencia en el desarrollo

Este curso es increíble, me encanto al 1000%

Tremendo curso! Felicitaciones!

Para hacer que funcionara el frontend con los endpoints del curso me toco modificar un poco el código en vue ya que al enviar un mensaje el usuario no se guardaba en mongo, lo dejo como observación para los que tienen el mismo problema. Les comparto también la modificación que hice.
.
En el archivo views>Messages.vue dentro del método sendMessage cambie la siguiente línea:

user: this.$store.state.user.selected

por esta:

user: this.$store.state.user.selected._id

Y en el chat para que se visualizarán los nombres del usuario que los envió cambie el siguiente código:

<div class="messages">
     <div v-for="message in $store.state.messages.list">
       {{ message.user.name }} : <-aqui hice el cambio
       {{ message.message }}
     </div>
</div>

Reemplace la línea mencionada arriba por lo siguiente:

{{ message.user[0].name }}

😃

Genial el curso, próximo reto, crear el frontend con React e implementar el backend del curso!