Reactive community/Lobby

Canal libre para habla de lo que quieran, entre más Geek mejor!!!

Oscar Blancarte

@oscarjblancarte_twitter

Hola @2013Erira_twitter me puedes indicar en unidad estás? a sí como si este error es al ejecutar el código tal cual viene en el repo o es una versión que tu estás armando siguiendo los pasos

Hector Andres Erira

@2013Erira_twitter

Iba por el capitulo 2 en la pagina 51 y lo estaba creando tal cual los pasos

Oscar Blancarte

@oscarjblancarte_twitter

Al parecer el error es con el archivo webpack.config.js, lo que dice es que no cumple con las reglas

@2013Erira_twitter Necesito que me envíes el archivos webpack.config.js y el archivo package.json para valida la configuración que tienes

Hector Andres Erira

@2013Erira_twitter

´´´
{
"name": "twitter-app",
"version": "1.0.0",
"description": "Aplicacion de redes sociales",
"scripts": {
"start": "node_modules/.bin/webpack-dev-server --progress"
},
"main": "index.js",
"author": "Hector Erira",
"license": "ISC",
"devDependencies": {
"babel-preset-react": "^6.24.1",
"webpack": "^4.33.0",
"webpack-cli": "^3.3.3",
"webpack-dev-server": "^3.7.1"
},
"dependencies": {
"react": "^15.0.0",
"react-dom": "^15.0.0",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.7.0"
}
}

´´´

module.exports = {
   entry: [
     __dirname + "/app/App.js",
   ],
   output: {
     path: __dirname + "/public",
     filename: "bundle.js",
     publicPath: "/public"
   },

   module: {
     loaders: [{
       test: /\.jsx?$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
       query:{
         presets: ['env','react']
       }
     }]
   }
 }

{
  "name": "twitter-app",
  "version": "1.0.0",
  "description": "Aplicacion de redes sociales",
  "scripts": {
    "start": "node_modules/.bin/webpack-dev-server --progress"
  },
  "main": "index.js",
  "author": "Hector Erira",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.3",
    "webpack-dev-server": "^3.7.1"
  },
  "dependencies": {
    "react": "^15.0.0",
    "react-dom": "^15.0.0",
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-preset-env": "^1.7.0"
  }
}

estos serian los dos archivos

Oscar Blancarte

@oscarjblancarte_twitter

@2013Erira_twitter ya vi cual es el problema, tienes una versión diferente de Webpack en tu package.json, lo que te recomiendo es que revices la versión del repositorio para que iguales las dependencias

lo que puedes hacer es copiar la versiones y borrar la carpeta node_module

y luego ejecutes npm install

Hector Andres Erira

@2013Erira_twitter

Hola @oscarjblancarte_twitter ya seguí tu recomendación y ya me esta corriendo el servidor
gracias

Oscar Blancarte

@oscarjblancarte_twitter

@2013Erira_twitter excelente hector, cualquier otra duda estoy a la orden.

Hector Andres Erira

@2013Erira_twitter

Hola @oscarjblancarte_twitter voy por el capitulo 5 estoy ejecutando el https://api.localhost:3000 y se ve que está funcionando bien porque me aparece la pantalla de bienvenida del Mini twitter api rest, ahora al ejecutar en la consola node initMongoDB.js me sale que no encuentra el modulo bcrypt
```E:\MERN\books-reactiveprogramming-Capitulo-16-Produccion>node InitMongoDB.js
internal/modules/cjs/loader.js:615
throw err;
^

Error: Cannot find module 'bcrypt'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:613:15)
at Function.Module._load (internal/modules/cjs/loader.js:539:25)
at Module.require (internal/modules/cjs/loader.js:667:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (E:\MERN\books-reactiveprogramming-Capitulo-16-Produccion\InitMongoDB.js:4:14)
at Module._compile (internal/modules/cjs/loader.js:738:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:749:10)
at Module.load (internal/modules/cjs/loader.js:630:32)
at tryModuleLoad (internal/modules/cjs/loader.js:570:12)
at Function.Module._load (internal/modules/cjs/loader.js:562:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:801:12)
at internal/main/run_main_module.js:21:11```

E:\MERN\books-reactiveprogramming-Capitulo-16-Produccion>node InitMongoDB.js
internal/modules/cjs/loader.js:615
    throw err;
    ^

Error: Cannot find module 'bcrypt'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:613:15)
    at Function.Module._load (internal/modules/cjs/loader.js:539:25)
    at Module.require (internal/modules/cjs/loader.js:667:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (E:\MERN\books-reactiveprogramming-Capitulo-16-Produccion\InitMongoDB.js:4:14)
    at Module._compile (internal/modules/cjs/loader.js:738:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:749:10)
    at Module.load (internal/modules/cjs/loader.js:630:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:570:12)
    at Function.Module._load (internal/modules/cjs/loader.js:562:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:801:12)
    at internal/main/run_main_module.js:21:11

Belén Jiménez

@BelnJ_twitter

@oscarjblancarte_twitter Se me paso contestarte a los de OAuth2. Estoy implementando OAuth2 directamente en la API creando un endpoint para cada mensaje que se debe responder en OAuth, en concreto para la respuesta a la petición del token he creado una ruta /token que cuando es llamada genera uno con JWT ... no se bien a que te refieres con el servidor Oauth. Muchas gracias!!

Oscar Blancarte

@oscarjblancarte_twitter

hola @2013Erira_twitter ya veo el error

cambia el import required("bcrypt")por required("bcryptjs")

eso debe de solucionar el problema

Oscar Blancarte

@oscarjblancarte_twitter

De igual forma ya actualice el repositorio para que tenga ese cambio, así que puede hacer lo anterior, o actualizar el repo para tener los últimos cambios (no olvides hacer npm install)

Hola @BelnJ_twitter OAuth es algo complejo de implementar, no solo es crear los tokens, si no que es un modelo de autenticación SSO (Single SignOn), no te puedo dar consejos exactos por que no se que frameworks está utilizando para implementarlo, pero te recomiendo que veas la documentación oficial para que entiendas bien como funciona, incluso para mí ha sido complicado implementarlo así que ve con calma.

Hector Andres Erira

@2013Erira_twitter

Hola @oscarjblancarte_twitter gracias voy a probar y te aviso

Hector Andres Erira

@2013Erira_twitter

Hola @oscarjblancarte_twitter estoy un poco confundido al ejecutar

node InitMongoDB.js

solo me creo el usuario de prueba correctamente despues me salieron varios errores al guardar tweet

Error: object [{"_bsontype":"ObjectID","id":{"0":93,"1":3,"2":42,"3":196,"4":183,"5":58,"6":82,"7":47,"8":196,"9":154,"10":242,"11":125}}] is not a valid ObjectId

pero bueno desde localhost:3000 toda la api funciona bien, crear usuario nuevo y twitear.
a esta parte no le doy tanta importancia

Hector Andres Erira

@2013Erira_twitter

Lo que me confunde un poco es: tengo el branch del capitulo 16 corriendo en el puerto 3000, ahora tengo que tambien ejecutar el del capitulo 5 que es el que va a consumir la api del capitulo 16 que es la que en este momento como ya dije en el puerto 3000 si esto es correcto, hay algo que me confunde y es que en el capitulo 5 donde dice que hay que editar el archivo config.js en el objeto module.exports veo que tambien usan el puerto 3000

module.exports = {
    debugMode : true,
    server : {
            port : 3000,
            host : "http://api.localhost"
  }
}

¿esto puede generar conflictos?

Oscar Blancarte

@oscarjblancarte_twitter

@2013Erira_twitter Erick lo del error en InitMongoDB tambien fue en la unidad 5?

Con respecto al proyecto del capitulo 16, la idea es que dejes el capitulo 16 en el puerto 3000 y el del capitulo 5 lo cambies de puesto, por ejemplo el 8080

Los dos no pueden usar el mismo puerto

3OH!

@w3skulls

Hola Óscar. Ando un poco perdido. Estoy revisando el blog, porque veo que hay dudas en ese mismo capítulo, pero no doy con ello.

El capítulo en cuestión es "Preparando el entorno del proyecto", no me queda claro... ¿Qué branch debo descargarme ? Capitulo-05-Introduccion-proyecto-minitwitter o Capitulo-16-Produccion? No encuentro la forma de crear la API

3OH!

@w3skulls

Hola @oscarjblancarte_twitter, ya tengo funcionando la API. Para continuar... ¿debo volver al Branch Capitulo-5... ? La API, queda instalada entonces o cómo funciona?

Hector Andres Erira

@2013Erira_twitter

El api del capitulo 16 queda funcionando por el puerto 3000, lo que sigue es empezar a trabajar el branch del capitulo 05 quien va a consumir los recursos del api a traves de la clase APIInvoker como se explica en la pagina 126

Oscar Blancarte

@oscarjblancarte_twitter

Hola @w3skulls, disculpa la demora, no vi la notificación de tu mensaje hasta hoy, Lo que comenta @2013Erira_twitter es correcto, tienes que correr dos aplicaciones por separado, bajas el capitulo 16 y lo corres, luego, descargas el código de la unidad 5 y lo corres por separado, la idea es que el capitulo este corriendo antes de correr el la unidad 5, por que la unidad 5 se conecta a la unidad 16

Medina-Brackets

@mogutaro7_twitter

Saludos Oscar, recientemente adquirí el libro y estoy tratando de leventar el API, para esto me bajé el código del capitulo 16 como lo indica y después ejecuté los comandos mencionados npm install y npm start, pero me salen un a serie de errores que no sé de que tratan y el api no levanta. ¿crees que me puedas echar una mano?.

El error que me manda es el siguiente:

webpack -p

Hash: 8f4f5fe3a5a3d5dffb19
Version: webpack 1.15.0
Time: 6967ms
Asset Size Chunks Chunk Names
bundle.js 321 kB 0 [emitted] main
[0] multi main 28 bytes {0} [built]

+ 322 hidden modules

WARNING in bundle.js from UglifyJs
Condition always false [./~/fbjs/lib/invariant.js:24,0]
Dropping unreachable code [./~/fbjs/lib/invariant.js:25,0]
Condition always false [./~/fbjs/lib/warning.js:22,0]
Dropping unreachable code [./~/fbjs/lib/warning.js:22,0]
Declarations in unreachable code! [./~/fbjs/lib/warning.js:23,0]
Dropping unused variable printWarning [./~/fbjs/lib/warning.js:23,0]
Condition always false [./~/prop-types/index.js:8,0]
Dropping unreachable code [./~/prop-types/index.js:8,0]
Declarations in unreachable code! [./~/prop-types/index.js:9,0]
Dropping unused variable ReactIs [./~/prop-types/index.js:9,0]
Dropping unused variable throwOnDirectAccess [./~/prop-types/index.js:13,0]
Condition always false [./~/react-dom/lib/ReactDOMComponentTree.js:101,0]
Condition always true [./~/react-dom/lib/ReactDOMComponentTree.js:101,0]
Condition always false [./~/react-dom/lib/ReactDOMComponentTree.js:160,0]
Condition always false [./~/react-dom/lib/ReactDOMComponentTree.js:170,0]
Side effects in initialization of unused variable invariant [./~/react-dom/lib/ReactDOMComponentTree.js:16,0]
Condition always false [./~/invariant/browser.js:22,0]
Dropping unreachable code [./~/invariant/browser.js:23,0]
Side effects in initialization of unused variable relogin [./app/actions/Actions.js:37,13]
Side effects in initialization of unused variable updateLoginForm [./app/actions/Actions.js:70,13]
Side effects in initialization of unused variable loginRequest [./app/actions/Actions.js:74,13]
Side effects in initialization of unused variable updateSignupForm [./app/actions/Actions.js:102,14]
Side effects in initialization of unused variable validateUser [./app/actions/Actions.js:106,13]
Side effects in initialization of unused variable signup [./app/actions/Actions.js:117,13]
Side effects in initialization of unused variable getTweet [./app/actions/Actions.js:158,13]
Side effects in initialization of unused variable addNewTweet [./app/actions/Actions.js:168,13]
Side effects in initialization of unused variable likeTweet [./app/actions/Actions.js:193,13]
Side effects in initialization of unused variable likeTweetDetail [./app/actions/Actions.js:206,13]
Side effects in initialization of unused variable updateReplyForm [./app/actions/Actions.js:232,13]
Side effects in initialization of unused variable resetReplyForm [./app/actions/Actions.js:236,13]
Side effects in initialization of unused variable getSuggestedUsers [./app/actions/Actions.js:251,13]
Side effects in initialization of unused variable logout [./app/actions/Actions.js:266,13]
Side effects in initialization of unused variable findFollowersFollowings [./app/actions/Actions.js:275,13]
Side effects in initialization of unused variable resetFollowersFollowings [./app/actions/Actions.js:284,13]
Side effects in initialization of unused variable getUserProfile [./app/actions/Actions.js:298,13]
Side effects in initialization of unused variable chageToEditMode [./app/actions/Actions.js:313,13]
Side effects in initialization of unused variable cancelEditMode [./app/actions/Actions.js:325,13]
Side effects in initialization of unused variable updateUserPageForm [./app/actions/Actions.js:333,13]
Side effects in initialization of unused variable userPageImageUpload [./app/actions/Actions.js:343,13]
Side effects in initialization of unused variable userPageSaveChanges [./app/actions/Actions.js:373,13]
Side effects in initialization of unused variable followUser [./app/actions/Actions.js:394,13]
Side effects in initialization of unused variable loadTweetDetail [./app/actions/Actions.js:413,13]
Side effects in initialization of unused variable addNewTweetReply [./app/actions/Actions.js:426,13]
Condition always false [./~/react-dom/lib/ReactInstrumentation.js:16,0]
Dropping unreachable code [./~/react-dom/lib/ReactIn

Oscar Blancarte

@oscarjblancarte_twitter

hola @mogutaro7_twitter lo que te sale no es un error, mas bien te salen warnings, pero debería de funcionar

mira, acabo de bajar el código y si me funcionó

intenta acceder al API en la siguiente URL https://api.localhost/

otra cosa, hay veces que la consola se trabaja en un mensaje

así que dale click al texto para que gane el foco la ventana y luego le das Enter, para ver si continua y te sale el mensaje de que ya estableció conexión con la base de datos.

Medina-Brackets

@mogutaro7_twitter

Hola, soy yo de nuevo, creo que no se alcanzó a poner el log completo, ya que efectiamente cuando accedo a la url me dice que el servidor ha rechazado la conexión y no me muestra nada. Esto es parte del log:

Medina-Brackets

@mogutaro7_twitter

twitter-app@1.0.0 server_windows C:\Victor\Proyectos\ReactJs\api-rest-react
set NODE_ENV=production&&node cluster.js

ENV ==> production
CLUSTER: Worker 1 started
CLUSTER: Worker 2 started
CLUSTER: Worker 3 started
CLUSTER: Worker 4 started
Example app listening on port 3000!
events.js:173
throw er; // Unhandled 'error' event
^

Error: bind EACCES null:80
at listenOnMasterHandle (net.js:1293:16)
at rr (internal/cluster/child.js:129:12)
at Worker.<anonymous> (internal/cluster/child.js:96:7)
at process.onInternalMessage (internal/cluster/utils.js:43:8)
at process.emit (events.js:201:15)
at emit (internal/child_process.js:860:12)
at processTicksAndRejections (internal/process/task_queues.js:84:9)
Emitted 'error' event at:
at listenOnMasterHandle (net.js:1294:21)
at rr (internal/cluster/child.js:129:12)
[... lines matching original stack trace ...]
at processTicksAndRejections (internal/process/task_queues.js:84:9)
CLUSTER: Worker 1 disconnected from the cluster.
Example app listening on port 3000!
events.js:173
throw er; // Unhandled 'error' event
^

Error: bind EACCES null:80
at listenOnMasterHandle (net.js:1293:16)
at rr (internal/cluster/child.js:129:12)
at Worker.<anonymous> (internal/cluster/child.js:96:7)
at process.onInternalMessage (internal/cluster/utils.js:43:8)
at process.emit (events.js:201:15)
at emit (internal/child_process.js:860:12)
at processTicksAndRejections (internal/process/task_queues.js:84:9)
Emitted 'error' event at:
at listenOnMasterHandle (net.js:1294:21)
at rr (internal/cluster/child.js:129:12)
[... lines matching original stack trace ...]
at processTicksAndRejections (internal/process/task_queues.js:84:9)
CLUSTER: Worker 1 died with exit code 1 (null)
Example app listening on port 3000!
CLUSTER: Worker 5 started
CLUSTER: Worker 3 disconnected from the cluster.
events.js:173
throw er; // Unhandled 'error' event
^

Error: bind EACCES null:80
at listenOnMasterHandle (net.js:1293:16)
at rr (internal/cluster/child.js:129:12)
at Worker.<anonymous> (internal/cluster/child.js:96:7)
at process.onInternalMessage (internal/cluster/utils.js:43:8)
at process.emit (events.js:201:15)
at emit (internal/child_process.js:860:12)
at processTicksAndRejections (internal/process/task_queues.js:84:9)
Emitted 'error' event at:
at listenOnMasterHandle (net.js:1294:21)
at rr (internal/cluster/child.js:129:12)
[... lines matching original stack trace ...]
at processTicksAndRejections (internal/process/task_queues.js:84:9)
Example app listening on port 3000!
CLUSTER: Worker 3 died with exit code 1 (null)
CLUSTER: Worker 6 started
CLUSTER: Worker 2 disconnected from the cluster.
CLUSTER: Worker 2 died with exit code 1 (null)
events.js:173
throw er; // Unhandled 'error' event
^

Error: bind EACCES null:80
at listenOnMasterHandle (net.js:1293:16)
at rr (internal/cluster/child.js:129:12)
at Worker.<anonymous> (internal/cluster/child.js:96:7)
at process.onInternalMessage (internal/cluster/utils.js:43:8)
at process.emit (events.js:201:15)
at emit (internal/child_process.js:860:12)
at processTicksAndRejections (internal/process/task_queues.js:84:9)
Emitted 'error' event at:
at listenOnMasterHandle (net.js:1294:21)
at rr (internal/cluster/child.js:129:12)
[... lines matching original stack trace ...]
at processTicksAndRejections (internal/process/task_queues.js:84:9)
CLUSTER: Worker 7 started
CLUSTER: Worker 4 disconnected from the cluster.
CLUSTER: Worker 4 died with exit code 1 (null)
CLUSTER: Worker 8 started
Example app listening on port 3000!
events.js:173
throw er; // Unhandled 'error' event
^

Oscar Blancarte

@oscarjblancarte_twitter

Hola @mogutaro7_twitter el problema está relacionado con el uso de los puertos, en el archivo server.js se utiliza el puerto 80, pero seguramente otra aplicación lo está utilizando, tienes dos soluciones, identificas que aplicación lo está utilizando y lo apagar, o cambiar el puerto

Para cambiar el puerto, ve al archivo server.js línea 71 y cambia el 80 por otro puerto:

Medina-Brackets

@mogutaro7_twitter

Muchas gracias Oscar, efectivamente era ese el problema, ya consegui que el api corriera haciendo el cambio de puerto. Gracias nuevamente.

Medina-Brackets

@mogutaro7_twitter

Pregunta, viendo en la documentación de React dice que el método del ciclo de vida de los componentes ComponentWillMount esta depreciado, ¿es seguro seguir utilizandolo ?

Oscar Blancarte

@oscarjblancarte_twitter

hola @mogutaro7_twitter , es correcto, el método componentWillMount está descontinuado, pero sigue funcionando y no se tiene fecha para su desaparición, lo que se aconseja a hora, es utilizar el constructor en lugar de ese método.

Por otra parte, te invito a que te suscribas a mi curso grátuito de React donde hablo de los nuevos métodos del ciclo de vida de react

Lo puedes ver en el módulo 3 https://pixknowledge.com/courses/react-essential

Where communities thrive

People

Repo info

Activity