\n
![\"Css](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-19-at-08.51.39.png\")
Vamos a profundizar un poco en esto de las rutas, que es una de las partes centrales de express(y yo diría de Node casi).
\nLas rutas es lo que hemos llamado anteriormente métodos (el get que configuramos para probar), y como ya comentamos y vimos en la documentación oficial de express, tenemos lo siguiente
app.method(urlPath,handler)\nSiendo:
\nUn detalle importante es que se comprueban las coincidencias de rutas en el orden que están escritas por lo que puede ser una buena opción si por ejemplo queremos comprobar si un usuario tiene permiso para acceder a cierta ruta o path.
\nOtro tipo de ruta o middleware es la de ficheros estáticos como pueden ser imágenes,css o ficheros javascript, ya comenté un poco en el post anterior como era ya que por defecto la carpeta public estaba configurada como tal, veamoslo un poco en detalle
\napp.use(express.static(path.join(__dirname, 'public')));\nCon esto lo que le estamos indicando a express y a node con este middleware es que todo lo que este en la carpeta public será servido como estático, ojo teniendo que usar la estructura de carpetas existentes, me refiero a que si debajo de public tenemos una carpeta images el path deberia ser urlRaiz/images/imagen.jpg. Vamos a comprobarlo con el fichero css que nos crea por defecto express generator, que en este caso esta dentro de la carpeta stylesheets y tiene el nombre style.css, entonces como hemos comentado la ruta sería (con nuestro proyecto iniciado claro está)
\nhttp://localhost:3000/stylesheets/style.css\nLo que nos devolvería el fichero css en el navegador
\n
También podemos indicarle a express que nos sirva los estáticos a través de un path o ruta virtual que nosotros le indiquemos, en lugar desde la ruta raiz. Si ponemos esta línea en el fichero app.js de nuestro proyecto (cambiandola por la que nos servía estáticos antes)
\napp.use('/ninja_static',express.static(path.join(__dirname, 'public')));\nentonces nuestra url cambiaría a
\nhttp://localhost:3000/ninja_static/stylesheets/style.css\nEsto es muy útil si por ejemplo tenemos una estructura de carpetas de estáticos muy larga y queremos realemente acortar las url, podríamos por ejemplo cambiarlo por
\napp.use('/ninjacss',express.static(path.join(__dirname, 'public/stylesheets')));\nLo que nos convierte la url a
\nhttp://localhost:3000/ninjacss/style.css\nComo véis podemos gestionar nuestras rutas como queramos para que sea más cómodo trabajar con ellas.
\nHasta ahora habíamos visto siempre como trabajar con rutas digamos estáticas pero claro ninguna API es nunca tan simple, generalmente en la URL pasamos información para recibir un elemento específico, imaginemos por ejemplo que estamos creando una API que nos devuelva información sobre todos los superhéroes/villanos de los comics del mundo, ¿cuántos podrían ser? Miles como mínimo, lo que supondría tener que hacer una API con miles de middlewares ¿no?...por suerte no es necesario ya que sería algo inviable, ningún servicio aguantaría eso, lo que hacemos es que nuestro middleware reciba parámetros por ejemplo en la url, con este estilo
\nhttp://heroapi.com/hero/57\no este por ejemplo
\nhttp://heroapi.com/hero?name=batman\nTenemos varias formas de hacerlo, para finalmente buscar la información usando ese parámetro, todo en el mismo middleware.
\nEn general tenemos cuatro formas de hacerlo:
Empecemos con un ejemplo con usando la ruta, nos vamos a nuestro proyecto de ejemplo ninja_project y vamos a modificar la ruta del index.js poniéndole un parámetro para cambiar el título. Quedaría así:
\nvar express = require('express');\nvar router = express.Router();\n\n/* GET home page. */\nrouter.get('/:title', function(req, res, next) {\n var newTitle = req.params.title\n res.render('index', { title: newTitle });\n});\n\nmodule.exports = router;\nComo véis a la ruta le hemos puesto :title y luego simplemente hemos sacado esa información de los parámetros (params) de la petición (request).
\nSi ejecutamos con npm start y probamos por ejemplo con
http://localhost:3000/Ninja\nTendríamos este resultado
\n![\"Middleware](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-20-at-09.21.56.png\")
\nUsando las rutas como paso de parámetros tenemos varias opciones, para por ejemplo si queremos que el parámetro sea opcional(si probáis sin poner /Ninja os daria un error el ejemplo anterior) ponemos la ruta de esta manera
router.get('/:title?', function(req, res, next) {\nTambién es posible usar expresiones regulares para que por ejemplo solo admita números
\nrouter.get('/:id([0-9]+)', function(req, res, next) {\nY es posible poner varios
\nrouter.get('/:type(villain|hero)/data/:name)', function(req, res, next) {\nEsta aceptaría en type solo villain o hero y en name cualquier cosa.
\nLas rutas son bastante dinámicas para poder gestionar middlewares de manera más cómoda y segura para nosotros(evitando datos de algún tipo que no queremos recibir).
Ahora veamos un ejemplo con la segunda forma, que veréis que es muy parecido.
\nvar express = require('express');\nvar router = express.Router();\n\n/* GET home page. */\nrouter.get('/', function(req, res, next) {\n console.log(req.query);\n var newTitle = req.query.title;\n res.render('index', { title: newTitle });\n});\n\nmodule.exports = router;\nHemos vuelto a dejar la ruta o path como estaba y en lugar de obtener el dato de title de los parámetros de la url, lo hacemos con la query y ¿como usamos esto? He puesto también un console.log para que veáis como recibimos los elementos de tipo query string. Simplemente poner
\nhttp://localhost:3000/?title=Ninja\nAl probar obtendríamos el mismo resultado, y si miráis el log de la consola veréis como recibe los parámetros de la query, como un objeto clave= valor
\n![\"Middleware](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-20-at-09.30.05.png\")
\n![\"Log](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-20-at-09.29.57.png\")
Hasta ahora hemos estado centrados todo el rato en ala captura de la petición, es decir, en la parte request pero ¿que pasa con la respuesta? Vamos a ver algunos de los métodos de respuesta más usados, pero lo mejor es que miréis la documentación que vienen todos y muy bien explicados:
\nres.send('Hola Ninjas')\nres.render('index',{title: 'Super Título Ninja'});\nres.json({ name: 'Batman'});\nres.download('/rutaYNombreFichero.doc','nombreOpcionalDelFichero');\nres.redirect('/root/path/algo');\nres.redirect('http://urlnueva');\nres.redirect(301,'http://urlnueva');\nres.redirect('../ruta/algo')\nres.redirect('back')\nSi miráis la documentación hay muchos más y todos estos pueden admitir más parámetros, con más opciones de configuración. Comentar que casi todas las opciones de respuesta soportan cambiar el código de estado, solo tenemos que encadenar métodos
\nres.status(500).send('Error');\nres.status(200).render('index');\nMuy cómodo si queremos devolver algún código específico que no sea el de por defecto de cada respuesta.
\nPoco a poco veremos como van saliendo distintos tipos de respuesta en los ejemplos que vayamos haciendo.
Hasta ahora hemos estado trabajando con lo que ya nos había configurado express, pero ¿y si queremos crear nuestra propia ruta?¿Cuáles serían los pasos? Bien, pues vamos a verlos.
\nLo primero de todo es crearnos un fichero nuevo en la carpeta routes(para mantener el orden), por ejemplo lo voy a llamar ninjas.js y de momento le ponemos esto
'use strict'\n\nvar express = require('express');\nvar router = express.Router();\n\n/* GET home page. */\nrouter.get('/heros', function(req, res, next) {\n res.json({ninjas: "Somos un montón de ninjas"})\n});\n\nmodule.exports = router;\nSi os fijáis lo que hacemos es instanciar un Router, que es una de las formas de crear rutas para pasarselas a express. A este router le hemos indicado el método a usar, su path y su respuesta y por último lo hemos exportado como si de un módulo se tratara para así poder usarlo en cualquier parte de nuestra aplicación.
\nLo siguientes es irnos al app.js que, como ya comentamos en su momento, entre otras cosas tiene la instanciación de las rutas, y preparamos la nuestra, para ello lo primero es requerirla, y lo hacemos debajo de las otras
var index = require('./routes/index');\nvar users = require('./routes/users');\nvar ninjas = require('./routes/ninjas');\nYa la tenemos disponible en nuestro app.js pero realmente todavia no le hemos indicado donde tiene que escuchar y que tiene que hacer, para hacerlo buscamos donde ha creado las otras y hacemos lo propio
\napp.use('/', index);\napp.use('/users', users);\napp.use('/ninjas',ninjas);\nY listo con esto ya tendríamos nuestra propia ruta, como véis es bastante sencillo. Ahora vamos a probarla peeeeero ojo al dato, tenemos que tener en cuenta:
\nEsto lo remarco porque realmente esto lo que esta haciendo es escuchar lo primero en el path /ninjas y según ese path lo que hace es indicarle al ninjas.js que es su turno (en plan enga majete a currar), pero claro este router tiene configurado también su propio path, es decir que a partir del path por el que ha sido convocado en el app.use tiene que cumplir el segundo que en este caso seria heros, por lo que la ruta quedariía así
\nhttp://localhost:3000/ninjas/heros\nY esto nos devolvería un json
\n![\"Own](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-21-at-09.28.26.png\")
\nUna vez que entiendes como funciona, ves que realmente es bastante sencillo configurar y trabajar con las rutas de express.
Durante todo el post, ha estado apareciendo la palabra middleware pero , ¿que es exáctamente un middleware? Un middleware es un handler o manejador que responde a un tipo de petición o a todas. Básicamente es lo que hemos estado haciendo todo el rato. Veamos algunos detalles de su implementación.
\nSi os habéis fijado en nuestros middlewares que nos ha creado express, en los parámetros que recibe la función handler, tenemos esto
function(req, res, next) {\nHemos visto que es req y res pero ¿que es next?, básicamente next es un método para indicar que continue hasta el siguiente middleware si no queremos terminar la ejecución. Supongamos por ejemplo que queremos comprobar el token de acceso de un usuario o sin ir más lejos si un usuario existe antes de tener acceso a ningún otro middleware. En este caso podríamos crear un middleware que en todas las peticiones compruebe cualquiera de los dos casos y a continuación una vez comprobado simplemente le diríamos que continuará al siguiente middleware para darle acceso a lo que realmente ha solicitado, es decir, acceso al middleware que nos ha mandado como request.
\nAhora vamos a ver un ejemplo muy sencillito para que se entienda mejor, pero antes comentar que si un middleware no responde de ninguna forma y no indica explicitamente que vaya al siguiente middleware no saldrá del handler en cuestión y nos dará timeout la petición. Vamos con el ejemplo, primero comprobemos que nos da timeout, para elloen nuestro app.js antes de indicar los middlewares ponemos los siguiente
app.use('/', function(req,res,next){\n console.log('MIddleware sin respuesta');\n});\n//Encima de este\napp.use('/', index);\nY comprobamos lo que pasa al acceder
\n![\"Middleware](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-22-at-09.11.37.png\")
\nEl log muestra nuestro nuevo middleware pero la ventana se queda a la espera de recibir algo
\n![\"Timeout](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-22-at-09.12.01.png\")
\nAhora pongamos el next a ver que pasa
app.use('/', function(req,res,next){\n console.log('MIddleware sin respuesta');\n next();\n});\nComo véis en la consola ha pasado por el middleware(2 veces) y ha continuado hasta el siguiente middleware que coincide que es el index
\n![\"Screen-Shot-2017-09-22-at-09.14.56\"](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-22-at-09.14.56.png\")
\nY como no hemos pasado en la queryString(que es como lo dejamos antes) solo nos aparece el welcome
\n![\"Screen-Shot-2017-09-22-at-09.17.10\"](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-22-at-09.17.10.png\")
\nPero por lo menos vemos que ha continuado sin problemas.
\nImportante no podemos responder a un middleware y pasar al siguiente, lo que sea que queramos hacer tiene que ser al revés, es decir, no podemos responder 2 veces a la misma petición ya que el cliente no espera más de una respuesta, si en algún momento recibís en consola un log que ponga algo similar a header ya envíado o similar es porque estáis intentando responder dos veces.
\nLos middlewares podemos separarlos en varios tipos (como concepto de uso):
app.use('/', index);\nvar router = express.Router();\n\n/* GET home page. */\nrouter.get('/', function(req, res, next) {}\n// error handler\napp.use(function(err, req, res, next) {\n // set locals, only providing error in development\n res.locals.message = err.message;\n res.locals.error = req.app.get('env') === 'development' ? err : {};\n\n // render the error page\n res.status(err.status || 500);\n res.render('error');\n});\nNormalmente son llamados por nosotros pasándoselo al next, si os fijáis en el app.js, justo encima del middleware de error tenemos uno que captura todas las peticiones que no han coincidido y le pasa un mensaje de tipo 404 al middleware de error con next(err)(básicamente en cuanto a next le pasemos algo irá al handler de error)
\n// catch 404 and forward to error handler\napp.use(function(req, res, next) {\n var err = new Error('Not Found');\n err.status = 404;\n next(err);\n});\nCreo que más o menos he comentado casi todo lo importante referente a los middlewares (ha sido un post más largo de lo habitual jejejejje), espero que a partir de ahora podáis hacer los vuestros sin problemas, en el siguiente post veremos un poco los templates y alguna cosa más. Sin mucho más nos veeemossss un abrazoooorrr
\n","url":"https://jlgarcia.fulldev.ninja/dont-stop-the-party-node-js-ix-rutas/","canonical_url":null,"uuid":"b9cc95c8-2f3a-4ab3-83e3-a3e502ab0146","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"59c01ce36c31a60001f69f59","reading_time":11,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"Vamos a profundizar un poco en esto de las rutas, que es una de las partes centrales de express(y yo diría de Node casi).
\nLas rutas es lo que hemos llamado anteriormente métodos (el get que configuramos para probar), y como ya comentamos y vimos en la documentación oficial de express, tenemos lo siguiente
app.method(urlPath,handler)\nSiendo:
\nUn detalle importante es que se comprueban las coincidencias de rutas en el orden que están escritas por lo que puede ser una buena opción si por ejemplo queremos comprobar si un usuario tiene permiso para acceder a cierta ruta o path.
\nOtro tipo de ruta o middleware es la de ficheros estáticos como pueden ser imágenes,css o ficheros javascript, ya comenté un poco en el post anterior como era ya que por defecto la carpeta public estaba configurada como tal, veamoslo un poco en detalle
\napp.use(express.static(path.join(__dirname, 'public')));\nCon esto lo que le estamos indicando a express y a node con este middleware es que todo lo que este en la carpeta public será servido como estático, ojo teniendo que usar la estructura de carpetas existentes, me refiero a que si debajo de public tenemos una carpeta images el path deberia ser urlRaiz/images/imagen.jpg. Vamos a comprobarlo con el fichero css que nos crea por defecto express generator, que en este caso esta dentro de la carpeta stylesheets y tiene el nombre style.css, entonces como hemos comentado la ruta sería (con nuestro proyecto iniciado claro está)
\nhttp://localhost:3000/stylesheets/style.css\nLo que nos devolvería el fichero css en el navegador
\n
También podemos indicarle a express que nos sirva los estáticos a través de un path o ruta virtual que nosotros le indiquemos, en lugar desde la ruta raiz. Si ponemos esta línea en el fichero app.js de nuestro proyecto (cambiandola por la que nos servía estáticos antes)
\napp.use('/ninja_static',express.static(path.join(__dirname, 'public')));\nentonces nuestra url cambiaría a
\nhttp://localhost:3000/ninja_static/stylesheets/style.css\nEsto es muy útil si por ejemplo tenemos una estructura de carpetas de estáticos muy larga y queremos realemente acortar las url, podríamos por ejemplo cambiarlo por
\napp.use('/ninjacss',express.static(path.join(__dirname, 'public/stylesheets')));\nLo que nos convierte la url a
\nhttp://localhost:3000/ninjacss/style.css\nComo véis podemos gestionar nuestras rutas como queramos para que sea más cómodo trabajar con ellas.
\nHasta ahora habíamos visto siempre como trabajar con rutas digamos estáticas pero claro ninguna API es nunca tan simple, generalmente en la URL pasamos información para recibir un elemento específico, imaginemos por ejemplo que estamos creando una API que nos devuelva información sobre todos los superhéroes/villanos de los comics del mundo, ¿cuántos podrían ser? Miles como mínimo, lo que supondría tener que hacer una API con miles de middlewares ¿no?...por suerte no es necesario ya que sería algo inviable, ningún servicio aguantaría eso, lo que hacemos es que nuestro middleware reciba parámetros por ejemplo en la url, con este estilo
\nhttp://heroapi.com/hero/57\no este por ejemplo
\nhttp://heroapi.com/hero?name=batman\nTenemos varias formas de hacerlo, para finalmente buscar la información usando ese parámetro, todo en el mismo middleware.
\nEn general tenemos cuatro formas de hacerlo:
Empecemos con un ejemplo con usando la ruta, nos vamos a nuestro proyecto de ejemplo ninja_project y vamos a modificar la ruta del index.js poniéndole un parámetro para cambiar el título. Quedaría así:
\nvar express = require('express');\nvar router = express.Router();\n\n/* GET home page. */\nrouter.get('/:title', function(req, res, next) {\n var newTitle = req.params.title\n res.render('index', { title: newTitle });\n});\n\nmodule.exports = router;\nComo véis a la ruta le hemos puesto :title y luego simplemente hemos sacado esa información de los parámetros (params) de la petición (request).
\nSi ejecutamos con npm start y probamos por ejemplo con
http://localhost:3000/Ninja\nTendríamos este resultado
\n
\nUsando las rutas como paso de parámetros tenemos varias opciones, para por ejemplo si queremos que el parámetro sea opcional(si probáis sin poner /Ninja os daria un error el ejemplo anterior) ponemos la ruta de esta manera
router.get('/:title?', function(req, res, next) {\nTambién es posible usar expresiones regulares para que por ejemplo solo admita números
\nrouter.get('/:id([0-9]+)', function(req, res, next) {\nY es posible poner varios
\nrouter.get('/:type(villain|hero)/data/:name)', function(req, res, next) {\nEsta aceptaría en type solo villain o hero y en name cualquier cosa.
\nLas rutas son bastante dinámicas para poder gestionar middlewares de manera más cómoda y segura para nosotros(evitando datos de algún tipo que no queremos recibir).
Ahora veamos un ejemplo con la segunda forma, que veréis que es muy parecido.
\nvar express = require('express');\nvar router = express.Router();\n\n/* GET home page. */\nrouter.get('/', function(req, res, next) {\n console.log(req.query);\n var newTitle = req.query.title;\n res.render('index', { title: newTitle });\n});\n\nmodule.exports = router;\nHemos vuelto a dejar la ruta o path como estaba y en lugar de obtener el dato de title de los parámetros de la url, lo hacemos con la query y ¿como usamos esto? He puesto también un console.log para que veáis como recibimos los elementos de tipo query string. Simplemente poner
\nhttp://localhost:3000/?title=Ninja\nAl probar obtendríamos el mismo resultado, y si miráis el log de la consola veréis como recibe los parámetros de la query, como un objeto clave= valor
\n
\n
Hasta ahora hemos estado centrados todo el rato en ala captura de la petición, es decir, en la parte request pero ¿que pasa con la respuesta? Vamos a ver algunos de los métodos de respuesta más usados, pero lo mejor es que miréis la documentación que vienen todos y muy bien explicados:
\nres.send('Hola Ninjas')\nres.render('index',{title: 'Super Título Ninja'});\nres.json({ name: 'Batman'});\nres.download('/rutaYNombreFichero.doc','nombreOpcionalDelFichero');\nres.redirect('/root/path/algo');\nres.redirect('http://urlnueva');\nres.redirect(301,'http://urlnueva');\nres.redirect('../ruta/algo')\nres.redirect('back')\nSi miráis la documentación hay muchos más y todos estos pueden admitir más parámetros, con más opciones de configuración. Comentar que casi todas las opciones de respuesta soportan cambiar el código de estado, solo tenemos que encadenar métodos
\nres.status(500).send('Error');\nres.status(200).render('index');\nMuy cómodo si queremos devolver algún código específico que no sea el de por defecto de cada respuesta.
\nPoco a poco veremos como van saliendo distintos tipos de respuesta en los ejemplos que vayamos haciendo.
Hasta ahora hemos estado trabajando con lo que ya nos había configurado express, pero ¿y si queremos crear nuestra propia ruta?¿Cuáles serían los pasos? Bien, pues vamos a verlos.
\nLo primero de todo es crearnos un fichero nuevo en la carpeta routes(para mantener el orden), por ejemplo lo voy a llamar ninjas.js y de momento le ponemos esto
'use strict'\n\nvar express = require('express');\nvar router = express.Router();\n\n/* GET home page. */\nrouter.get('/heros', function(req, res, next) {\n res.json({ninjas: \"Somos un montón de ninjas\"})\n});\n\nmodule.exports = router;\nSi os fijáis lo que hacemos es instanciar un Router, que es una de las formas de crear rutas para pasarselas a express. A este router le hemos indicado el método a usar, su path y su respuesta y por último lo hemos exportado como si de un módulo se tratara para así poder usarlo en cualquier parte de nuestra aplicación.
\nLo siguientes es irnos al app.js que, como ya comentamos en su momento, entre otras cosas tiene la instanciación de las rutas, y preparamos la nuestra, para ello lo primero es requerirla, y lo hacemos debajo de las otras
var index = require('./routes/index');\nvar users = require('./routes/users');\nvar ninjas = require('./routes/ninjas');\nYa la tenemos disponible en nuestro app.js pero realmente todavia no le hemos indicado donde tiene que escuchar y que tiene que hacer, para hacerlo buscamos donde ha creado las otras y hacemos lo propio
\napp.use('/', index);\napp.use('/users', users);\napp.use('/ninjas',ninjas);\nY listo con esto ya tendríamos nuestra propia ruta, como véis es bastante sencillo. Ahora vamos a probarla peeeeero ojo al dato, tenemos que tener en cuenta:
\nEsto lo remarco porque realmente esto lo que esta haciendo es escuchar lo primero en el path /ninjas y según ese path lo que hace es indicarle al ninjas.js que es su turno (en plan enga majete a currar), pero claro este router tiene configurado también su propio path, es decir que a partir del path por el que ha sido convocado en el app.use tiene que cumplir el segundo que en este caso seria heros, por lo que la ruta quedariía así
\nhttp://localhost:3000/ninjas/heros\nY esto nos devolvería un json
\n
\nUna vez que entiendes como funciona, ves que realmente es bastante sencillo configurar y trabajar con las rutas de express.
Durante todo el post, ha estado apareciendo la palabra middleware pero , ¿que es exáctamente un middleware? Un middleware es un handler o manejador que responde a un tipo de petición o a todas. Básicamente es lo que hemos estado haciendo todo el rato. Veamos algunos detalles de su implementación.
\nSi os habéis fijado en nuestros middlewares que nos ha creado express, en los parámetros que recibe la función handler, tenemos esto
function(req, res, next) {\nHemos visto que es req y res pero ¿que es next?, básicamente next es un método para indicar que continue hasta el siguiente middleware si no queremos terminar la ejecución. Supongamos por ejemplo que queremos comprobar el token de acceso de un usuario o sin ir más lejos si un usuario existe antes de tener acceso a ningún otro middleware. En este caso podríamos crear un middleware que en todas las peticiones compruebe cualquiera de los dos casos y a continuación una vez comprobado simplemente le diríamos que continuará al siguiente middleware para darle acceso a lo que realmente ha solicitado, es decir, acceso al middleware que nos ha mandado como request.
\nAhora vamos a ver un ejemplo muy sencillito para que se entienda mejor, pero antes comentar que si un middleware no responde de ninguna forma y no indica explicitamente que vaya al siguiente middleware no saldrá del handler en cuestión y nos dará timeout la petición. Vamos con el ejemplo, primero comprobemos que nos da timeout, para elloen nuestro app.js antes de indicar los middlewares ponemos los siguiente
app.use('/', function(req,res,next){\n console.log('MIddleware sin respuesta');\n});\n//Encima de este\napp.use('/', index);\nY comprobamos lo que pasa al acceder
\n
\nEl log muestra nuestro nuevo middleware pero la ventana se queda a la espera de recibir algo
\n
\nAhora pongamos el next a ver que pasa
app.use('/', function(req,res,next){\n console.log('MIddleware sin respuesta');\n next();\n});\nComo véis en la consola ha pasado por el middleware(2 veces) y ha continuado hasta el siguiente middleware que coincide que es el index
\n
\nY como no hemos pasado en la queryString(que es como lo dejamos antes) solo nos aparece el welcome
\n
\nPero por lo menos vemos que ha continuado sin problemas.
\nImportante no podemos responder a un middleware y pasar al siguiente, lo que sea que queramos hacer tiene que ser al revés, es decir, no podemos responder 2 veces a la misma petición ya que el cliente no espera más de una respuesta, si en algún momento recibís en consola un log que ponga algo similar a header ya envíado o similar es porque estáis intentando responder dos veces.
\nLos middlewares podemos separarlos en varios tipos (como concepto de uso):
app.use('/', index);\nvar router = express.Router();\n\n/* GET home page. */\nrouter.get('/', function(req, res, next) {}\n// error handler\napp.use(function(err, req, res, next) {\n // set locals, only providing error in development\n res.locals.message = err.message;\n res.locals.error = req.app.get('env') === 'development' ? err : {};\n\n // render the error page\n res.status(err.status || 500);\n res.render('error');\n});\nNormalmente son llamados por nosotros pasándoselo al next, si os fijáis en el app.js, justo encima del middleware de error tenemos uno que captura todas las peticiones que no han coincidido y le pasa un mensaje de tipo 404 al middleware de error con next(err)(básicamente en cuanto a next le pasemos algo irá al handler de error)
\n// catch 404 and forward to error handler\napp.use(function(req, res, next) {\n var err = new Error('Not Found');\n err.status = 404;\n next(err);\n});\nCreo que más o menos he comentado casi todo lo importante referente a los middlewares (ha sido un post más largo de lo habitual jejejejje), espero que a partir de ahora podáis hacer los vuestros sin problemas, en el siguiente post veremos un poco los templates y alguna cosa más. Sin mucho más nos veeemossss un abrazoooorrr
\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vamos a profundizar un poco en esto de las rutas, que es una de las partes centrales de express(y yo diría de Node casi)."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nLas rutas es lo que hemos llamado anteriormente métodos (el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"get"}]},{"type":"text","value":" que configuramos para probar), y como ya comentamos y vimos en la documentación oficial de express, tenemos lo siguiente"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"app.method(urlPath,handler)\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Siendo:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"app:"}]},{"type":"text","value":" Ya vimos que es una instancia de express.Esta parte puede ser tambien "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"router"}]},{"type":"text","value":", ya veremos porque."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"method:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"GET:"}]},{"type":"text","value":" Se usa para pedir datos, y siempre que se le llame tiene que devolver lo mismo(siempre que la petición se haga de la misma forma)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"POST:"}]},{"type":"text","value":" Para crear algo, un objeto de nuestra app"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"PUT:"}]},{"type":"text","value":" Se usa para actualizar datos u objetos existentes."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"DELETE:"}]},{"type":"text","value":" Elimina datos u objetos existentes y al igual que el get siempre tiene que darnos el mismo resultado."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ALL:"}]},{"type":"text","value":" Con all, express aceptaría cualquiera de los anteriores, siempre y cuando el path coincida. Un posible uso sería para verificar credenciales si por ejemplo un token de sesión ha caducado y el usuario puede estar haciendo cualquier cosa, es decir, usando cualquiera de los otros métodos."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"urlPath:"}]},{"type":"text","value":" Será el path que si coincide con la petición que ha recibido Node ejecutará su "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"handler"}]},{"type":"text","value":" asociado"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"handler:"}]},{"type":"text","value":" Es el callback o función que se ejecuta si coincide el path."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Un detalle "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"importante"}]},{"type":"text","value":" es que se comprueban las coincidencias de rutas en el orden que están escritas por lo que puede ser una buena opción si por ejemplo queremos comprobar si un usuario tiene permiso para acceder a cierta ruta o path."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Otro tipo de ruta o middleware es la de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ficheros estáticos"}]},{"type":"text","value":" como pueden ser imágenes,css o ficheros javascript, ya comenté un poco en el post anterior como era ya que por defecto la carpeta "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" estaba configurada como tal, veamoslo un poco en detalle"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"app.use(express.static(path.join(__dirname, 'public')));\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Con esto lo que le estamos indicando a express y a node con este middleware es que todo lo que este en la carpeta "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" será servido como estático, ojo teniendo que usar la estructura de carpetas existentes, me refiero a que si debajo de public tenemos una carpeta "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"images"}]},{"type":"text","value":" el path deberia ser "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"urlRaiz/images/imagen.jpg"}]},{"type":"text","value":". Vamos a comprobarlo con el fichero "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"css"}]},{"type":"text","value":" que nos crea por defecto "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"express generator"}]},{"type":"text","value":", que en este caso esta dentro de la carpeta "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"stylesheets"}]},{"type":"text","value":" y tiene el nombre "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"style.css"}]},{"type":"text","value":", entonces como hemos comentado la ruta sería (con nuestro proyecto iniciado claro está)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"http://localhost:3000/stylesheets/style.css\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lo que nos devolvería el fichero css en el navegador"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-19-at-08.51.39.png","alt":"Css static example"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"También podemos indicarle a express que nos sirva los estáticos a través de un path o ruta virtual que nosotros le indiquemos, en lugar desde la ruta raiz. Si ponemos esta línea en el fichero "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"app.js"}]},{"type":"text","value":" de nuestro proyecto (cambiandola por la que nos servía estáticos antes)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"app.use('/ninja_static',express.static(path.join(__dirname, 'public')));\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"entonces nuestra url cambiaría a"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"http://localhost:3000/ninja_static/stylesheets/style.css\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto es muy útil si por ejemplo tenemos una estructura de carpetas de estáticos muy larga y queremos realemente acortar las url, podríamos por ejemplo cambiarlo por"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"app.use('/ninjacss',express.static(path.join(__dirname, 'public/stylesheets')));\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lo que nos convierte la url a"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"http://localhost:3000/ninjacss/style.css\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como véis podemos gestionar nuestras rutas como queramos para que sea más cómodo trabajar con ellas."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"rutasmiddlewaresconparmetros"},"children":[{"type":"text","value":"Rutas/Middlewares con parámetros"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Hasta ahora habíamos visto siempre como trabajar con rutas digamos "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"estáticas"}]},{"type":"text","value":" pero claro ninguna API es nunca tan simple, generalmente en la URL pasamos información para recibir un elemento específico, imaginemos por ejemplo que estamos creando una API que nos devuelva información sobre todos los superhéroes/villanos de los comics del mundo, ¿cuántos podrían ser? Miles como mínimo, lo que supondría tener que hacer una API con miles de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"middlewares"}]},{"type":"text","value":" ¿no?...por suerte no es necesario ya que sería algo inviable, ningún servicio aguantaría eso, lo que hacemos es que nuestro "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"middleware"}]},{"type":"text","value":" reciba parámetros por ejemplo en la url, con este estilo"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"http://heroapi.com/hero/57\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"o este por ejemplo"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"http://heroapi.com/hero?name=batman\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Tenemos varias formas de hacerlo, para finalmente buscar la información usando ese parámetro, todo en el mismo "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"middleware"}]},{"type":"text","value":"."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nEn general tenemos cuatro formas de hacerlo:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"En la propia ruta: /hero/57"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Usando "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"query string"}]},{"type":"text","value":": /hero?name=batman, se conoce "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"query string"}]},{"type":"text","value":" a lo que está destrás de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"?"}]},{"type":"text","value":" y son elementos de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"variable=valor"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Puede ir en el cuerpo(body) de la petición, esto generalmente se usa para peticiones de tipo POST o PUT, ya que al almacenar/actualizar solemos enviar muchos datos y pasarlo por "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"query string"}]},{"type":"text","value":" puede ser casi imposible."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Otra opción puede ser la cabecera, aunque esta opción exista simplemente porque podemos acceder a la cabecera desde el middleware, pero no se usa para datos triviales (como buscar un héroe), si no para datos como token de autenticación, formatos y cosas así."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"enlaruta"},"children":[{"type":"text","value":"En la ruta"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Empecemos con un ejemplo con usando la ruta, nos vamos a nuestro proyecto de ejemplo "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ninja_project"}]},{"type":"text","value":" y vamos a modificar la ruta del "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index.js"}]},{"type":"text","value":" poniéndole un parámetro para cambiar el título. Quedaría así:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var express = require('express');\nvar router = express.Router();\n\n/* GET home page. */\nrouter.get('/:title', function(req, res, next) {\n var newTitle = req.params.title\n res.render('index', { title: newTitle });\n});\n\nmodule.exports = router;\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como véis a la ruta le hemos puesto "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":":title"}]},{"type":"text","value":" y luego simplemente hemos sacado esa información de los parámetros (params) de la petición (request)."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nSi ejecutamos con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"npm start"}]},{"type":"text","value":" y probamos por ejemplo con"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"http://localhost:3000/Ninja\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Tendríamos este resultado"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-20-at-09.21.56.png","alt":"Middleware route params example"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nUsando las rutas como paso de parámetros tenemos varias opciones, para por ejemplo si queremos que el parámetro sea opcional(si probáis sin poner /Ninja os daria un error el ejemplo anterior) ponemos la ruta de esta manera"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"router.get('/:title?', function(req, res, next) {\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"También es posible usar expresiones regulares para que por ejemplo solo admita números"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"router.get('/:id([0-9]+)', function(req, res, next) {\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y es posible poner varios"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"router.get('/:type(villain|hero)/data/:name)', function(req, res, next) {\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esta aceptaría en type solo "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"villain o hero"}]},{"type":"text","value":" y en name cualquier cosa."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nLas rutas son bastante dinámicas para poder gestionar "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"middlewares"}]},{"type":"text","value":" de manera más cómoda y segura para nosotros(evitando datos de algún tipo que no queremos recibir)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"usandoquerystring"},"children":[{"type":"text","value":"Usando query string"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ahora veamos un ejemplo con la segunda forma, que veréis que es muy parecido."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var express = require('express');\nvar router = express.Router();\n\n/* GET home page. */\nrouter.get('/', function(req, res, next) {\n console.log(req.query);\n var newTitle = req.query.title;\n res.render('index', { title: newTitle });\n});\n\nmodule.exports = router;\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Hemos vuelto a dejar la ruta o path como estaba y en lugar de obtener el dato de title de los parámetros de la url, lo hacemos con la query y ¿como usamos esto? He puesto también un console.log para que veáis como recibimos los elementos de tipo query string. Simplemente poner"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"http://localhost:3000/?title=Ninja\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Al probar obtendríamos el mismo resultado, y si miráis el log de la consola veréis como recibe los parámetros de la query, como un objeto clave= valor"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-20-at-09.30.05.png","alt":"Middleware query string example"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-20-at-09.29.57.png","alt":"Log query string example"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"mtodosderespuesta"},"children":[{"type":"text","value":"Métodos de respuesta"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Hasta ahora hemos estado centrados todo el rato en ala captura de la petición, es decir, en la parte "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"request"}]},{"type":"text","value":" pero ¿que pasa con la respuesta? Vamos a ver algunos de los métodos de respuesta más usados, pero lo mejor es que miréis la "},{"type":"element","tagName":"a","properties":{"href":"http://expressjs.com/es/4x/api.html#res"},"children":[{"type":"text","value":"documentación"}]},{"type":"text","value":" que vienen todos y muy bien explicados:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"res.send"}]},{"type":"text","value":": Lo hemos usado ya en algún ejemplo, responde como puede a lo que le pongas jejeje, funciona bien con buffer, strings, objetos, arrays(estos dos últimos los devolveria como un JSON)..."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"res.send('Hola Ninjas')\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"res.render"}]},{"type":"text","value":": También lo hemos usado, nos devuelve una página renderizada usando algún template y si acaso usando los parámetros que le pasemos"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"res.render('index',{title: 'Super Título Ninja'});\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"res.json"}]},{"type":"text","value":": Respuesta específica como JSON"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"res.json({ name: 'Batman'});\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"res.download"}]},{"type":"text","value":": Devuelve directamente un fichero, este sería el caso típico en el que nos aparece la ventana de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"guardar"}]},{"type":"text","value":" en el navegador"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"res.download('/rutaYNombreFichero.doc','nombreOpcionalDelFichero');\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"res.redirect"}]},{"type":"text","value":": Redireccionando al usuario a otro sitio con un código de estado 302 por defecto(esto se puede cambiar, más abajo lo veremos). En este caso tenemos varias opciones para la redirección.\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Ruta relativa al root del usuario:"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"res.redirect('/root/path/algo');\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Url absoluta:"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"res.redirect('http://urlnueva');\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Pasandole también el código de estado:"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"res.redirect(301,'http://urlnueva');\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Ruta según el path actual:"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"res.redirect('../ruta/algo')\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"También podemos hacer que vuelva a la página anterior:"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"res.redirect('back')\n"}]}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si miráis la documentación hay muchos más y todos estos pueden admitir más parámetros, con más opciones de configuración. Comentar que casi todas las opciones de respuesta soportan cambiar el código de estado, solo tenemos que encadenar métodos"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"res.status(500).send('Error');\nres.status(200).render('index');\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Muy cómodo si queremos devolver algún código específico que no sea el de por defecto de cada respuesta."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPoco a poco veremos como van saliendo distintos tipos de respuesta en los ejemplos que vayamos haciendo."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"creandonuestrapropiaruta"},"children":[{"type":"text","value":"Creando nuestra propia ruta"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Hasta ahora hemos estado trabajando con lo que ya nos había configurado "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"express"}]},{"type":"text","value":", pero ¿y si queremos crear nuestra propia ruta?¿Cuáles serían los pasos? Bien, pues vamos a verlos."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nLo primero de todo es crearnos un fichero nuevo en la carpeta "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"routes"}]},{"type":"text","value":"(para mantener el orden), por ejemplo lo voy a llamar "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ninjas.js"}]},{"type":"text","value":" y de momento le ponemos esto"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"'use strict'\n\nvar express = require('express');\nvar router = express.Router();\n\n/* GET home page. */\nrouter.get('/heros', function(req, res, next) {\n res.json({ninjas: \"Somos un montón de ninjas\"})\n});\n\nmodule.exports = router;\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si os fijáis lo que hacemos es instanciar un "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Router"}]},{"type":"text","value":", que es una de las formas de crear rutas para pasarselas a express. A este "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"router"}]},{"type":"text","value":" le hemos indicado el método a usar, su path y su respuesta y por último lo hemos exportado como si de un módulo se tratara para así poder usarlo en cualquier parte de nuestra aplicación."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nLo siguientes es irnos al "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"app.js"}]},{"type":"text","value":" que, como ya comentamos en su momento, entre otras cosas tiene la instanciación de las rutas, y preparamos la nuestra, para ello lo primero es "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"requerirla"}]},{"type":"text","value":", y lo hacemos debajo de las otras"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var index = require('./routes/index');\nvar users = require('./routes/users');\nvar ninjas = require('./routes/ninjas');\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ya la tenemos disponible en nuestro "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"app.js"}]},{"type":"text","value":" pero realmente todavia no le hemos indicado donde tiene que escuchar y que tiene que hacer, para hacerlo buscamos donde ha creado las otras y hacemos lo propio"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"app.use('/', index);\napp.use('/users', users);\napp.use('/ninjas',ninjas);\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y listo con esto ya tendríamos nuestra propia ruta, como véis es bastante sencillo. Ahora vamos a probarla peeeeero ojo al dato, tenemos que tener en cuenta:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"La ruta o path que hemos puesto en el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"app.use"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"La ruta o path que hemos puesto en "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ninjas.js"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto lo remarco porque realmente esto lo que esta haciendo es escuchar lo primero en el path "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"/ninjas"}]},{"type":"text","value":" y según ese path lo que hace es indicarle al "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ninjas.js"}]},{"type":"text","value":" que es su turno (en plan enga majete a currar), pero claro este "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"router"}]},{"type":"text","value":" tiene configurado también su propio path, es decir que a partir del path por el que ha sido convocado en el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"app.use"}]},{"type":"text","value":" tiene que cumplir el segundo que en este caso seria "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"heros"}]},{"type":"text","value":", por lo que la ruta quedariía así"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"http://localhost:3000/ninjas/heros\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y esto nos devolvería un json"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-21-at-09.28.26.png","alt":"Own router example"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nUna vez que entiendes como funciona, ves que realmente es bastante sencillo configurar y trabajar con las rutas de express."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Durante todo el post, ha estado apareciendo la palabra "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"middleware"}]},{"type":"text","value":" pero , ¿que es exáctamente un middleware? Un "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"middleware"}]},{"type":"text","value":" es un handler o manejador que responde a un tipo de petición o a todas. Básicamente es lo que hemos estado haciendo todo el rato. Veamos algunos detalles de su implementación."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nSi os habéis fijado en nuestros middlewares que nos ha creado express, en los parámetros que recibe la función handler, tenemos esto"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"function(req, res, next) {\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Hemos visto que es "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"req y res"}]},{"type":"text","value":" pero ¿que es next?, básicamente "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"next"}]},{"type":"text","value":" es un método para indicar que continue hasta el siguiente middleware si no queremos terminar la ejecución. Supongamos por ejemplo que queremos comprobar el token de acceso de un usuario o sin ir más lejos si un usuario existe antes de tener acceso a ningún otro middleware. En este caso podríamos crear un middleware que en todas las peticiones compruebe cualquiera de los dos casos y a continuación una vez comprobado simplemente le diríamos que continuará al siguiente middleware para darle acceso a lo que realmente ha solicitado, es decir, acceso al middleware que nos ha mandado como "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"request"}]},{"type":"text","value":"."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nAhora vamos a ver un ejemplo muy sencillito para que se entienda mejor, pero antes comentar que si un middleware "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"no responde de ninguna forma y no indica explicitamente que vaya al siguiente middleware no saldrá del handler en cuestión y nos dará timeout la petición"}]},{"type":"text","value":". Vamos con el ejemplo, primero comprobemos que nos da timeout, para elloen nuestro "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"app.js"}]},{"type":"text","value":" antes de indicar los middlewares ponemos los siguiente"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"app.use('/', function(req,res,next){\n console.log('MIddleware sin respuesta');\n});\n//Encima de este\napp.use('/', index);\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y comprobamos lo que pasa al acceder"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-22-at-09.11.37.png","alt":"Middleware timeout"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nEl log muestra nuestro nuevo middleware pero la ventana se queda a la espera de recibir algo"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-22-at-09.12.01.png","alt":"Timeout example"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nAhora pongamos el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"next"}]},{"type":"text","value":" a ver que pasa"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"app.use('/', function(req,res,next){\n console.log('MIddleware sin respuesta');\n next();\n});\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como véis en la consola ha pasado por el middleware(2 veces) y ha continuado hasta el siguiente middleware que coincide que es el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-22-at-09.14.56.png","alt":"Screen-Shot-2017-09-22-at-09.14.56"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nY como no hemos pasado en la queryString(que es como lo dejamos antes) solo nos aparece el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"welcome"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-22-at-09.17.10.png","alt":"Screen-Shot-2017-09-22-at-09.17.10"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPero por lo menos vemos que ha continuado sin problemas."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nImportante "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"no podemos responder a un middleware y pasar al siguiente, lo que sea que queramos hacer tiene que ser al revés"}]},{"type":"text","value":", es decir, no podemos responder 2 veces a la misma petición ya que el cliente no espera más de una respuesta, si en algún momento recibís en consola un log que ponga algo similar a "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"header ya envíado"}]},{"type":"text","value":" o similar es porque estáis intentando responder dos veces."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nLos middlewares podemos separarlos en varios tipos (como concepto de uso):"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Tenemos los middlewares a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"nivel de aplicación"}]},{"type":"text","value":", es decir, los que ejecutamos en toda actividad de la app, y son los que normalmente deberían estar en el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"app.js"}]},{"type":"text","value":". Acabamos de usar uno"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"app.use('/', index);\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Middleware a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"nivel de router"}]},{"type":"text","value":": los que ponemos en la carpeta "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"routes"}]},{"type":"text","value":" y responden a un tipo de petición o path específicos"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var router = express.Router();\n\n/* GET home page. */\nrouter.get('/', function(req, res, next) {}\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Middleware "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"de error"}]},{"type":"text","value":": Estos los ponemos los últimos y como su nombre indica responderan cuando tengamos un error. Si miramos nuestro "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"app.js"}]},{"type":"text","value":" vemos que tenemos uno al final. Se diferencian en que reciben un parámetro más "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"err"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"// error handler\napp.use(function(err, req, res, next) {\n // set locals, only providing error in development\n res.locals.message = err.message;\n res.locals.error = req.app.get('env') === 'development' ? err : {};\n\n // render the error page\n res.status(err.status || 500);\n res.render('error');\n});\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Normalmente son llamados por nosotros pasándoselo al next, si os fijáis en el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"app.js"}]},{"type":"text","value":", justo encima del middleware de error tenemos uno que captura todas las peticiones que no han coincidido y le pasa un mensaje de tipo 404 al middleware de error con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"next(err)"}]},{"type":"text","value":"(básicamente en cuanto a next le pasemos algo irá al handler de error)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"// catch 404 and forward to error handler\napp.use(function(req, res, next) {\n var err = new Error('Not Found');\n err.status = 404;\n next(err);\n});\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Tenemos más "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"middlewares oficiales"}]},{"type":"text","value":", que básicamente son los mantenidos en el módulo "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"connect"}]},{"type":"text","value":" que usa express. Podéis encontrar informacíon "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/senchalabs/connect"},"children":[{"type":"text","value":"aquí"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Por último tenemos otros que llamaríamos "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"middlewares de terceros"}]},{"type":"text","value":", que son los creados y mantenidos por la comunidad, muchos de ellos aparecen en "},{"type":"element","tagName":"a","properties":{"href":"http://expressjs.com/en/resources/middleware.html"},"children":[{"type":"text","value":"esta página de express"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Creo que más o menos he comentado casi todo lo importante referente a los middlewares (ha sido un post más largo de lo habitual jejejejje), espero que a partir de ahora podáis hacer los vuestros sin problemas, en el siguiente post veremos un poco los templates y alguna cosa más. Sin mucho más nos veeemossss un abrazoooorrr"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"rutasmiddlewaresconparmetros","heading":"Rutas/Middlewares con parámetros","items":[{"id":"enlaruta","heading":"En la ruta"},{"id":"usandoquerystring","heading":"Usando query string"},{"id":"mtodosderespuesta","heading":"Métodos de respuesta"}]},{"id":"creandonuestrapropiaruta","heading":"Creando nuestra propia ruta"}]},"featureImageSharp":{"base":"nodebaner-5.jpg","publicURL":"/static/ebae59fce798d71ce68bf2a304f1491f/nodebaner-5.jpg","imageMeta":{"width":1680,"height":420},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAME/9oADAMBAAIQAxAAAAGrMokzQT//xAAXEAEBAQEAAAAAAAAAAAAAAAACASIh/9oACAEBAAEFAgMKdU1//8QAFhEBAQEAAAAAAAAAAAAAAAAAAAEx/9oACAEDAQE/AamP/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAEx/9oACAECAQE/AV1//8QAFRABAQAAAAAAAAAAAAAAAAAAEHH/2gAIAQEABj8Cr//EABgQAQADAQAAAAAAAAAAAAAAAAEAETEh/9oACAEBAAE/Ido1iddq0QhE/9oADAMBAAIAAwAAABDz/wD/xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QbrNxf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxAgav/EABgQAQADAQAAAAAAAAAAAAAAAAEAETFx/9oACAEBAAE/ECLXUGFQ03NnlQ0Zc//Z","aspectRatio":4,"src":"/static/ebae59fce798d71ce68bf2a304f1491f/d5c54/nodebaner-5.jpg","srcSet":"/static/ebae59fce798d71ce68bf2a304f1491f/65d8c/nodebaner-5.jpg 260w,\n/static/ebae59fce798d71ce68bf2a304f1491f/c5f21/nodebaner-5.jpg 520w,\n/static/ebae59fce798d71ce68bf2a304f1491f/d5c54/nodebaner-5.jpg 1040w,\n/static/ebae59fce798d71ce68bf2a304f1491f/81a53/nodebaner-5.jpg 1560w,\n/static/ebae59fce798d71ce68bf2a304f1491f/34c3a/nodebaner-5.jpg 1680w","srcWebp":"/static/ebae59fce798d71ce68bf2a304f1491f/e4875/nodebaner-5.webp","srcSetWebp":"/static/ebae59fce798d71ce68bf2a304f1491f/dc8f3/nodebaner-5.webp 260w,\n/static/ebae59fce798d71ce68bf2a304f1491f/2db4b/nodebaner-5.webp 520w,\n/static/ebae59fce798d71ce68bf2a304f1491f/e4875/nodebaner-5.webp 1040w,\n/static/ebae59fce798d71ce68bf2a304f1491f/f5845/nodebaner-5.webp 1560w,\n/static/ebae59fce798d71ce68bf2a304f1491f/41aa5/nodebaner-5.webp 1680w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"prev":{"id":"Ghost__Post__5a338158333e0f134c248f36","title":"Don't stop the party: Node JS(X) Templates o Vistas","slug":"dont-stop-the-party-node-js-x-templates-o-vistas","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/nodebaner-4-1.jpg","excerpt":"Ahora le toca el turno a las vistas o templates, aunque realmente este tema es\nmuy amplio porque express admite multitud de engines de templates distintos. En\nla documentación oficial\n[https://github.com/expressjs/express/wiki#template-engines] tenéis todos los\nque soporta y como se usan, veremos ejemplos con ejs porque es muy típico pero\nrealmente podéis usar el que queráis.\nComentaros que a mi personalmente no me gusta mucho renderizar cosas en servidor\npara servirlas al cliente ya que aumenta","custom_excerpt":null,"visibility":"public","created_at_pretty":"22 Sep 2017","published_at_pretty":"5 Oct 2017","updated_at_pretty":"22 Jan 2018","created_at":"2017-09-22T20:35:52.000+02:00","published_at":"2017-10-05T10:00:00.000+02:00","updated_at":"2018-01-22T09:39:22.000+01:00","meta_title":"Don't stop the party: Node JS(X) Templates o Vistas","meta_description":"Hablaremos de las vistas o templates con Express y de como lo podemos usar para hacer front basado en renderizado en servidor. Sería la E del stack MEAN","og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"Perfil.jpg","publicURL":"/static/b0de6281fb28a266510b3b09b9243e5a/Perfil.jpg","imageMeta":{"width":307,"height":307},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAUDBAb/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGzw6zC6zHn+cLYP//EAB0QAAICAQUAAAAAAAAAAAAAAAEDAAIEEyEiIzL/2gAIAQEAAQUCifca8KgcKWVfUpkHsG5pxX//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAdEAACAgEFAAAAAAAAAAAAAAAAARARcQISIUFR/9oACAEBAAY/AhU88xkb7N06a8P/xAAcEAEAAwEAAwEAAAAAAAAAAAABABEhMUFRYXH/2gAIAQEAAT8hR2pq40aqb+xIAeXibhW9JXr8joF4TBcSNe0//9oADAMBAAIAAwAAABDzDwD/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAcEAEAAgIDAQAAAAAAAAAAAAABABEhUTFhcfD/2gAIAQEAAT8QyItrELaTlatLwU63MvEW6vUNdy4LZQDn7iVApV9VLtANdWwKkuYq4Er1VZ//2Q==","aspectRatio":1,"src":"/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg","srcSet":"/static/b0de6281fb28a266510b3b09b9243e5a/f340b/Perfil.jpg 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/22d64/Perfil.jpg 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/aa249/Perfil.jpg 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/0dc33/Perfil.jpg 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/60667/Perfil.jpg 307w","srcWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp","srcSetWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/59cda/Perfil.webp 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/7da75/Perfil.webp 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f282e/Perfil.webp 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/a7b21/Perfil.webp 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f59af/Perfil.webp 307w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"nodejs","url":"https://jlgarcia.fulldev.ninja/tag/nodejs/","name":"nodejs","visibility":"public","feature_image":null,"description":null,"meta_title":"NodeJS Ninjas","meta_description":"Aprenderemos desde lo básico este framework de JS para backend, muy bueno en concurrencia y en API Rest y que forma parte del stack MEAN o MERN.","featureImageSharp":null},"tags":[{"slug":"nodejs","url":"https://jlgarcia.fulldev.ninja/tag/nodejs/","name":"nodejs","visibility":"public","feature_image":null,"description":null,"meta_title":"NodeJS Ninjas","meta_description":"Aprenderemos desde lo básico este framework de JS para backend, muy bueno en concurrencia y en API Rest y que forma parte del stack MEAN o MERN.","featureImageSharp":null}],"plaintext":"Ahora le toca el turno a las vistas o templates, aunque realmente este tema es\nmuy amplio porque express admite multitud de engines de templates distintos. En\nla documentación oficial\n[https://github.com/expressjs/express/wiki#template-engines] tenéis todos los\nque soporta y como se usan, veremos ejemplos con ejs porque es muy típico pero\nrealmente podéis usar el que queráis.\nComentaros que a mi personalmente no me gusta mucho renderizar cosas en servidor\npara servirlas al cliente ya que aumentas la carga de trabajo del servidor,\nprefiero usar Node+Express como API Rest y para las vistas usar directamente \nAngularJS, ReactJS o similar pero al final depende un poco del proyecto o\naplicación que estemos realizando, si es una página simple, casi como las que\nhemos visto de ejemplo, usamos los templates y ale a correr.\nBueno después de quejarme un poco vamos a continuar....como he comentado\ntrabajaremos un poco con ejs y para ello lo primero que tenemos que hacer es\ninstalar el engine.\n\nnpm install ejs --save\n\n\nRecordad usamos --save para que al instalar el módulo lo indique también en el \npackage.json y poder llevar control de versiones (y ya de paso si movemos la app\nque lo instale directamente)\nAntes de continuar, os cuento, nosotros vamos a modificar nuestro proyecto de\nexpress actual para cambiar el engine pero si de primeras ya sabéis que váis a\nusar un engine en concreto, si recordáis se lo podíamos indicar a \nexpress_generator para que configure él directamente, si probáis el comando:\n\nexpress -h\n\n\nveréis las opciones que tenemos\n\nAún así no penséis que cambiar de uno a otro es muy difícil solo tenemos que\nsaber que caracteriza a cada uno, o más bien como se compone cada uno. En el\ncaso de ejs es que realmente tu realizas la composición sobre código HTML,\nsupongo que es una de las claves de su aceptación, básicamente es lo mismo que\nya se estaba haciendo desde hace años pero con vitaminas.\n\nEl primer cambio que haremos una vez instalado es cambiar el engine en el app.js\n, para ello vamos a cambiar la línea\n\napp.set('view engine', 'jade');\n\n\npor esta otra (solo cambiando jade....superdifícil)\n\napp.set('view engine', 'ejs');\n\n\nYa tenemos el primer paso, lo siguiente que haremos será cambiar la vista index \npor ejemplo(solo cambiaremos una para que veáis de que va). Priemo eliminamos el \nindex.jade de la carpeta views y creamos otro que sea index.ejs. Una vez creado\nvamos a empezar por un código simple de HTML(mu feo lo sé es para probar solo)\n\n\n\n \nBienvenidos a vuestro template ejs <%= title %>
\n \n\n\n\nSi os fijáis la variable esta puesta directamente entre <%= %>, fácil ¿verdad?.\nAhora vamos a probarlo, recordar que teníamos configurado el middleware para que\nusara los datos recibidos de la query string, por lo que la URL debería ser algo\nsimilar a\n\nhttp://localhost:3000/?title=Ninjas\n\n\nY nos debería mostrar algo similar a\n\nVoilá supersencillo. Ahora veamos alguna cosa más que podemos hacer con ejs.\nEn el ejemplo hemos usado <%= %> para trabajar con variables, pero claro si\nqueremos poner código HTML como variable, ¿funcionaría? Veamos que pasa.\nCambiamos la variable title que le mandamos a la vista, en nuestro index.js \ncambias res.render por\n\nres.render('index', { title: 'Bienvenidos a vuestro template ejs <%- title %>
\n \n\n\n\nAhora ya tendríamos algo similar a esto\n\nAcabamos de ver como podemos pasarle estructuras de HTML directamente a la\nvista, pero todavía podemos hacer más cosas interesantes. Una de las ventajas de \nejs es que podemos usar código javaScript directamente en la vista, vamos a ver\nalgunos ejemplos\nEmpecemos por ver como podríamos hacer un condicional, cambiémos nuestro \nindex.ejs por esto\n\n\n\n \nBienvenidos a vuestro template ejs <%- title %>
\n<% if (title === 'Ninjas'){ %>\nSomos Ninjas
\n<%}else{%>\nTe has equivocadooooo
\n<%}%>\n \n\n\n\nY que no se nos olvide cambiar en nuestro index.js la línea de render por\n\nres.render('index', { title: newTitle});\n\n\nSolo es quitarle los tags HTML.\nAhora vamos a probarlo, pongamos por ejemplo esto en la url\nhttp://localhost:3000/?title=Superman\n\nVemos como al no cumplir la condición sale la segunda opción, ahora probemos con\nnuestro title=Ninjas\n\nPor último vamos a probar a trabajar con un array de elementos. Creemos lo\nprimero nuestro objeto array en index.js, cambiando el ya conocido res.render \npor\n\nres.render('index', { \n title: newTitle,\n superHeros: [{name: 'Dr. Manhattan'},{name: 'Superman'},{name: 'El Comendiante'}]\n });\n\n\nYa tenemos nuestro array de elementos, ahora hagamos que la vista trabaje con\nellos, en index.ejs añadimos lo siguiente\n\n\n\n \nBienvenidos a vuestro template ejs <%- title %>
\n<% if (title === 'Ninjas'){ %>\nSomos Ninjas
\n \n <% superHeros.forEach(function(hero){ %>\n \n<%= hero.name %>
\n \n <%})%>\n \n<%}else{%>\nTe has equivocadooooo
\n<%}%>\n \n\n\n\nSi os fijáis hemos recorrido directamente el objeto superHeros y hemos mostrado\nla propiedad name de cada uno. Veamos lo que pasa cuando usamos title=Ninjas\n\nVoilá, como véis es relativamente sencillo utilizar templates ejs, esto ha sido\nsolo una pequeña muestra de como podemos ir trabajando con ellos pero las\nposibilidades son infinitas (y también recordar que tenemos multitud de engines\ndistintos).\n\nHasta aquí lo que quería comentar sobre los templates, en los siguientes post\nveremos como gestionar autenticación en nuestra API, uso de Promesas....y varias\ncosas más, nos veeemossss\n\nUn abrazooorrr","html":"Ahora le toca el turno a las vistas o templates, aunque realmente este tema es muy amplio porque express admite multitud de engines de templates distintos. En la documentación oficial tenéis todos los que soporta y como se usan, veremos ejemplos con ejs porque es muy típico pero realmente podéis usar el que queráis.
\nComentaros que a mi personalmente no me gusta mucho renderizar cosas en servidor para servirlas al cliente ya que aumentas la carga de trabajo del servidor, prefiero usar Node+Express como API Rest y para las vistas usar directamente AngularJS, ReactJS o similar pero al final depende un poco del proyecto o aplicación que estemos realizando, si es una página simple, casi como las que hemos visto de ejemplo, usamos los templates y ale a correr.
\nBueno después de quejarme un poco vamos a continuar....como he comentado trabajaremos un poco con ejs y para ello lo primero que tenemos que hacer es instalar el engine.
npm install ejs --save\nRecordad usamos --save para que al instalar el módulo lo indique también en el package.json y poder llevar control de versiones (y ya de paso si movemos la app que lo instale directamente)
\nAntes de continuar, os cuento, nosotros vamos a modificar nuestro proyecto de express actual para cambiar el engine pero si de primeras ya sabéis que váis a usar un engine en concreto, si recordáis se lo podíamos indicar a express_generator para que configure él directamente, si probáis el comando:
express -h\nveréis las opciones que tenemos
\n![\"Express](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-22-at-21.03.31.png\")
\nAún así no penséis que cambiar de uno a otro es muy difícil solo tenemos que saber que caracteriza a cada uno, o más bien como se compone cada uno. En el caso de ejs es que realmente tu realizas la composición sobre código HTML, supongo que es una de las claves de su aceptación, básicamente es lo mismo que ya se estaba haciendo desde hace años pero con vitaminas.
El primer cambio que haremos una vez instalado es cambiar el engine en el app.js, para ello vamos a cambiar la línea
\napp.set('view engine', 'jade');\npor esta otra (solo cambiando jade....superdifícil)
\napp.set('view engine', 'ejs');\nYa tenemos el primer paso, lo siguiente que haremos será cambiar la vista index por ejemplo(solo cambiaremos una para que veáis de que va). Priemo eliminamos el index.jade de la carpeta views y creamos otro que sea index.ejs. Una vez creado vamos a empezar por un código simple de HTML(mu feo lo sé es para probar solo)
\n<!DOCTYPE html>\n<html>\n <head>\n <h1>NinjaTitle</h1>\n </head>\n</html>\nEsto nos muestra ya lo siguiente
\n![\"Ejs](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-22-at-21.43.35.png\")
\nYa funciona. Ahora vamos a prepararlo para que use la variable title que le pasabamos desde el middleware.
<!DOCTYPE html>\n<html>\n <head>\n <h1>NinjaTitle</h1>\n </head>\n <body>\n <p>Bienvenidos a vuestro template ejs <%= title %></p>\n </body>\n</html>\nSi os fijáis la variable esta puesta directamente entre <%= %>, fácil ¿verdad?. Ahora vamos a probarlo, recordar que teníamos configurado el middleware para que usara los datos recibidos de la query string, por lo que la URL debería ser algo similar a
\nhttp://localhost:3000/?title=Ninjas\nY nos debería mostrar algo similar a
\n![\"Ejs](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-22-at-21.50.14.png\")
\nVoilá supersencillo. Ahora veamos alguna cosa más que podemos hacer con ejs.
\nEn el ejemplo hemos usado <%= %> para trabajar con variables, pero claro si queremos poner código HTML como variable, ¿funcionaría? Veamos que pasa.
\nCambiamos la variable title que le mandamos a la vista, en nuestro index.js cambias res.render por
res.render('index', { title: '<h2>' + newTitle + '</h2>' });\nY ahora veamos el resultado
\n![\"html_tags\"](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/html_tags.PNG\")
\nUps!!! nos aparace todo literal, eso es porque con <%= %> básicamente conseguimos que nos transforme todo a literal(en este caso un string), pero ejs está preparado para esto, solo tenemos que cambiar los tags en nuestro index.ejs, básicamente cambiamos el igual por un guión y listo
<!DOCTYPE html>\n<html>\n <head>\n <h1>NinjaTitle</h1>\n </head>\n <body>\n <p>Bienvenidos a vuestro template ejs <%- title %></p>\n </body>\n</html>\nAhora ya tendríamos algo similar a esto
\n![\"Html](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-26-at-21.44.21.png\")
\nAcabamos de ver como podemos pasarle estructuras de HTML directamente a la vista, pero todavía podemos hacer más cosas interesantes. Una de las ventajas de ejs es que podemos usar código javaScript directamente en la vista, vamos a ver algunos ejemplos
\nEmpecemos por ver como podríamos hacer un condicional, cambiémos nuestro index.ejs por esto
<!DOCTYPE html>\n<html>\n <head>\n <h1>NinjaTitle</h1>\n </head>\n <body>\n <p>Bienvenidos a vuestro template ejs <%- title %></p>\n<% if (title === 'Ninjas'){ %>\n <p>Somos Ninjas</p>\n<%}else{%>\n <p>Te has equivocadooooo</p> \n<%}%>\n </body>\n</html>\nY que no se nos olvide cambiar en nuestro index.js la línea de render por
\nres.render('index', { title: newTitle});\nSolo es quitarle los tags HTML.
\nAhora vamos a probarlo, pongamos por ejemplo esto en la url
\nhttp://localhost:3000/?title=Superman
\n![\"Wrong](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-27-at-08.12.54.png\")
\nVemos como al no cumplir la condición sale la segunda opción, ahora probemos con nuestro title=Ninjas
\n![\"Ninjas](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-27-at-08.15.15.png\")
\nPor último vamos a probar a trabajar con un array de elementos. Creemos lo primero nuestro objeto array en index.js, cambiando el ya conocido res.render por
res.render('index', { \n title: newTitle,\n superHeros: [{name: 'Dr. Manhattan'},{name: 'Superman'},{name: 'El Comendiante'}]\n });\nYa tenemos nuestro array de elementos, ahora hagamos que la vista trabaje con ellos, en index.ejs añadimos lo siguiente
\n<!DOCTYPE html>\n<html>\n <head>\n <h1>NinjaTitle</h1>\n </head>\n <body>\n <p>Bienvenidos a vuestro template ejs <%- title %></p>\n<% if (title === 'Ninjas'){ %>\n <p>Somos Ninjas</p>\n \n <% superHeros.forEach(function(hero){ %>\n \n <p><%= hero.name %></p>\n \n <%})%>\n \n<%}else{%>\n <p>Te has equivocadooooo</p> \n<%}%>\n </body>\n</html>\nSi os fijáis hemos recorrido directamente el objeto superHeros y hemos mostrado la propiedad name de cada uno. Veamos lo que pasa cuando usamos title=Ninjas
\n![\"Array](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-27-at-08.27.49.png\")
\nVoilá, como véis es relativamente sencillo utilizar templates ejs, esto ha sido solo una pequeña muestra de como podemos ir trabajando con ellos pero las posibilidades son infinitas (y también recordar que tenemos multitud de engines distintos).
Hasta aquí lo que quería comentar sobre los templates, en los siguientes post veremos como gestionar autenticación en nuestra API, uso de Promesas....y varias cosas más, nos veeemossss
\nUn abrazooorrr
\n","url":"https://jlgarcia.fulldev.ninja/dont-stop-the-party-node-js-x-templates-o-vistas/","canonical_url":null,"uuid":"457e53cd-07e8-4675-bdcc-0a47312d390b","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"59c5580858177700014ca363","reading_time":5,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"Ahora le toca el turno a las vistas o templates, aunque realmente este tema es muy amplio porque express admite multitud de engines de templates distintos. En la documentación oficial tenéis todos los que soporta y como se usan, veremos ejemplos con ejs porque es muy típico pero realmente podéis usar el que queráis.
\nComentaros que a mi personalmente no me gusta mucho renderizar cosas en servidor para servirlas al cliente ya que aumentas la carga de trabajo del servidor, prefiero usar Node+Express como API Rest y para las vistas usar directamente AngularJS, ReactJS o similar pero al final depende un poco del proyecto o aplicación que estemos realizando, si es una página simple, casi como las que hemos visto de ejemplo, usamos los templates y ale a correr.
\nBueno después de quejarme un poco vamos a continuar....como he comentado trabajaremos un poco con ejs y para ello lo primero que tenemos que hacer es instalar el engine.
npm install ejs --save\nRecordad usamos --save para que al instalar el módulo lo indique también en el package.json y poder llevar control de versiones (y ya de paso si movemos la app que lo instale directamente)
\nAntes de continuar, os cuento, nosotros vamos a modificar nuestro proyecto de express actual para cambiar el engine pero si de primeras ya sabéis que váis a usar un engine en concreto, si recordáis se lo podíamos indicar a express_generator para que configure él directamente, si probáis el comando:
express -h\nveréis las opciones que tenemos
\n
\nAún así no penséis que cambiar de uno a otro es muy difícil solo tenemos que saber que caracteriza a cada uno, o más bien como se compone cada uno. En el caso de ejs es que realmente tu realizas la composición sobre código HTML, supongo que es una de las claves de su aceptación, básicamente es lo mismo que ya se estaba haciendo desde hace años pero con vitaminas.
El primer cambio que haremos una vez instalado es cambiar el engine en el app.js, para ello vamos a cambiar la línea
\napp.set('view engine', 'jade');\npor esta otra (solo cambiando jade....superdifícil)
\napp.set('view engine', 'ejs');\nYa tenemos el primer paso, lo siguiente que haremos será cambiar la vista index por ejemplo(solo cambiaremos una para que veáis de que va). Priemo eliminamos el index.jade de la carpeta views y creamos otro que sea index.ejs. Una vez creado vamos a empezar por un código simple de HTML(mu feo lo sé es para probar solo)
\n<!DOCTYPE html>\n<html>\n <head>\n <h1>NinjaTitle</h1>\n </head>\n</html>\nEsto nos muestra ya lo siguiente
\n
\nYa funciona. Ahora vamos a prepararlo para que use la variable title que le pasabamos desde el middleware.
<!DOCTYPE html>\n<html>\n <head>\n <h1>NinjaTitle</h1>\n </head>\n <body>\n <p>Bienvenidos a vuestro template ejs <%= title %></p>\n </body>\n</html>\nSi os fijáis la variable esta puesta directamente entre <%= %>, fácil ¿verdad?. Ahora vamos a probarlo, recordar que teníamos configurado el middleware para que usara los datos recibidos de la query string, por lo que la URL debería ser algo similar a
\nhttp://localhost:3000/?title=Ninjas\nY nos debería mostrar algo similar a
\n
\nVoilá supersencillo. Ahora veamos alguna cosa más que podemos hacer con ejs.
\nEn el ejemplo hemos usado <%= %> para trabajar con variables, pero claro si queremos poner código HTML como variable, ¿funcionaría? Veamos que pasa.
\nCambiamos la variable title que le mandamos a la vista, en nuestro index.js cambias res.render por
res.render('index', { title: '<h2>' + newTitle + '</h2>' });\nY ahora veamos el resultado
\n
\nUps!!! nos aparace todo literal, eso es porque con <%= %> básicamente conseguimos que nos transforme todo a literal(en este caso un string), pero ejs está preparado para esto, solo tenemos que cambiar los tags en nuestro index.ejs, básicamente cambiamos el igual por un guión y listo
<!DOCTYPE html>\n<html>\n <head>\n <h1>NinjaTitle</h1>\n </head>\n <body>\n <p>Bienvenidos a vuestro template ejs <%- title %></p>\n </body>\n</html>\nAhora ya tendríamos algo similar a esto
\n
\nAcabamos de ver como podemos pasarle estructuras de HTML directamente a la vista, pero todavía podemos hacer más cosas interesantes. Una de las ventajas de ejs es que podemos usar código javaScript directamente en la vista, vamos a ver algunos ejemplos
\nEmpecemos por ver como podríamos hacer un condicional, cambiémos nuestro index.ejs por esto
<!DOCTYPE html>\n<html>\n <head>\n <h1>NinjaTitle</h1>\n </head>\n <body>\n <p>Bienvenidos a vuestro template ejs <%- title %></p>\n<% if (title === 'Ninjas'){ %>\n <p>Somos Ninjas</p>\n<%}else{%>\n <p>Te has equivocadooooo</p> \n<%}%>\n </body>\n</html>\nY que no se nos olvide cambiar en nuestro index.js la línea de render por
\nres.render('index', { title: newTitle});\nSolo es quitarle los tags HTML.
\nAhora vamos a probarlo, pongamos por ejemplo esto en la url
\nhttp://localhost:3000/?title=Superman
\n
\nVemos como al no cumplir la condición sale la segunda opción, ahora probemos con nuestro title=Ninjas
\n
\nPor último vamos a probar a trabajar con un array de elementos. Creemos lo primero nuestro objeto array en index.js, cambiando el ya conocido res.render por
res.render('index', { \n title: newTitle,\n superHeros: [{name: 'Dr. Manhattan'},{name: 'Superman'},{name: 'El Comendiante'}]\n });\nYa tenemos nuestro array de elementos, ahora hagamos que la vista trabaje con ellos, en index.ejs añadimos lo siguiente
\n<!DOCTYPE html>\n<html>\n <head>\n <h1>NinjaTitle</h1>\n </head>\n <body>\n <p>Bienvenidos a vuestro template ejs <%- title %></p>\n<% if (title === 'Ninjas'){ %>\n <p>Somos Ninjas</p>\n \n <% superHeros.forEach(function(hero){ %>\n \n <p><%= hero.name %></p>\n \n <%})%>\n \n<%}else{%>\n <p>Te has equivocadooooo</p> \n<%}%>\n </body>\n</html>\nSi os fijáis hemos recorrido directamente el objeto superHeros y hemos mostrado la propiedad name de cada uno. Veamos lo que pasa cuando usamos title=Ninjas
\n
\nVoilá, como véis es relativamente sencillo utilizar templates ejs, esto ha sido solo una pequeña muestra de como podemos ir trabajando con ellos pero las posibilidades son infinitas (y también recordar que tenemos multitud de engines distintos).
Hasta aquí lo que quería comentar sobre los templates, en los siguientes post veremos como gestionar autenticación en nuestra API, uso de Promesas....y varias cosas más, nos veeemossss
\nUn abrazooorrr
\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ahora le toca el turno a las vistas o templates, aunque realmente este tema es muy amplio porque "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"express"}]},{"type":"text","value":" admite multitud de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"engines"}]},{"type":"text","value":" de templates distintos. En la "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/expressjs/express/wiki#template-engines"},"children":[{"type":"text","value":"documentación oficial"}]},{"type":"text","value":" tenéis todos los que soporta y como se usan, veremos ejemplos con "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"ejs"}]},{"type":"text","value":" porque es muy típico pero realmente podéis usar el que queráis."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nComentaros que a mi personalmente no me gusta mucho renderizar cosas en servidor para servirlas al cliente ya que aumentas la carga de trabajo del servidor, prefiero usar Node+Express como API Rest y para las vistas usar directamente "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"AngularJS"}]},{"type":"text","value":", "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ReactJS"}]},{"type":"text","value":" o similar pero al final depende un poco del proyecto o aplicación que estemos realizando, si es una página simple, casi como las que hemos visto de ejemplo, usamos los templates y ale a correr."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nBueno después de quejarme un poco vamos a continuar....como he comentado trabajaremos un poco con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ejs"}]},{"type":"text","value":" y para ello lo primero que tenemos que hacer es instalar el engine."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"npm install ejs --save\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Recordad usamos "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"--save"}]},{"type":"text","value":" para que al instalar el módulo lo indique también en el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"package.json"}]},{"type":"text","value":" y poder llevar control de versiones (y ya de paso si movemos la app que lo instale directamente)"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nAntes de continuar, os cuento, nosotros vamos a modificar nuestro proyecto de express actual para cambiar el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"engine"}]},{"type":"text","value":" pero si de primeras ya sabéis que váis a usar un engine en concreto, si recordáis se lo podíamos indicar a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"express_generator"}]},{"type":"text","value":" para que configure él directamente, si probáis el comando:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"express -h\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"veréis las opciones que tenemos"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-22-at-21.03.31.png","alt":"Express help"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nAún así no penséis que cambiar de uno a otro es muy difícil solo tenemos que saber que caracteriza a cada uno, o más bien como se compone cada uno. En el caso de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ejs"}]},{"type":"text","value":" es que realmente tu realizas la composición sobre código HTML, supongo que es una de las claves de su aceptación, básicamente es lo mismo que ya se estaba haciendo desde hace años pero con vitaminas."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"El primer cambio que haremos una vez instalado es cambiar el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"engine"}]},{"type":"text","value":" en el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"app.js"}]},{"type":"text","value":", para ello vamos a cambiar la línea"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"app.set('view engine', 'jade');\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"por esta otra (solo cambiando jade....superdifícil)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"app.set('view engine', 'ejs');\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ya tenemos el primer paso, lo siguiente que haremos será cambiar la vista "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index"}]},{"type":"text","value":" por ejemplo(solo cambiaremos una para que veáis de que va). Priemo eliminamos el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index.jade"}]},{"type":"text","value":" de la carpeta "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"views"}]},{"type":"text","value":" y creamos otro que sea "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index.ejs"}]},{"type":"text","value":". Una vez creado vamos a empezar por un código simple de HTML(mu feo lo sé es para probar solo)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n\n \nBienvenidos a vuestro template ejs <%= title %>
\n \n\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si os fijáis la variable esta puesta directamente entre "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"<%= %>"}]},{"type":"text","value":", fácil ¿verdad?. Ahora vamos a probarlo, recordar que teníamos configurado el middleware para que usara los datos recibidos de la "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"query string"}]},{"type":"text","value":", por lo que la URL debería ser algo similar a"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"http://localhost:3000/?title=Ninjas\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y nos debería mostrar algo similar a"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-22-at-21.50.14.png","alt":"Ejs template title done"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nVoilá supersencillo. Ahora veamos alguna cosa más que podemos hacer con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ejs"}]},{"type":"text","value":"."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nEn el ejemplo hemos usado <%= %> para trabajar con variables, pero claro si queremos poner código HTML como variable, ¿funcionaría? Veamos que pasa."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nCambiamos la variable title que le mandamos a la vista, en nuestro "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index.js"}]},{"type":"text","value":" cambias "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"res.render"}]},{"type":"text","value":" por"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"res.render('index', { title: 'Bienvenidos a vuestro template ejs <%- title %>
\n \n\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ahora ya tendríamos algo similar a esto"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-26-at-21.44.21.png","alt":"Html in ejs template"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nAcabamos de ver como podemos pasarle estructuras de HTML directamente a la vista, pero todavía podemos hacer más cosas interesantes. Una de las ventajas de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ejs"}]},{"type":"text","value":" es que podemos usar código javaScript directamente en la vista, vamos a ver algunos ejemplos"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nEmpecemos por ver como podríamos hacer un condicional, cambiémos nuestro "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index.ejs"}]},{"type":"text","value":" por esto"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n\n \nBienvenidos a vuestro template ejs <%- title %>
\n<% if (title === 'Ninjas'){ %>\nSomos Ninjas
\n<%}else{%>\nTe has equivocadooooo
\n<%}%>\n \n\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y que no se nos olvide cambiar en nuestro "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index.js"}]},{"type":"text","value":" la línea de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"render"}]},{"type":"text","value":" por"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"res.render('index', { title: newTitle});\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Solo es quitarle los "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"tags"}]},{"type":"text","value":" HTML."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nAhora vamos a probarlo, pongamos por ejemplo esto en la url"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"http://localhost:3000/?title=Superman"},"children":[{"type":"text","value":"http://localhost:3000/?title=Superman"}]}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-27-at-08.12.54.png","alt":"Wrong Title"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nVemos como al no cumplir la condición sale la segunda opción, ahora probemos con nuestro "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"title=Ninjas"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-27-at-08.15.15.png","alt":"Ninjas Title"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPor último vamos a probar a trabajar con un "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"array"}]},{"type":"text","value":" de elementos. Creemos lo primero nuestro objeto array en "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index.js"}]},{"type":"text","value":", cambiando el ya conocido "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"res.render"}]},{"type":"text","value":" por"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"res.render('index', { \n title: newTitle,\n superHeros: [{name: 'Dr. Manhattan'},{name: 'Superman'},{name: 'El Comendiante'}]\n });\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ya tenemos nuestro array de elementos, ahora hagamos que la vista trabaje con ellos, en "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index.ejs"}]},{"type":"text","value":" añadimos lo siguiente"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n\n \nBienvenidos a vuestro template ejs <%- title %>
\n<% if (title === 'Ninjas'){ %>\nSomos Ninjas
\n \n <% superHeros.forEach(function(hero){ %>\n \n<%= hero.name %>
\n \n <%})%>\n \n<%}else{%>\nTe has equivocadooooo
\n<%}%>\n \n\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si os fijáis hemos recorrido directamente el objeto "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"superHeros"}]},{"type":"text","value":" y hemos mostrado la propiedad "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":" de cada uno. Veamos lo que pasa cuando usamos "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"title=Ninjas"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-27-at-08.27.49.png","alt":"Array in ejs"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nVoilá, como véis es relativamente sencillo utilizar templates ejs, esto ha sido solo una pequeña muestra de como podemos ir trabajando con ellos pero las posibilidades son infinitas (y también recordar que tenemos multitud de engines distintos)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Hasta aquí lo que quería comentar sobre los templates, en los siguientes post veremos como gestionar autenticación en nuestra API, uso de Promesas....y varias cosas más, nos veeemossss"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Un abrazooorrr"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[]},"featureImageSharp":{"base":"nodebaner-4-1.jpg","publicURL":"/static/ebae59fce798d71ce68bf2a304f1491f/nodebaner-4-1.jpg","imageMeta":{"width":1680,"height":420},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAME/9oADAMBAAIQAxAAAAGrMokzQT//xAAXEAEBAQEAAAAAAAAAAAAAAAACASIh/9oACAEBAAEFAgMKdU1//8QAFhEBAQEAAAAAAAAAAAAAAAAAAAEx/9oACAEDAQE/AamP/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAEx/9oACAECAQE/AV1//8QAFRABAQAAAAAAAAAAAAAAAAAAEHH/2gAIAQEABj8Cr//EABgQAQADAQAAAAAAAAAAAAAAAAEAETEh/9oACAEBAAE/Ido1iddq0QhE/9oADAMBAAIAAwAAABDz/wD/xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QbrNxf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxAgav/EABgQAQADAQAAAAAAAAAAAAAAAAEAETFx/9oACAEBAAE/ECLXUGFQ03NnlQ0Zc//Z","aspectRatio":3.977272727272727,"src":"/static/ebae59fce798d71ce68bf2a304f1491f/ea4ab/nodebaner-4-1.jpg","srcSet":"/static/ebae59fce798d71ce68bf2a304f1491f/477ba/nodebaner-4-1.jpg 175w,\n/static/ebae59fce798d71ce68bf2a304f1491f/06776/nodebaner-4-1.jpg 350w,\n/static/ebae59fce798d71ce68bf2a304f1491f/ea4ab/nodebaner-4-1.jpg 700w,\n/static/ebae59fce798d71ce68bf2a304f1491f/3055e/nodebaner-4-1.jpg 1050w,\n/static/ebae59fce798d71ce68bf2a304f1491f/eff08/nodebaner-4-1.jpg 1400w,\n/static/ebae59fce798d71ce68bf2a304f1491f/34c3a/nodebaner-4-1.jpg 1680w","srcWebp":"/static/ebae59fce798d71ce68bf2a304f1491f/89afa/nodebaner-4-1.webp","srcSetWebp":"/static/ebae59fce798d71ce68bf2a304f1491f/9fca7/nodebaner-4-1.webp 175w,\n/static/ebae59fce798d71ce68bf2a304f1491f/37a4e/nodebaner-4-1.webp 350w,\n/static/ebae59fce798d71ce68bf2a304f1491f/89afa/nodebaner-4-1.webp 700w,\n/static/ebae59fce798d71ce68bf2a304f1491f/78e7a/nodebaner-4-1.webp 1050w,\n/static/ebae59fce798d71ce68bf2a304f1491f/03d34/nodebaner-4-1.webp 1400w,\n/static/ebae59fce798d71ce68bf2a304f1491f/41aa5/nodebaner-4-1.webp 1680w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"next":{"id":"Ghost__Post__5a338158333e0f134c248f34","title":"Don't stop the party: Node JS(VIII) Express generator","slug":"dont-stop-the-party-node-js-vii-mvc-y-express","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/nodebaner-4.jpg","excerpt":"En el post anterior vimos como es el trabajo básico con express, creamos una API\nque respondía a un método get y nos devolvía un mensaje, con eso más o menos ya\ntendríamos que tener una idea de como es el trabajo con node usando otro tipo de\nmétodos (get,post,put,..)(con la ayuda de la documentación oficial\n[http://expressjs.com/es/4x/api.html]), más adelante haremos ejemplos mucho más\ncomplejos, conectándonos a Bases de datos, devolviendo JSON, usando JSON Web\nToken para autenticar usuarios....","custom_excerpt":null,"visibility":"public","created_at_pretty":"16 Sep 2017","published_at_pretty":"28 Sep 2017","updated_at_pretty":"22 Jan 2018","created_at":"2017-09-16T19:32:34.000+02:00","published_at":"2017-09-28T10:26:00.000+02:00","updated_at":"2018-01-22T09:43:18.000+01:00","meta_title":null,"meta_description":"En el post anterior vimos un poco Express, en este post veremos como usar Express Generator para montar nuestra estructura básica de proyecto.","og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"Perfil.jpg","publicURL":"/static/b0de6281fb28a266510b3b09b9243e5a/Perfil.jpg","imageMeta":{"width":307,"height":307},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAUDBAb/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGzw6zC6zHn+cLYP//EAB0QAAICAQUAAAAAAAAAAAAAAAEDAAIEEyEiIzL/2gAIAQEAAQUCifca8KgcKWVfUpkHsG5pxX//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAdEAACAgEFAAAAAAAAAAAAAAAAARARcQISIUFR/9oACAEBAAY/AhU88xkb7N06a8P/xAAcEAEAAwEAAwEAAAAAAAAAAAABABEhMUFRYXH/2gAIAQEAAT8hR2pq40aqb+xIAeXibhW9JXr8joF4TBcSNe0//9oADAMBAAIAAwAAABDzDwD/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAcEAEAAgIDAQAAAAAAAAAAAAABABEhUTFhcfD/2gAIAQEAAT8QyItrELaTlatLwU63MvEW6vUNdy4LZQDn7iVApV9VLtANdWwKkuYq4Er1VZ//2Q==","aspectRatio":1,"src":"/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg","srcSet":"/static/b0de6281fb28a266510b3b09b9243e5a/f340b/Perfil.jpg 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/22d64/Perfil.jpg 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/aa249/Perfil.jpg 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/0dc33/Perfil.jpg 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/60667/Perfil.jpg 307w","srcWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp","srcSetWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/59cda/Perfil.webp 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/7da75/Perfil.webp 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f282e/Perfil.webp 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/a7b21/Perfil.webp 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f59af/Perfil.webp 307w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"nodejs","url":"https://jlgarcia.fulldev.ninja/tag/nodejs/","name":"nodejs","visibility":"public","feature_image":null,"description":null,"meta_title":"NodeJS Ninjas","meta_description":"Aprenderemos desde lo básico este framework de JS para backend, muy bueno en concurrencia y en API Rest y que forma parte del stack MEAN o MERN.","featureImageSharp":null},"tags":[{"slug":"nodejs","url":"https://jlgarcia.fulldev.ninja/tag/nodejs/","name":"nodejs","visibility":"public","feature_image":null,"description":null,"meta_title":"NodeJS Ninjas","meta_description":"Aprenderemos desde lo básico este framework de JS para backend, muy bueno en concurrencia y en API Rest y que forma parte del stack MEAN o MERN.","featureImageSharp":null}],"plaintext":"En el post anterior vimos como es el trabajo básico con express, creamos una API\nque respondía a un método get y nos devolvía un mensaje, con eso más o menos ya\ntendríamos que tener una idea de como es el trabajo con node usando otro tipo de\nmétodos (get,post,put,..)(con la ayuda de la documentación oficial\n[http://expressjs.com/es/4x/api.html]), más adelante haremos ejemplos mucho más\ncomplejos, conectándonos a Bases de datos, devolviendo JSON, usando JSON Web\nToken para autenticar usuarios...... pero antes de todo esto vamos a ver como se\nestructuraría un proyecto de Node+express y para ello nos vamos a valer de una\nherramienta llamada Express Generator que básicamente nos crea toda la\nestructura de carpetas y ficheros básicos que debería tener cualquier proyecto\nde este tipo.\nLo primero de todo es instalarla con npm de manera global ya que no nos serviría\ncomo proyecto si no tenemos proyecto......\n\nnpm install express-generator -g\n\n\nUna vez instalada podemos hacer\n\nexpress -h\n\n\nY vemos que opciones tenemos a la hora de crear nuestro proyecto\n\nComo véis podemos indicarle varios engines html(precesadores de html que\ngestionan la parte dinámica como datos de base de datos, etc, en el servidor y\nlo envían ya construido al cliente), css (más o menos mismo concepto) o si\nqueremos añadir un fichero gitignore a nuestro proyecto directamente(muy útil\npor cierto). Cada uno debería elegir las opciones con las que se sienta más\ncómodo (o las que nos obligue el proyecto).\nPara generar un proyecto nuevo es suficiente con escribir express\nnombreDeProyecto\n\nexpress ninja_project\n\n\nEsto nos creará algunas carpetas con varios ficheros en ellas\n\nLo primero miremos el fichero package.json para ver que nos ha configurado por\ndefecto. Tendríamos que tener algo similar a esto\n\n{\n \"name\": \"ninja-project\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"scripts\": {\n \"start\": \"node ./bin/www\"\n },\n \"dependencies\": {\n \"body-parser\": \"~1.17.1\",\n \"cookie-parser\": \"~1.4.3\",\n \"debug\": \"~2.6.3\",\n \"express\": \"~4.15.2\",\n \"jade\": \"~1.11.0\",\n \"morgan\": \"~1.8.1\",\n \"serve-favicon\": \"~2.4.2\"\n }\n}\n\n\nLo primero destacable que vemos es que nos ha creado un script llamado start \ndonde tiene toda la pinta que es el punto de entrada de nuestra aplicación. A\ncontinuación vemos como nos ha seleccionado varias dependecias para ser\ninstaladas, por ejemplo body-parser [https://www.npmjs.com/package/body-parser] \nherramienta para parsear los elementos del body de una petición (se encontraría\ndentro del request que vimos en el post anterior, exactamente en request.body) o \nmorgan el logger que ya vimos.\nA continuación tendríamos que instalar las dependencias de nuestro proyecto, por\nlo que dentro de la carpeta ninja_project ejecutamos\n\nnpm install\n\n\nEsto nos instala, todas las dependencias que tenemos en nuestro package.json y\ntambién las dependencias de estas, básicamente un montón de dependencias\njejejeje\n\nCon esto ya tendríamos todo listo para empezar, pero antes veamos un poco que es\nlo que nos ha configurado, primero de todo nos vamos al fichero por el que\ncomenzaría nuestra aplicación bin/www.\nEn general supongo que al verlo os haréis una idea, resumiendo mucho este\nfichero es el que nos configura la aplicación para que escuche en algún puerto,\nveamos un poco como lo hace.\n\nLo primero a tener en cuenta es que requiere app, es decir, el fichero app.js de\nla raíz del proyecto. Este fichero básicamente es la instancia de express con\nalgunas de sus configuraciones como son los módulos que va necesitar\n\nvar express = require('express');\nvar path = require('path');\nvar favicon = require('serve-favicon');\nvar logger = require('morgan');\nvar cookieParser = require('cookie-parser');\nvar bodyParser = require('body-parser');\n\nvar index = require('./routes/index');\nvar users = require('./routes/users');\n\n\ndonde se encuentran las vistas y cuál es el engine para procesar y mostrar estas\nvistas como html\n\napp.set('views', path.join(__dirname, 'views'));\napp.set('view engine', 'jade');\n\n\nnivel de logs, la instanciación o configuración de algunos módulos y donde están\nlos ficheros estáticos(en general siempre estan en una carpeta public o similar)\n\napp.use(logger('dev'));\napp.use(bodyParser.json());\napp.use(bodyParser.urlencoded({ extended: false }));\napp.use(cookieParser());\napp.use(express.static(path.join(__dirname, 'public')));\n\n\nviene con escuchas de tipo get (son los requires de la carpeta routes, mirarlos\ny veréis como son de sencillitos, más abajo los vemos)\n\napp.use('/', index);\napp.use('/users', users);\n\n\nNos configura también una respuesta 404, es decir, página no encontrada si\nrecibe un path url que no existe y se lo pasa a la ultima parte que es el error\nhandler\n\n// catch 404 and forward to error handler\napp.use(function(req, res, next) {\n var err = new Error('Not Found');\n err.status = 404;\n next(err);\n});\n// error handler\napp.use(function(err, req, res, next) {\n // set locals, only providing error in development\n res.locals.message = err.message;\n res.locals.error = req.app.get('env') === 'development' ? err : {};\n\n // render the error page\n res.status(err.status || 500);\n res.render('error');\n});\n\n\n\nComo véis una configuración bastante sencilla por parte del fichero app.js,\ncontinuemos con nuestro bin/www.\nLo siguiente requiere el módulo de debug y de http con la intención de\nconfigurar el puerto de escucha de la aplicación(con la posibilidad de usar una\nvariable de entorno con nombre PORT para usar otra que no sea el de por defecto)\ny por último lo inicia.\n\n/**\n * Get port from environment and store in Express.\n */\n\nvar port = normalizePort(process.env.PORT || '3000');\napp.set('port', port);\n\n/**\n * Create HTTP server.\n */\n\nvar server = http.createServer(app);\n\n/**\n * Listen on provided port, on all network interfaces.\n */\n\nserver.listen(port);\nserver.on('error', onError);\nserver.on('listening', onListening);\n\n\nTenemos alguna cosa más pero creo que eso es lo más importante, el resto del\nfichero supongo que se entiende (más o menos).\nVeamos ahora lo que tenemos en routes, miremos por ejemplo index.js\n\nvar express = require('express');\nvar router = express.Router();\n\n/* GET home page. */\nrouter.get('/', function(req, res, next) {\n res.render('index', { title: 'Express' });\n});\n\nmodule.exports = router;\n\n\nTiene instanciado la propiedad router, a la que le configura un manejador en la \nurl raíz que lo que que hará como respuesta(el parámetro res del callback) es\nrendear la vista index pasándole el título Express.\nVeamos la vista index.jade (si lo habéis dejado por defecto será jade si no\naparecerá otra cosa)\n\nextends layout\n\nblock content\n h1= title\n p Welcome to #{title}\n\n\nEstp es una plantilla de jade que esta extendiendo de otra que es layout,jade \npero a nosotros realmente nos interesa el title, este title es el parámetro que\nle enviamos desde el index.js, vamos a cambiarlo y al final veremos como queda,\nen el index.js ponemos esto por ejemplo (podéis poner lo que queráis)\n\nvar express = require('express');\nvar router = express.Router();\n\n/* GET home page. */\nrouter.get('/', function(req, res, next) {\n res.render('index', { title: 'Ninja Project' });\n});\n\nmodule.exports = router;\n\n\nComo véis es bastante sencillo lo que nos ha configurado express, ahora mismo ya\npodemos arrancar la aplicación con el script que hemos visto que tenia el \npackage.json, es decir, con npm start y ya tendríamos nuestra app con express\nlevantada, en el puerto 3000(si no hemos usado la variable de entorno para\ncambiarlo claro está).\nUna vez ejecutada si accedemos con un navegador a localhost:3000 veríamos en el\nnavegador algo similar a esto\n\nY en la consola, veríamos lo que ya vimos usando el módulo morgan\n\nPor último comentar que aunque en el código lo llamen variables de entorno se\npueden elegir los parámetros directamente con comandos, veamos uno que cambia\ntodo\n\nDEBUG=nombreApp:* PORT=3500 NODE_ENV=production npm start\n\n\nOs cuento paso a paso:\n\n * DEBUG=nombreApp:* Esto solo es para sacar más información en los logs, si\n ponemos nombreApp:* nos sacaría información de debug de todos los módulos\n pero podríamos indicarle un módulo específico para sacar solo información de\n el.\n * PORT=3500: Como os podéis imaginar esto nos cambiar el puerto de ejecución\n del 3000 que viene por defecto, al que nosotros le pongamos.\n * NODE_ENV=production: Por defecto node se ejecuta en modo desarrollo,\n básicamente provee de información más específica en los logs, ponerlo en\n producción simplemente es por evitar que en los logs aparezca información\n sensible en cuanto a datos o diseño de nuestra infraestructura u\n organización.\n\nPara evitar tener que poner siempre parámetros largos recordar que podemos crear\nnuestros propios scripts por lo que podríamos crearnos otro que sea\n\n\"scripts\": {\n \"production\": \"DEBUG=nombreApp:* PORT=3500 NODE_ENV=production node ./bin/www\"\n },\n\n\nY voilá ya tendríamos nuestro script de npm en producción, con debug y con un\npuerto custom.\nCreo que para un post tenemos suficiente jejejeje, en el siguiente vamos a ver\nun poco más sobre las rutas, que podemos hacer con ellas, que significado\nimplícito tiene cada tipo....y algunas cosas más ;)\n\nUn abrazooooorrr","html":"En el post anterior vimos como es el trabajo básico con express, creamos una API que respondía a un método get y nos devolvía un mensaje, con eso más o menos ya tendríamos que tener una idea de como es el trabajo con node usando otro tipo de métodos (get,post,put,..)(con la ayuda de la documentación oficial), más adelante haremos ejemplos mucho más complejos, conectándonos a Bases de datos, devolviendo JSON, usando JSON Web Token para autenticar usuarios...... pero antes de todo esto vamos a ver como se estructuraría un proyecto de Node+express y para ello nos vamos a valer de una herramienta llamada Express Generator que básicamente nos crea toda la estructura de carpetas y ficheros básicos que debería tener cualquier proyecto de este tipo.
\nLo primero de todo es instalarla con npm de manera global ya que no nos serviría como proyecto si no tenemos proyecto......
npm install express-generator -g\nUna vez instalada podemos hacer
\nexpress -h\nY vemos que opciones tenemos a la hora de crear nuestro proyecto
\n![\"express-generator](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-18-at-09.32.14.png\")
\nComo véis podemos indicarle varios engines html(precesadores de html que gestionan la parte dinámica como datos de base de datos, etc, en el servidor y lo envían ya construido al cliente), css (más o menos mismo concepto) o si queremos añadir un fichero gitignore a nuestro proyecto directamente(muy útil por cierto). Cada uno debería elegir las opciones con las que se sienta más cómodo (o las que nos obligue el proyecto).
\nPara generar un proyecto nuevo es suficiente con escribir express nombreDeProyecto
express ninja_project\nEsto nos creará algunas carpetas con varios ficheros en ellas
\n![\"Demo](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-18-at-09.39.33.png\")
\nLo primero miremos el fichero package.json para ver que nos ha configurado por defecto. Tendríamos que tener algo similar a esto
{\n "name": "ninja-project",\n "version": "0.0.0",\n "private": true,\n "scripts": {\n "start": "node ./bin/www"\n },\n "dependencies": {\n "body-parser": "~1.17.1",\n "cookie-parser": "~1.4.3",\n "debug": "~2.6.3",\n "express": "~4.15.2",\n "jade": "~1.11.0",\n "morgan": "~1.8.1",\n "serve-favicon": "~2.4.2"\n }\n}\nLo primero destacable que vemos es que nos ha creado un script llamado start donde tiene toda la pinta que es el punto de entrada de nuestra aplicación. A continuación vemos como nos ha seleccionado varias dependecias para ser instaladas, por ejemplo body-parser herramienta para parsear los elementos del body de una petición (se encontraría dentro del request que vimos en el post anterior, exactamente en request.body) o morgan el logger que ya vimos.
\nA continuación tendríamos que instalar las dependencias de nuestro proyecto, por lo que dentro de la carpeta ninja_project ejecutamos
npm install\nEsto nos instala, todas las dependencias que tenemos en nuestro package.json y también las dependencias de estas, básicamente un montón de dependencias jejejeje
\n![\"npm](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-18-at-09.51.54.png\")
\nCon esto ya tendríamos todo listo para empezar, pero antes veamos un poco que es lo que nos ha configurado, primero de todo nos vamos al fichero por el que comenzaría nuestra aplicación bin/www.
\nEn general supongo que al verlo os haréis una idea, resumiendo mucho este fichero es el que nos configura la aplicación para que escuche en algún puerto, veamos un poco como lo hace.
Lo primero a tener en cuenta es que requiere app, es decir, el fichero app.js de la raíz del proyecto. Este fichero básicamente es la instancia de express con algunas de sus configuraciones como son los módulos que va necesitar
\nvar express = require('express');\nvar path = require('path');\nvar favicon = require('serve-favicon');\nvar logger = require('morgan');\nvar cookieParser = require('cookie-parser');\nvar bodyParser = require('body-parser');\n\nvar index = require('./routes/index');\nvar users = require('./routes/users');\ndonde se encuentran las vistas y cuál es el engine para procesar y mostrar estas vistas como html
\napp.set('views', path.join(__dirname, 'views'));\napp.set('view engine', 'jade');\nnivel de logs, la instanciación o configuración de algunos módulos y donde están los ficheros estáticos(en general siempre estan en una carpeta public o similar)
\napp.use(logger('dev'));\napp.use(bodyParser.json());\napp.use(bodyParser.urlencoded({ extended: false }));\napp.use(cookieParser());\napp.use(express.static(path.join(__dirname, 'public')));\nviene con escuchas de tipo get (son los requires de la carpeta routes, mirarlos y veréis como son de sencillitos, más abajo los vemos)
\napp.use('/', index);\napp.use('/users', users);\nNos configura también una respuesta 404, es decir, página no encontrada si recibe un path url que no existe y se lo pasa a la ultima parte que es el error handler
\n// catch 404 and forward to error handler\napp.use(function(req, res, next) {\n var err = new Error('Not Found');\n err.status = 404;\n next(err);\n});\n// error handler\napp.use(function(err, req, res, next) {\n // set locals, only providing error in development\n res.locals.message = err.message;\n res.locals.error = req.app.get('env') === 'development' ? err : {};\n\n // render the error page\n res.status(err.status || 500);\n res.render('error');\n});\n\nComo véis una configuración bastante sencilla por parte del fichero app.js, continuemos con nuestro bin/www.
\nLo siguiente requiere el módulo de debug y de http con la intención de configurar el puerto de escucha de la aplicación(con la posibilidad de usar una variable de entorno con nombre PORT para usar otra que no sea el de por defecto) y por último lo inicia.
/**\n * Get port from environment and store in Express.\n */\n\nvar port = normalizePort(process.env.PORT || '3000');\napp.set('port', port);\n\n/**\n * Create HTTP server.\n */\n\nvar server = http.createServer(app);\n\n/**\n * Listen on provided port, on all network interfaces.\n */\n\nserver.listen(port);\nserver.on('error', onError);\nserver.on('listening', onListening);\nTenemos alguna cosa más pero creo que eso es lo más importante, el resto del fichero supongo que se entiende (más o menos).
\nVeamos ahora lo que tenemos en routes, miremos por ejemplo index.js
var express = require('express');\nvar router = express.Router();\n\n/* GET home page. */\nrouter.get('/', function(req, res, next) {\n res.render('index', { title: 'Express' });\n});\n\nmodule.exports = router;\nTiene instanciado la propiedad router, a la que le configura un manejador en la url raíz que lo que que hará como respuesta(el parámetro res del callback) es rendear la vista index pasándole el título Express.
\nVeamos la vista index.jade (si lo habéis dejado por defecto será jade si no aparecerá otra cosa)
extends layout\n\nblock content\n h1= title\n p Welcome to #{title}\nEstp es una plantilla de jade que esta extendiendo de otra que es layout,jade pero a nosotros realmente nos interesa el title, este title es el parámetro que le enviamos desde el index.js, vamos a cambiarlo y al final veremos como queda, en el index.js ponemos esto por ejemplo (podéis poner lo que queráis)
\nvar express = require('express');\nvar router = express.Router();\n\n/* GET home page. */\nrouter.get('/', function(req, res, next) {\n res.render('index', { title: 'Ninja Project' });\n});\n\nmodule.exports = router;\nComo véis es bastante sencillo lo que nos ha configurado express, ahora mismo ya podemos arrancar la aplicación con el script que hemos visto que tenia el package.json, es decir, con npm start y ya tendríamos nuestra app con express levantada, en el puerto 3000(si no hemos usado la variable de entorno para cambiarlo claro está).
\nUna vez ejecutada si accedemos con un navegador a localhost:3000 veríamos en el navegador algo similar a esto
\n![\"Express](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-18-at-21.17.00.png\")
\nY en la consola, veríamos lo que ya vimos usando el módulo morgan
\n![\"Express](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-18-at-20.45.15.png\")
\nPor último comentar que aunque en el código lo llamen variables de entorno se pueden elegir los parámetros directamente con comandos, veamos uno que cambia todo
DEBUG=nombreApp:* PORT=3500 NODE_ENV=production npm start\nOs cuento paso a paso:
\nPara evitar tener que poner siempre parámetros largos recordar que podemos crear nuestros propios scripts por lo que podríamos crearnos otro que sea
\n"scripts": {\n "production": "DEBUG=nombreApp:* PORT=3500 NODE_ENV=production node ./bin/www"\n },\nY voilá ya tendríamos nuestro script de npm en producción, con debug y con un puerto custom.
\nCreo que para un post tenemos suficiente jejejeje, en el siguiente vamos a ver un poco más sobre las rutas, que podemos hacer con ellas, que significado implícito tiene cada tipo....y algunas cosas más ;)
Un abrazooooorrr
\n","url":"https://jlgarcia.fulldev.ninja/dont-stop-the-party-node-js-vii-mvc-y-express/","canonical_url":null,"uuid":"6ea2c39f-03cf-4614-816f-b0ac16605713","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"59bd60326c31a60001f69f52","reading_time":6,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"En el post anterior vimos como es el trabajo básico con express, creamos una API que respondía a un método get y nos devolvía un mensaje, con eso más o menos ya tendríamos que tener una idea de como es el trabajo con node usando otro tipo de métodos (get,post,put,..)(con la ayuda de la documentación oficial), más adelante haremos ejemplos mucho más complejos, conectándonos a Bases de datos, devolviendo JSON, usando JSON Web Token para autenticar usuarios...... pero antes de todo esto vamos a ver como se estructuraría un proyecto de Node+express y para ello nos vamos a valer de una herramienta llamada Express Generator que básicamente nos crea toda la estructura de carpetas y ficheros básicos que debería tener cualquier proyecto de este tipo.
\nLo primero de todo es instalarla con npm de manera global ya que no nos serviría como proyecto si no tenemos proyecto......
npm install express-generator -g\nUna vez instalada podemos hacer
\nexpress -h\nY vemos que opciones tenemos a la hora de crear nuestro proyecto
\n
\nComo véis podemos indicarle varios engines html(precesadores de html que gestionan la parte dinámica como datos de base de datos, etc, en el servidor y lo envían ya construido al cliente), css (más o menos mismo concepto) o si queremos añadir un fichero gitignore a nuestro proyecto directamente(muy útil por cierto). Cada uno debería elegir las opciones con las que se sienta más cómodo (o las que nos obligue el proyecto).
\nPara generar un proyecto nuevo es suficiente con escribir express nombreDeProyecto
express ninja_project\nEsto nos creará algunas carpetas con varios ficheros en ellas
\n
\nLo primero miremos el fichero package.json para ver que nos ha configurado por defecto. Tendríamos que tener algo similar a esto
{\n \"name\": \"ninja-project\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"scripts\": {\n \"start\": \"node ./bin/www\"\n },\n \"dependencies\": {\n \"body-parser\": \"~1.17.1\",\n \"cookie-parser\": \"~1.4.3\",\n \"debug\": \"~2.6.3\",\n \"express\": \"~4.15.2\",\n \"jade\": \"~1.11.0\",\n \"morgan\": \"~1.8.1\",\n \"serve-favicon\": \"~2.4.2\"\n }\n}\nLo primero destacable que vemos es que nos ha creado un script llamado start donde tiene toda la pinta que es el punto de entrada de nuestra aplicación. A continuación vemos como nos ha seleccionado varias dependecias para ser instaladas, por ejemplo body-parser herramienta para parsear los elementos del body de una petición (se encontraría dentro del request que vimos en el post anterior, exactamente en request.body) o morgan el logger que ya vimos.
\nA continuación tendríamos que instalar las dependencias de nuestro proyecto, por lo que dentro de la carpeta ninja_project ejecutamos
npm install\nEsto nos instala, todas las dependencias que tenemos en nuestro package.json y también las dependencias de estas, básicamente un montón de dependencias jejejeje
\n
\nCon esto ya tendríamos todo listo para empezar, pero antes veamos un poco que es lo que nos ha configurado, primero de todo nos vamos al fichero por el que comenzaría nuestra aplicación bin/www.
\nEn general supongo que al verlo os haréis una idea, resumiendo mucho este fichero es el que nos configura la aplicación para que escuche en algún puerto, veamos un poco como lo hace.
Lo primero a tener en cuenta es que requiere app, es decir, el fichero app.js de la raíz del proyecto. Este fichero básicamente es la instancia de express con algunas de sus configuraciones como son los módulos que va necesitar
\nvar express = require('express');\nvar path = require('path');\nvar favicon = require('serve-favicon');\nvar logger = require('morgan');\nvar cookieParser = require('cookie-parser');\nvar bodyParser = require('body-parser');\n\nvar index = require('./routes/index');\nvar users = require('./routes/users');\ndonde se encuentran las vistas y cuál es el engine para procesar y mostrar estas vistas como html
\napp.set('views', path.join(__dirname, 'views'));\napp.set('view engine', 'jade');\nnivel de logs, la instanciación o configuración de algunos módulos y donde están los ficheros estáticos(en general siempre estan en una carpeta public o similar)
\napp.use(logger('dev'));\napp.use(bodyParser.json());\napp.use(bodyParser.urlencoded({ extended: false }));\napp.use(cookieParser());\napp.use(express.static(path.join(__dirname, 'public')));\nviene con escuchas de tipo get (son los requires de la carpeta routes, mirarlos y veréis como son de sencillitos, más abajo los vemos)
\napp.use('/', index);\napp.use('/users', users);\nNos configura también una respuesta 404, es decir, página no encontrada si recibe un path url que no existe y se lo pasa a la ultima parte que es el error handler
\n// catch 404 and forward to error handler\napp.use(function(req, res, next) {\n var err = new Error('Not Found');\n err.status = 404;\n next(err);\n});\n// error handler\napp.use(function(err, req, res, next) {\n // set locals, only providing error in development\n res.locals.message = err.message;\n res.locals.error = req.app.get('env') === 'development' ? err : {};\n\n // render the error page\n res.status(err.status || 500);\n res.render('error');\n});\n\nComo véis una configuración bastante sencilla por parte del fichero app.js, continuemos con nuestro bin/www.
\nLo siguiente requiere el módulo de debug y de http con la intención de configurar el puerto de escucha de la aplicación(con la posibilidad de usar una variable de entorno con nombre PORT para usar otra que no sea el de por defecto) y por último lo inicia.
/**\n * Get port from environment and store in Express.\n */\n\nvar port = normalizePort(process.env.PORT || '3000');\napp.set('port', port);\n\n/**\n * Create HTTP server.\n */\n\nvar server = http.createServer(app);\n\n/**\n * Listen on provided port, on all network interfaces.\n */\n\nserver.listen(port);\nserver.on('error', onError);\nserver.on('listening', onListening);\nTenemos alguna cosa más pero creo que eso es lo más importante, el resto del fichero supongo que se entiende (más o menos).
\nVeamos ahora lo que tenemos en routes, miremos por ejemplo index.js
var express = require('express');\nvar router = express.Router();\n\n/* GET home page. */\nrouter.get('/', function(req, res, next) {\n res.render('index', { title: 'Express' });\n});\n\nmodule.exports = router;\nTiene instanciado la propiedad router, a la que le configura un manejador en la url raíz que lo que que hará como respuesta(el parámetro res del callback) es rendear la vista index pasándole el título Express.
\nVeamos la vista index.jade (si lo habéis dejado por defecto será jade si no aparecerá otra cosa)
extends layout\n\nblock content\n h1= title\n p Welcome to #{title}\nEstp es una plantilla de jade que esta extendiendo de otra que es layout,jade pero a nosotros realmente nos interesa el title, este title es el parámetro que le enviamos desde el index.js, vamos a cambiarlo y al final veremos como queda, en el index.js ponemos esto por ejemplo (podéis poner lo que queráis)
\nvar express = require('express');\nvar router = express.Router();\n\n/* GET home page. */\nrouter.get('/', function(req, res, next) {\n res.render('index', { title: 'Ninja Project' });\n});\n\nmodule.exports = router;\nComo véis es bastante sencillo lo que nos ha configurado express, ahora mismo ya podemos arrancar la aplicación con el script que hemos visto que tenia el package.json, es decir, con npm start y ya tendríamos nuestra app con express levantada, en el puerto 3000(si no hemos usado la variable de entorno para cambiarlo claro está).
\nUna vez ejecutada si accedemos con un navegador a localhost:3000 veríamos en el navegador algo similar a esto
\n
\nY en la consola, veríamos lo que ya vimos usando el módulo morgan
\n
\nPor último comentar que aunque en el código lo llamen variables de entorno se pueden elegir los parámetros directamente con comandos, veamos uno que cambia todo
DEBUG=nombreApp:* PORT=3500 NODE_ENV=production npm start\nOs cuento paso a paso:
\nPara evitar tener que poner siempre parámetros largos recordar que podemos crear nuestros propios scripts por lo que podríamos crearnos otro que sea
\n\"scripts\": {\n \"production\": \"DEBUG=nombreApp:* PORT=3500 NODE_ENV=production node ./bin/www\"\n },\nY voilá ya tendríamos nuestro script de npm en producción, con debug y con un puerto custom.
\nCreo que para un post tenemos suficiente jejejeje, en el siguiente vamos a ver un poco más sobre las rutas, que podemos hacer con ellas, que significado implícito tiene cada tipo....y algunas cosas más ;)
Un abrazooooorrr
\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En el post anterior vimos como es el trabajo básico con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"express"}]},{"type":"text","value":", creamos una API que respondía a un método "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"get"}]},{"type":"text","value":" y nos devolvía un mensaje, con eso más o menos ya tendríamos que tener una idea de como es el trabajo con node usando otro tipo de métodos (get,post,put,..)(con la ayuda de la "},{"type":"element","tagName":"a","properties":{"href":"http://expressjs.com/es/4x/api.html"},"children":[{"type":"text","value":"documentación oficial"}]},{"type":"text","value":"), más adelante haremos ejemplos mucho más complejos, conectándonos a Bases de datos, devolviendo JSON, usando JSON Web Token para autenticar usuarios...... pero antes de todo esto vamos a ver como se estructuraría un proyecto de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Node+express"}]},{"type":"text","value":" y para ello nos vamos a valer de una herramienta llamada "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Express Generator"}]},{"type":"text","value":" que básicamente nos crea toda la estructura de carpetas y ficheros básicos que debería tener cualquier proyecto de este tipo."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nLo primero de todo es instalarla con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":" de manera global ya que no nos serviría como proyecto si no tenemos proyecto......"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"npm install express-generator -g\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Una vez instalada podemos hacer"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"express -h\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y vemos que opciones tenemos a la hora de crear nuestro proyecto"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-18-at-09.32.14.png","alt":"express-generator help"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nComo véis podemos indicarle varios "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"engines"}]},{"type":"text","value":" html(precesadores de html que gestionan la parte dinámica como datos de base de datos, etc, en el servidor y lo envían ya construido al cliente), css (más o menos mismo concepto) o si queremos añadir un fichero "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"gitignore"}]},{"type":"text","value":" a nuestro proyecto directamente(muy útil por cierto). Cada uno debería elegir las opciones con las que se sienta más cómodo (o las que nos obligue el proyecto)."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPara generar un proyecto nuevo es suficiente con escribir "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"express nombreDeProyecto"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"express ninja_project\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto nos creará algunas carpetas con varios ficheros en ellas"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-18-at-09.39.33.png","alt":"Demo Project"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nLo primero miremos el fichero "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"package.json"}]},{"type":"text","value":" para ver que nos ha configurado por defecto. Tendríamos que tener algo similar a esto"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"{\n \"name\": \"ninja-project\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"scripts\": {\n \"start\": \"node ./bin/www\"\n },\n \"dependencies\": {\n \"body-parser\": \"~1.17.1\",\n \"cookie-parser\": \"~1.4.3\",\n \"debug\": \"~2.6.3\",\n \"express\": \"~4.15.2\",\n \"jade\": \"~1.11.0\",\n \"morgan\": \"~1.8.1\",\n \"serve-favicon\": \"~2.4.2\"\n }\n}\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lo primero destacable que vemos es que nos ha creado un "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"script"}]},{"type":"text","value":" llamado "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"start"}]},{"type":"text","value":" donde tiene toda la pinta que es el punto de entrada de nuestra aplicación. A continuación vemos como nos ha seleccionado varias dependecias para ser instaladas, por ejemplo "},{"type":"element","tagName":"a","properties":{"href":"https://www.npmjs.com/package/body-parser"},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"body-parser"}]}]},{"type":"text","value":" herramienta para parsear los elementos del body de una petición (se encontraría dentro del "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"request"}]},{"type":"text","value":" que vimos en el post anterior, exactamente en "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"request.body"}]},{"type":"text","value":") o "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"morgan"}]},{"type":"text","value":" el logger que ya vimos."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nA continuación tendríamos que instalar las dependencias de nuestro proyecto, por lo que dentro de la carpeta "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ninja_project"}]},{"type":"text","value":" ejecutamos"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"npm install\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto nos instala, todas las dependencias que tenemos en nuestro "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"package.json"}]},{"type":"text","value":" y también las dependencias de estas, básicamente un montón de dependencias jejejeje"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-18-at-09.51.54.png","alt":"npm install"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nCon esto ya tendríamos todo listo para empezar, pero antes veamos un poco que es lo que nos ha configurado, primero de todo nos vamos al fichero por el que comenzaría nuestra aplicación "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"bin/www"}]},{"type":"text","value":"."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nEn general supongo que al verlo os haréis una idea, resumiendo mucho este fichero es el que nos configura la aplicación para que escuche en algún puerto, veamos un poco como lo hace."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lo primero a tener en cuenta es que "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"requiere app"}]},{"type":"text","value":", es decir, el fichero "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"app.js"}]},{"type":"text","value":" de la raíz del proyecto. Este fichero básicamente es la instancia de express con algunas de sus configuraciones como son los módulos que va necesitar"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var express = require('express');\nvar path = require('path');\nvar favicon = require('serve-favicon');\nvar logger = require('morgan');\nvar cookieParser = require('cookie-parser');\nvar bodyParser = require('body-parser');\n\nvar index = require('./routes/index');\nvar users = require('./routes/users');\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"donde se encuentran las vistas y cuál es el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"engine"}]},{"type":"text","value":" para procesar y mostrar estas vistas como html"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"app.set('views', path.join(__dirname, 'views'));\napp.set('view engine', 'jade');\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"nivel de logs, la instanciación o configuración de algunos módulos y donde están los ficheros estáticos(en general siempre estan en una carpeta public o similar)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"app.use(logger('dev'));\napp.use(bodyParser.json());\napp.use(bodyParser.urlencoded({ extended: false }));\napp.use(cookieParser());\napp.use(express.static(path.join(__dirname, 'public')));\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"viene con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"escuchas"}]},{"type":"text","value":" de tipo "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"get"}]},{"type":"text","value":" (son los requires de la carpeta routes, mirarlos y veréis como son de sencillitos, más abajo los vemos)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"app.use('/', index);\napp.use('/users', users);\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Nos configura también una respuesta "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"404"}]},{"type":"text","value":", es decir, página no encontrada si recibe un "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"path url"}]},{"type":"text","value":" que no existe y se lo pasa a la ultima parte que es el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"error handler"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"// catch 404 and forward to error handler\napp.use(function(req, res, next) {\n var err = new Error('Not Found');\n err.status = 404;\n next(err);\n});\n// error handler\napp.use(function(err, req, res, next) {\n // set locals, only providing error in development\n res.locals.message = err.message;\n res.locals.error = req.app.get('env') === 'development' ? err : {};\n\n // render the error page\n res.status(err.status || 500);\n res.render('error');\n});\n\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como véis una configuración bastante sencilla por parte del fichero "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"app.js"}]},{"type":"text","value":", continuemos con nuestro "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"bin/www"}]},{"type":"text","value":"."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nLo siguiente "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"requiere"}]},{"type":"text","value":" el módulo de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"debug"}]},{"type":"text","value":" y de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"http"}]},{"type":"text","value":" con la intención de configurar el puerto de escucha de la aplicación(con la posibilidad de usar una variable de entorno con nombre "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"PORT"}]},{"type":"text","value":" para usar otra que no sea el de por defecto) y por último lo inicia."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"/**\n * Get port from environment and store in Express.\n */\n\nvar port = normalizePort(process.env.PORT || '3000');\napp.set('port', port);\n\n/**\n * Create HTTP server.\n */\n\nvar server = http.createServer(app);\n\n/**\n * Listen on provided port, on all network interfaces.\n */\n\nserver.listen(port);\nserver.on('error', onError);\nserver.on('listening', onListening);\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Tenemos alguna cosa más pero creo que eso es lo más importante, el resto del fichero supongo que se entiende (más o menos)."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nVeamos ahora lo que tenemos en "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"routes"}]},{"type":"text","value":", miremos por ejemplo "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index.js"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var express = require('express');\nvar router = express.Router();\n\n/* GET home page. */\nrouter.get('/', function(req, res, next) {\n res.render('index', { title: 'Express' });\n});\n\nmodule.exports = router;\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Tiene instanciado la propiedad "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"router"}]},{"type":"text","value":", a la que le configura un manejador en la "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"url raíz"}]},{"type":"text","value":" que lo que que hará como respuesta(el parámetro "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"res"}]},{"type":"text","value":" del callback) es rendear la vista index pasándole el título "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Express"}]},{"type":"text","value":"."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nVeamos la vista "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index.jade"}]},{"type":"text","value":" (si lo habéis dejado por defecto será jade si no aparecerá otra cosa)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"extends layout\n\nblock content\n h1= title\n p Welcome to #{title}\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Estp es una plantilla de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"jade"}]},{"type":"text","value":" que esta extendiendo de otra que es "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"layout,jade"}]},{"type":"text","value":" pero a nosotros realmente nos interesa el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"title"}]},{"type":"text","value":", este title es el parámetro que le enviamos desde el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index.js"}]},{"type":"text","value":", vamos a cambiarlo y al final veremos como queda, en el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index.js"}]},{"type":"text","value":" ponemos esto por ejemplo (podéis poner lo que queráis)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var express = require('express');\nvar router = express.Router();\n\n/* GET home page. */\nrouter.get('/', function(req, res, next) {\n res.render('index', { title: 'Ninja Project' });\n});\n\nmodule.exports = router;\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como véis es bastante sencillo lo que nos ha configurado express, ahora mismo ya podemos arrancar la aplicación con el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"script"}]},{"type":"text","value":" que hemos visto que tenia el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"package.json"}]},{"type":"text","value":", es decir, con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"npm start"}]},{"type":"text","value":" y ya tendríamos nuestra app con express levantada, en el puerto "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"3000"}]},{"type":"text","value":"(si no hemos usado la variable de entorno para cambiarlo claro está)."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nUna vez ejecutada si accedemos con un navegador a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"localhost:3000"}]},{"type":"text","value":" veríamos en el navegador algo similar a esto"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-18-at-21.17.00.png","alt":"Express generator example"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nY en la consola, veríamos lo que ya vimos usando el módulo "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"morgan"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-18-at-20.45.15.png","alt":"Express generator console log"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPor último comentar que aunque en el código lo llamen "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"variables de entorno"}]},{"type":"text","value":" se pueden elegir los parámetros directamente con comandos, veamos uno que cambia todo"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"DEBUG=nombreApp:* PORT=3500 NODE_ENV=production npm start\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Os cuento paso a paso:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"DEBUG=nombreApp:*"}]},{"type":"text","value":" Esto solo es para sacar más información en los logs, si ponemos nombreApp:* nos sacaría información de debug de todos los módulos pero podríamos indicarle un módulo específico para sacar solo información de el."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"PORT=3500:"}]},{"type":"text","value":" Como os podéis imaginar esto nos cambiar el puerto de ejecución del 3000 que viene por defecto, al que nosotros le pongamos."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"NODE_ENV=production:"}]},{"type":"text","value":" Por defecto node se ejecuta en "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"modo desarrollo"}]},{"type":"text","value":", básicamente provee de información más específica en los logs, ponerlo en producción simplemente es por evitar que en los logs aparezca información sensible en cuanto a datos o diseño de nuestra infraestructura u organización."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Para evitar tener que poner siempre parámetros largos recordar que podemos crear nuestros propios "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"scripts"}]},{"type":"text","value":" por lo que podríamos crearnos otro que sea"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\"scripts\": {\n \"production\": \"DEBUG=nombreApp:* PORT=3500 NODE_ENV=production node ./bin/www\"\n },\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y voilá ya tendríamos nuestro script de npm en producción, con debug y con un puerto custom."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nCreo que para un post tenemos suficiente jejejeje, en el siguiente vamos a ver un poco más sobre las "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"rutas"}]},{"type":"text","value":", que podemos hacer con ellas, que significado implícito tiene cada tipo....y algunas cosas más ;)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Un abrazooooorrr"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[]},"featureImageSharp":{"base":"nodebaner-4.jpg","publicURL":"/static/ebae59fce798d71ce68bf2a304f1491f/nodebaner-4.jpg","imageMeta":{"width":1680,"height":420},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAME/9oADAMBAAIQAxAAAAGrMokzQT//xAAXEAEBAQEAAAAAAAAAAAAAAAACASIh/9oACAEBAAEFAgMKdU1//8QAFhEBAQEAAAAAAAAAAAAAAAAAAAEx/9oACAEDAQE/AamP/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAEx/9oACAECAQE/AV1//8QAFRABAQAAAAAAAAAAAAAAAAAAEHH/2gAIAQEABj8Cr//EABgQAQADAQAAAAAAAAAAAAAAAAEAETEh/9oACAEBAAE/Ido1iddq0QhE/9oADAMBAAIAAwAAABDz/wD/xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QbrNxf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxAgav/EABgQAQADAQAAAAAAAAAAAAAAAAEAETFx/9oACAEBAAE/ECLXUGFQ03NnlQ0Zc//Z","aspectRatio":3.977272727272727,"src":"/static/ebae59fce798d71ce68bf2a304f1491f/ea4ab/nodebaner-4.jpg","srcSet":"/static/ebae59fce798d71ce68bf2a304f1491f/477ba/nodebaner-4.jpg 175w,\n/static/ebae59fce798d71ce68bf2a304f1491f/06776/nodebaner-4.jpg 350w,\n/static/ebae59fce798d71ce68bf2a304f1491f/ea4ab/nodebaner-4.jpg 700w,\n/static/ebae59fce798d71ce68bf2a304f1491f/3055e/nodebaner-4.jpg 1050w,\n/static/ebae59fce798d71ce68bf2a304f1491f/eff08/nodebaner-4.jpg 1400w,\n/static/ebae59fce798d71ce68bf2a304f1491f/34c3a/nodebaner-4.jpg 1680w","srcWebp":"/static/ebae59fce798d71ce68bf2a304f1491f/89afa/nodebaner-4.webp","srcSetWebp":"/static/ebae59fce798d71ce68bf2a304f1491f/9fca7/nodebaner-4.webp 175w,\n/static/ebae59fce798d71ce68bf2a304f1491f/37a4e/nodebaner-4.webp 350w,\n/static/ebae59fce798d71ce68bf2a304f1491f/89afa/nodebaner-4.webp 700w,\n/static/ebae59fce798d71ce68bf2a304f1491f/78e7a/nodebaner-4.webp 1050w,\n/static/ebae59fce798d71ce68bf2a304f1491f/03d34/nodebaner-4.webp 1400w,\n/static/ebae59fce798d71ce68bf2a304f1491f/41aa5/nodebaner-4.webp 1680w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"allGhostPost":{"edges":[{"node":{"id":"Ghost__Post__5a338158333e0f134c248f3e","title":"Don't stop the party: Node JS(XIII) Cluster","slug":"dont-stop-the-party-node-js-xiii-cluster","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/nodebaner-1.jpg","excerpt":"Y por fin hemos llegado a la última parte exclusiva de Node, ya lo siguiente que\nveremos con será, después de MongoDB, como usar las 2 cosas para hacer una API\ncompleta.\nAunque sea lo último no tiene porque dejar de ser interesante, ya que usando lo\nque veremos a continuación podemos aumentar el rendimiento de nuestra aplicación\nnotablemente (eso sí, siempre dependiendo del entorno).\n¿Y que es un Cluster? Bueno pues para hacerlo simple un cluster son 2 o más\nservicios, programas, ordenadores, se","custom_excerpt":null,"visibility":"public","created_at_pretty":"11 Oct 2017","published_at_pretty":"16 Oct 2017","updated_at_pretty":"22 Jan 2018","created_at":"2017-10-11T08:33:26.000+02:00","published_at":"2017-10-16T10:28:00.000+02:00","updated_at":"2018-01-22T09:34:26.000+01:00","meta_title":"Don't stop the party: Node JS(XIII) Cluster","meta_description":"Veremos como podemos configurar un Cluster de servicios de NodeJS para aumentar nuestro rendimiento casi exponencialmente.","og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"Perfil.jpg","publicURL":"/static/b0de6281fb28a266510b3b09b9243e5a/Perfil.jpg","imageMeta":{"width":307,"height":307},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAUDBAb/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGzw6zC6zHn+cLYP//EAB0QAAICAQUAAAAAAAAAAAAAAAEDAAIEEyEiIzL/2gAIAQEAAQUCifca8KgcKWVfUpkHsG5pxX//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAdEAACAgEFAAAAAAAAAAAAAAAAARARcQISIUFR/9oACAEBAAY/AhU88xkb7N06a8P/xAAcEAEAAwEAAwEAAAAAAAAAAAABABEhMUFRYXH/2gAIAQEAAT8hR2pq40aqb+xIAeXibhW9JXr8joF4TBcSNe0//9oADAMBAAIAAwAAABDzDwD/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAcEAEAAgIDAQAAAAAAAAAAAAABABEhUTFhcfD/2gAIAQEAAT8QyItrELaTlatLwU63MvEW6vUNdy4LZQDn7iVApV9VLtANdWwKkuYq4Er1VZ//2Q==","aspectRatio":1,"src":"/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg","srcSet":"/static/b0de6281fb28a266510b3b09b9243e5a/f340b/Perfil.jpg 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/22d64/Perfil.jpg 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/aa249/Perfil.jpg 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/0dc33/Perfil.jpg 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/60667/Perfil.jpg 307w","srcWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp","srcSetWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/59cda/Perfil.webp 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/7da75/Perfil.webp 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f282e/Perfil.webp 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/a7b21/Perfil.webp 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f59af/Perfil.webp 307w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"nodejs","url":"https://jlgarcia.fulldev.ninja/tag/nodejs/","name":"nodejs","visibility":"public","feature_image":null,"description":null,"meta_title":"NodeJS Ninjas","meta_description":"Aprenderemos desde lo básico este framework de JS para backend, muy bueno en concurrencia y en API Rest y que forma parte del stack MEAN o MERN.","featureImageSharp":null},"tags":[{"slug":"nodejs","url":"https://jlgarcia.fulldev.ninja/tag/nodejs/","name":"nodejs","visibility":"public","feature_image":null,"description":null,"meta_title":"NodeJS Ninjas","meta_description":"Aprenderemos desde lo básico este framework de JS para backend, muy bueno en concurrencia y en API Rest y que forma parte del stack MEAN o MERN.","featureImageSharp":null}],"plaintext":"Y por fin hemos llegado a la última parte exclusiva de Node, ya lo siguiente que\nveremos con será, después de MongoDB, como usar las 2 cosas para hacer una API\ncompleta.\nAunque sea lo último no tiene porque dejar de ser interesante, ya que usando lo\nque veremos a continuación podemos aumentar el rendimiento de nuestra aplicación\nnotablemente (eso sí, siempre dependiendo del entorno).\n¿Y que es un Cluster? Bueno pues para hacerlo simple un cluster son 2 o más\nservicios, programas, ordenadores, servidores....que funcionan como uno solo.\nBajo este concepto tendríamos varías opciones de configuración: balanceo de\ncarga, alta disponibilidad.... Si queréis saber más siempre podéis mirar en la \nWiki [https://es.wikipedia.org/wiki/Cl%C3%BAster_(inform%C3%A1tica)]\nEn nuestro caso, NodeJS, nos permite tener varios workers que trabajan por si\nsolos, para hacerlo simple es como si iniciaramos varias veces nuestra\naplicación de NodeJS y cada una trabajara por si sola (realmente tenemos un\nproceso master que gestiona el resto y podemos pasar datos, comunicar eventos o\nlo que necesitemos entre los workers, entre los workers y el master y\nviceversa).\nPara configurarlo en nuestra aplicación de node tenemos que hacerlo antes de que\ninicie el server para escuchar las peticiones por lo que vamosa nuestro proyecto\nde Express y dentro de la carpeta bin en el fichero www hacemos lo siguiente:\nBuscamos la linea donde tenemos el comentario Create server\n\n/**\n * Create HTTP server.\n */\n\nvar server = http.createServer(app);\n\n\nY justo encima ponemos lo siguiente:\n\nconst cluster = require('cluster')\n\nif (cluster.isMaster){\n \n console.log(`Master is running in process ${process.pid}`)\n const numCPUS = require('os').cpus()\n numCPUS.map(() => {\n cluster.fork()\n }) \n \n \n}else {\n\n/**\n * Create HTTP server.\n */\n\nvar server = http.createServer(app);\n\n\nComo véis lo que hacemos es requerir el módulo cluster y básicamente es que si\nes el Master comprobamos cuantas CPUs tenemos y generamos un worker por cada\nuna. El numCpus lo que devuelve es un array donde cada elemento es información\nde cada CPU, yo simplemente he recorrido el array con el map y por cada elemento\nle he indicado que genere un worker. Esto se podría hacer de más formas con un \nfor normal o como queráis.\nPara ver cuantos workers instancia vamos a añadir un log que indique que ha\niniciado un worker, justo debajo de los server.on y cerramos el else\n\nserver.listen(port);\nserver.on('error', onError);\nserver.on('listening', onListening);\nconsole.log(`Worker ${process.pid} Started`)\n} //No nos olvidemos de cerrar el else en este punto\n\n\nBien creo que ya estamos listos para ejecutarlo, asi que ya sabéis\n\nnpm start\n\n\nY si miramos el log\n\nA mi me ha arrancado 4 workers, esto dependerá del número de CPUs de cada\nequipo.\nHablemos un poco más de como funciona un cluster en Node. En este caso\nespecífico se útiliza el método round-robin\n[https://es.wikipedia.org/wiki/Planificaci%C3%B3n_Round-robin] para repartir la\ncarga entre los workers (lo mejor es que miréis el link que he puesto si queréis\nsaber como funciona).\n\nTango el master como los workers producen eventos a los que nos podemos \nsuscribir, al mismo estilo que hicimos con el event emitter\n[https://jlgarcia.fulldev.ninja/dont-stop-the-party-node-js-v/] en su momento,\nlo más fácil para que veais que eventos tenemos y que podemos hacer con ellos es\nque miréis la documentación oficial\n[https://nodejs.org/dist/latest-v8.x/docs/api/cluster.html] que como veréis\nviene con mucho código de ejemplo para que lo entendáis mejor.\nTambién es posible que el master mande mensajes a los workers, veamoslo con un\npequeño ejemplo. Dentro del if, es decir en el master añadimos\n\n //Nos da una lista con los workers que tenemos\n const workersOnline = cluster.workers\n\n workersOnline[2].send(\"Hi ninjaWorker 2\")\n workersOnline[4].send(\"Hi ninjaWorker 4\")\n\n\nY en el else donde instanciamos los workers\n\nprocess.on('message',(message)=>{\n console.log(`Soy un worker y este es el mensaje ${message}`)\n})\n\n\nNos suscribimos al evento message y devolvemos un mensaje en consola con el\nmensaje, fácil ¿verdad?, si ahora ejecutamos veremos como nos aparece el mensaje\nque hemos pasado a cada worker, y además cada vez que ejecutemos nos aparecerá\nen distinto momento ya que no sabemos cuando se instancia cada worker\n\n\n\nEsto solo es un ejemplo si repasais la documentación veréis que podéis hacer\nmultitud de cosas distintas ;)\n\nBueno y hasta aquí la parte de Cluster, como habéis visto es relativamente\nsencillo y ya podéis usarlo tranquilamente en vuestros proyectos con NodeJS.\n\nTambién (por el momento) aquí finalizamos la parte específica de Node ya lo\nsiguiente que veremos será usandolo con MongoDB para trabajar con esta base de\ndatos y crear una API Rest con un entorno más realista, así que empezaré con una\nnueva línea dedicada a MongoDB dentro de nada, espero que la parte de Node os\nhaya parecido interesante y suficiente para poder realizar vuestros propios\nproyectos.\n\nEstad atentos a los siguientes ;) nos vemooosssss un abrazoooorrrrr","html":"Y por fin hemos llegado a la última parte exclusiva de Node, ya lo siguiente que veremos con será, después de MongoDB, como usar las 2 cosas para hacer una API completa.
\nAunque sea lo último no tiene porque dejar de ser interesante, ya que usando lo que veremos a continuación podemos aumentar el rendimiento de nuestra aplicación notablemente (eso sí, siempre dependiendo del entorno).
\n¿Y que es un Cluster? Bueno pues para hacerlo simple un cluster son 2 o más servicios, programas, ordenadores, servidores....que funcionan como uno solo. Bajo este concepto tendríamos varías opciones de configuración: balanceo de carga, alta disponibilidad.... Si queréis saber más siempre podéis mirar en la Wiki
\nEn nuestro caso, NodeJS, nos permite tener varios workers que trabajan por si solos, para hacerlo simple es como si iniciaramos varias veces nuestra aplicación de NodeJS y cada una trabajara por si sola (realmente tenemos un proceso master que gestiona el resto y podemos pasar datos, comunicar eventos o lo que necesitemos entre los workers, entre los workers y el master y viceversa).
\nPara configurarlo en nuestra aplicación de node tenemos que hacerlo antes de que inicie el server para escuchar las peticiones por lo que vamosa nuestro proyecto de Express y dentro de la carpeta bin en el fichero www hacemos lo siguiente:
\nBuscamos la linea donde tenemos el comentario Create server
/**\n * Create HTTP server.\n */\n\nvar server = http.createServer(app);\nY justo encima ponemos lo siguiente:
\nconst cluster = require('cluster')\n\nif (cluster.isMaster){\n \n console.log(`Master is running in process ${process.pid}`)\n const numCPUS = require('os').cpus()\n numCPUS.map(() => {\n cluster.fork()\n }) \n \n \n}else {\n\n/**\n * Create HTTP server.\n */\n\nvar server = http.createServer(app);\nComo véis lo que hacemos es requerir el módulo cluster y básicamente es que si es el Master comprobamos cuantas CPUs tenemos y generamos un worker por cada una. El numCpus lo que devuelve es un array donde cada elemento es información de cada CPU, yo simplemente he recorrido el array con el map y por cada elemento le he indicado que genere un worker. Esto se podría hacer de más formas con un for normal o como queráis.
\nPara ver cuantos workers instancia vamos a añadir un log que indique que ha iniciado un worker, justo debajo de los server.on y cerramos el else
server.listen(port);\nserver.on('error', onError);\nserver.on('listening', onListening);\nconsole.log(`Worker ${process.pid} Started`)\n} //No nos olvidemos de cerrar el else en este punto\nBien creo que ya estamos listos para ejecutarlo, asi que ya sabéis
\nnpm start\nY si miramos el log
\n![\"Workers](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-12-a-las-18.58.14.png\")
\nA mi me ha arrancado 4 workers, esto dependerá del número de CPUs de cada equipo.
\nHablemos un poco más de como funciona un cluster en Node. En este caso específico se útiliza el método round-robin para repartir la carga entre los workers (lo mejor es que miréis el link que he puesto si queréis saber como funciona).
Tango el master como los workers producen eventos a los que nos podemos suscribir, al mismo estilo que hicimos con el event emitter en su momento, lo más fácil para que veais que eventos tenemos y que podemos hacer con ellos es que miréis la documentación oficial que como veréis viene con mucho código de ejemplo para que lo entendáis mejor.
\nTambién es posible que el master mande mensajes a los workers, veamoslo con un pequeño ejemplo. Dentro del if, es decir en el master añadimos
//Nos da una lista con los workers que tenemos\n const workersOnline = cluster.workers\n\n workersOnline[2].send("Hi ninjaWorker 2")\n workersOnline[4].send("Hi ninjaWorker 4")\nY en el else donde instanciamos los workers
\nprocess.on('message',(message)=>{\n console.log(`Soy un worker y este es el mensaje ${message}`)\n})\nNos suscribimos al evento message y devolvemos un mensaje en consola con el mensaje, fácil ¿verdad?, si ahora ejecutamos veremos como nos aparece el mensaje que hemos pasado a cada worker, y además cada vez que ejecutemos nos aparecerá en distinto momento ya que no sabemos cuando se instancia cada worker
\n![\"Master](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-12-a-las-19.16.09.png\")
\n![\"Master](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-12-a-las-19.16.34.png\")
Esto solo es un ejemplo si repasais la documentación veréis que podéis hacer multitud de cosas distintas ;)
\nBueno y hasta aquí la parte de Cluster, como habéis visto es relativamente sencillo y ya podéis usarlo tranquilamente en vuestros proyectos con NodeJS.
\nTambién (por el momento) aquí finalizamos la parte específica de Node ya lo siguiente que veremos será usandolo con MongoDB para trabajar con esta base de datos y crear una API Rest con un entorno más realista, así que empezaré con una nueva línea dedicada a MongoDB dentro de nada, espero que la parte de Node os haya parecido interesante y suficiente para poder realizar vuestros propios proyectos.
\nEstad atentos a los siguientes ;) nos vemooosssss un abrazoooorrrrr
\n","url":"https://jlgarcia.fulldev.ninja/dont-stop-the-party-node-js-xiii-cluster/","canonical_url":null,"uuid":"f63943af-060c-435b-8f97-b2c6f09734da","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"59ddbb3658177700014ca3b2","reading_time":4,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"Y por fin hemos llegado a la última parte exclusiva de Node, ya lo siguiente que veremos con será, después de MongoDB, como usar las 2 cosas para hacer una API completa.
\nAunque sea lo último no tiene porque dejar de ser interesante, ya que usando lo que veremos a continuación podemos aumentar el rendimiento de nuestra aplicación notablemente (eso sí, siempre dependiendo del entorno).
\n¿Y que es un Cluster? Bueno pues para hacerlo simple un cluster son 2 o más servicios, programas, ordenadores, servidores....que funcionan como uno solo. Bajo este concepto tendríamos varías opciones de configuración: balanceo de carga, alta disponibilidad.... Si queréis saber más siempre podéis mirar en la Wiki
\nEn nuestro caso, NodeJS, nos permite tener varios workers que trabajan por si solos, para hacerlo simple es como si iniciaramos varias veces nuestra aplicación de NodeJS y cada una trabajara por si sola (realmente tenemos un proceso master que gestiona el resto y podemos pasar datos, comunicar eventos o lo que necesitemos entre los workers, entre los workers y el master y viceversa).
\nPara configurarlo en nuestra aplicación de node tenemos que hacerlo antes de que inicie el server para escuchar las peticiones por lo que vamosa nuestro proyecto de Express y dentro de la carpeta bin en el fichero www hacemos lo siguiente:
\nBuscamos la linea donde tenemos el comentario Create server
/**\n * Create HTTP server.\n */\n\nvar server = http.createServer(app);\nY justo encima ponemos lo siguiente:
\nconst cluster = require('cluster')\n\nif (cluster.isMaster){\n \n console.log(`Master is running in process ${process.pid}`)\n const numCPUS = require('os').cpus()\n numCPUS.map(() => {\n cluster.fork()\n }) \n \n \n}else {\n\n/**\n * Create HTTP server.\n */\n\nvar server = http.createServer(app);\nComo véis lo que hacemos es requerir el módulo cluster y básicamente es que si es el Master comprobamos cuantas CPUs tenemos y generamos un worker por cada una. El numCpus lo que devuelve es un array donde cada elemento es información de cada CPU, yo simplemente he recorrido el array con el map y por cada elemento le he indicado que genere un worker. Esto se podría hacer de más formas con un for normal o como queráis.
\nPara ver cuantos workers instancia vamos a añadir un log que indique que ha iniciado un worker, justo debajo de los server.on y cerramos el else
server.listen(port);\nserver.on('error', onError);\nserver.on('listening', onListening);\nconsole.log(`Worker ${process.pid} Started`)\n} //No nos olvidemos de cerrar el else en este punto\nBien creo que ya estamos listos para ejecutarlo, asi que ya sabéis
\nnpm start\nY si miramos el log
\n
\nA mi me ha arrancado 4 workers, esto dependerá del número de CPUs de cada equipo.
\nHablemos un poco más de como funciona un cluster en Node. En este caso específico se útiliza el método round-robin para repartir la carga entre los workers (lo mejor es que miréis el link que he puesto si queréis saber como funciona).
Tango el master como los workers producen eventos a los que nos podemos suscribir, al mismo estilo que hicimos con el event emitter en su momento, lo más fácil para que veais que eventos tenemos y que podemos hacer con ellos es que miréis la documentación oficial que como veréis viene con mucho código de ejemplo para que lo entendáis mejor.
\nTambién es posible que el master mande mensajes a los workers, veamoslo con un pequeño ejemplo. Dentro del if, es decir en el master añadimos
//Nos da una lista con los workers que tenemos\n const workersOnline = cluster.workers\n\n workersOnline[2].send(\"Hi ninjaWorker 2\")\n workersOnline[4].send(\"Hi ninjaWorker 4\")\nY en el else donde instanciamos los workers
\nprocess.on('message',(message)=>{\n console.log(`Soy un worker y este es el mensaje ${message}`)\n})\nNos suscribimos al evento message y devolvemos un mensaje en consola con el mensaje, fácil ¿verdad?, si ahora ejecutamos veremos como nos aparece el mensaje que hemos pasado a cada worker, y además cada vez que ejecutemos nos aparecerá en distinto momento ya que no sabemos cuando se instancia cada worker
\n
\n
Esto solo es un ejemplo si repasais la documentación veréis que podéis hacer multitud de cosas distintas ;)
\nBueno y hasta aquí la parte de Cluster, como habéis visto es relativamente sencillo y ya podéis usarlo tranquilamente en vuestros proyectos con NodeJS.
\nTambién (por el momento) aquí finalizamos la parte específica de Node ya lo siguiente que veremos será usandolo con MongoDB para trabajar con esta base de datos y crear una API Rest con un entorno más realista, así que empezaré con una nueva línea dedicada a MongoDB dentro de nada, espero que la parte de Node os haya parecido interesante y suficiente para poder realizar vuestros propios proyectos.
\nEstad atentos a los siguientes ;) nos vemooosssss un abrazoooorrrrr
\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y por fin hemos llegado a la última parte exclusiva de Node, ya lo siguiente que veremos con será, después de MongoDB, como usar las 2 cosas para hacer una API completa."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nAunque sea lo último no tiene porque dejar de ser interesante, ya que usando lo que veremos a continuación podemos aumentar el rendimiento de nuestra aplicación notablemente (eso sí, siempre dependiendo del entorno)."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n¿Y que es un Cluster? Bueno pues para hacerlo simple un cluster son 2 o más servicios, programas, ordenadores, servidores....que funcionan como uno solo. Bajo este concepto tendríamos varías opciones de configuración: balanceo de carga, alta disponibilidad.... Si queréis saber más siempre podéis mirar en la "},{"type":"element","tagName":"a","properties":{"href":"https://es.wikipedia.org/wiki/Cl%C3%BAster_(inform%C3%A1tica)"},"children":[{"type":"text","value":"Wiki"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nEn nuestro caso, NodeJS, nos permite tener varios "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"workers"}]},{"type":"text","value":" que trabajan por si solos, para hacerlo simple es como si iniciaramos varias veces nuestra aplicación de NodeJS y cada una trabajara por si sola (realmente tenemos un proceso "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"master"}]},{"type":"text","value":" que gestiona el resto y podemos pasar datos, comunicar eventos o lo que necesitemos entre los workers, entre los workers y el master y viceversa)."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPara configurarlo en nuestra aplicación de node tenemos que hacerlo antes de que inicie el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"server"}]},{"type":"text","value":" para "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"escuchar"}]},{"type":"text","value":" las peticiones por lo que vamosa nuestro proyecto de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Express"}]},{"type":"text","value":" y dentro de la carpeta "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"bin"}]},{"type":"text","value":" en el fichero "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"www"}]},{"type":"text","value":" hacemos lo siguiente:"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nBuscamos la linea donde tenemos el comentario "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Create server"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"/**\n * Create HTTP server.\n */\n\nvar server = http.createServer(app);\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y justo encima ponemos lo siguiente:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"const cluster = require('cluster')\n\nif (cluster.isMaster){\n \n console.log(`Master is running in process ${process.pid}`)\n const numCPUS = require('os').cpus()\n numCPUS.map(() => {\n cluster.fork()\n }) \n \n \n}else {\n\n/**\n * Create HTTP server.\n */\n\nvar server = http.createServer(app);\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como véis lo que hacemos es "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"requerir"}]},{"type":"text","value":" el módulo "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"cluster"}]},{"type":"text","value":" y básicamente es que si es el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Master"}]},{"type":"text","value":" comprobamos cuantas CPUs tenemos y generamos un "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"worker"}]},{"type":"text","value":" por cada una. El "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"numCpus"}]},{"type":"text","value":" lo que devuelve es un array donde cada elemento es información de cada CPU, yo simplemente he recorrido el array con el map y por cada elemento le he indicado que genere un "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"worker"}]},{"type":"text","value":". Esto se podría hacer de más formas con un "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"for"}]},{"type":"text","value":" normal o como queráis."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPara ver cuantos workers instancia vamos a añadir un log que indique que ha iniciado un worker, justo debajo de los "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"server.on"}]},{"type":"text","value":" y cerramos el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"else"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"server.listen(port);\nserver.on('error', onError);\nserver.on('listening', onListening);\nconsole.log(`Worker ${process.pid} Started`)\n} //No nos olvidemos de cerrar el else en este punto\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bien creo que ya estamos listos para ejecutarlo, asi que ya sabéis"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"npm start\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y si miramos el log"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-12-a-las-18.58.14.png","alt":"Workers Started"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nA mi me ha arrancado 4 "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"workers"}]},{"type":"text","value":", esto dependerá del número de CPUs de cada equipo."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nHablemos un poco más de como funciona un cluster en "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Node"}]},{"type":"text","value":". En este caso específico se útiliza el método "},{"type":"element","tagName":"a","properties":{"href":"https://es.wikipedia.org/wiki/Planificaci%C3%B3n_Round-robin"},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"round-robin"}]}]},{"type":"text","value":" para repartir la carga entre los workers (lo mejor es que miréis el link que he puesto si queréis saber como funciona)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Tango el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"master"}]},{"type":"text","value":" como los "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"workers"}]},{"type":"text","value":" producen eventos a los que nos podemos "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"suscribir"}]},{"type":"text","value":", al mismo estilo que hicimos con el "},{"type":"element","tagName":"a","properties":{"href":"/dont-stop-the-party-node-js-v/"},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"event emitter"}]}]},{"type":"text","value":" en su momento, lo más fácil para que veais que eventos tenemos y que podemos hacer con ellos es que miréis la "},{"type":"element","tagName":"a","properties":{"href":"https://nodejs.org/dist/latest-v8.x/docs/api/cluster.html"},"children":[{"type":"text","value":"documentación oficial"}]},{"type":"text","value":" que como veréis viene con mucho código de ejemplo para que lo entendáis mejor."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nTambién es posible que el master mande mensajes a los workers, veamoslo con un pequeño ejemplo. Dentro del "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"if"}]},{"type":"text","value":", es decir en el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"master"}]},{"type":"text","value":" añadimos"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":" //Nos da una lista con los workers que tenemos\n const workersOnline = cluster.workers\n\n workersOnline[2].send(\"Hi ninjaWorker 2\")\n workersOnline[4].send(\"Hi ninjaWorker 4\")\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y en el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"else"}]},{"type":"text","value":" donde instanciamos los "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"workers"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"process.on('message',(message)=>{\n console.log(`Soy un worker y este es el mensaje ${message}`)\n})\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Nos suscribimos al evento "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"message"}]},{"type":"text","value":" y devolvemos un mensaje en consola con el mensaje, fácil ¿verdad?, si ahora ejecutamos veremos como nos aparece el mensaje que hemos pasado a cada "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"worker"}]},{"type":"text","value":", y además cada vez que ejecutemos nos aparecerá en distinto momento ya que no sabemos cuando se instancia cada "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"worker"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-12-a-las-19.16.09.png","alt":"Master send event 1"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-12-a-las-19.16.34.png","alt":"Master send event 2"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto solo es un ejemplo si repasais la documentación veréis que podéis hacer multitud de cosas distintas ;)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bueno y hasta aquí la parte de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Cluster"}]},{"type":"text","value":", como habéis visto es relativamente sencillo y ya podéis usarlo tranquilamente en vuestros proyectos con "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"NodeJS"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"También (por el momento) aquí finalizamos la parte específica de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Node"}]},{"type":"text","value":" ya lo siguiente que veremos será usandolo con MongoDB para trabajar con esta base de datos y crear una "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"API Rest"}]},{"type":"text","value":" con un entorno más realista, así que empezaré con una nueva línea dedicada a "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"MongoDB"}]},{"type":"text","value":" dentro de nada, espero que la parte de Node os haya parecido interesante y suficiente para poder realizar vuestros propios proyectos."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Estad atentos a los siguientes ;) nos vemooosssss un abrazoooorrrrr"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[]},"featureImageSharp":{"base":"nodebaner-1.jpg","publicURL":"/static/ebae59fce798d71ce68bf2a304f1491f/nodebaner-1.jpg","imageMeta":{"width":1680,"height":420},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAME/9oADAMBAAIQAxAAAAGrMokzQT//xAAXEAEBAQEAAAAAAAAAAAAAAAACASIh/9oACAEBAAEFAgMKdU1//8QAFhEBAQEAAAAAAAAAAAAAAAAAAAEx/9oACAEDAQE/AamP/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAEx/9oACAECAQE/AV1//8QAFRABAQAAAAAAAAAAAAAAAAAAEHH/2gAIAQEABj8Cr//EABgQAQADAQAAAAAAAAAAAAAAAAEAETEh/9oACAEBAAE/Ido1iddq0QhE/9oADAMBAAIAAwAAABDz/wD/xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QbrNxf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxAgav/EABgQAQADAQAAAAAAAAAAAAAAAAEAETFx/9oACAEBAAE/ECLXUGFQ03NnlQ0Zc//Z","aspectRatio":3.977272727272727,"src":"/static/ebae59fce798d71ce68bf2a304f1491f/ea4ab/nodebaner-1.jpg","srcSet":"/static/ebae59fce798d71ce68bf2a304f1491f/477ba/nodebaner-1.jpg 175w,\n/static/ebae59fce798d71ce68bf2a304f1491f/06776/nodebaner-1.jpg 350w,\n/static/ebae59fce798d71ce68bf2a304f1491f/ea4ab/nodebaner-1.jpg 700w,\n/static/ebae59fce798d71ce68bf2a304f1491f/3055e/nodebaner-1.jpg 1050w,\n/static/ebae59fce798d71ce68bf2a304f1491f/eff08/nodebaner-1.jpg 1400w,\n/static/ebae59fce798d71ce68bf2a304f1491f/34c3a/nodebaner-1.jpg 1680w","srcWebp":"/static/ebae59fce798d71ce68bf2a304f1491f/89afa/nodebaner-1.webp","srcSetWebp":"/static/ebae59fce798d71ce68bf2a304f1491f/9fca7/nodebaner-1.webp 175w,\n/static/ebae59fce798d71ce68bf2a304f1491f/37a4e/nodebaner-1.webp 350w,\n/static/ebae59fce798d71ce68bf2a304f1491f/89afa/nodebaner-1.webp 700w,\n/static/ebae59fce798d71ce68bf2a304f1491f/78e7a/nodebaner-1.webp 1050w,\n/static/ebae59fce798d71ce68bf2a304f1491f/03d34/nodebaner-1.webp 1400w,\n/static/ebae59fce798d71ce68bf2a304f1491f/41aa5/nodebaner-1.webp 1680w","sizes":"(max-width: 700px) 100vw, 700px"}}}}},{"node":{"id":"Ghost__Post__5a338158333e0f134c248f38","title":"Don't stop the party: Node JS(XII) Promesas","slug":"dont-stop-the-party-node-js-xii-promesas","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/nodebaner.jpg","excerpt":"Bien, en este post vamos a ver algunos extras que no son exclusivos de Node pero\nrealmente son muy útiles.\n\nPromesas\nLas promesas, si no estoy mal, se añadieron oficialmente en JS a partir de\nES6...y por resumir un poco, son como callbacks de finalización pero en bonito,\nexplicome....cuando necesitamos encadenar métodos que continenen callbacks\npodemos terminar con un código de este estilo\n\n\nRealmente es raro que nuestro código termine así, pero realmente esa es la\ntendencia , ¿verdad?.. bueno p","custom_excerpt":null,"visibility":"public","created_at_pretty":"3 Oct 2017","published_at_pretty":"12 Oct 2017","updated_at_pretty":"22 Jan 2018","created_at":"2017-10-03T21:00:17.000+02:00","published_at":"2017-10-12T10:10:00.000+02:00","updated_at":"2018-01-22T09:34:34.000+01:00","meta_title":"Don't stop the party: Node JS(XII) Promesas","meta_description":"Hablaremos de las Promesas que son parte de todo el stack de JavaScript y que nos serán muy útiles en nuestros desarrollos con NodeJS","og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"Perfil.jpg","publicURL":"/static/b0de6281fb28a266510b3b09b9243e5a/Perfil.jpg","imageMeta":{"width":307,"height":307},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAUDBAb/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGzw6zC6zHn+cLYP//EAB0QAAICAQUAAAAAAAAAAAAAAAEDAAIEEyEiIzL/2gAIAQEAAQUCifca8KgcKWVfUpkHsG5pxX//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAdEAACAgEFAAAAAAAAAAAAAAAAARARcQISIUFR/9oACAEBAAY/AhU88xkb7N06a8P/xAAcEAEAAwEAAwEAAAAAAAAAAAABABEhMUFRYXH/2gAIAQEAAT8hR2pq40aqb+xIAeXibhW9JXr8joF4TBcSNe0//9oADAMBAAIAAwAAABDzDwD/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAcEAEAAgIDAQAAAAAAAAAAAAABABEhUTFhcfD/2gAIAQEAAT8QyItrELaTlatLwU63MvEW6vUNdy4LZQDn7iVApV9VLtANdWwKkuYq4Er1VZ//2Q==","aspectRatio":1,"src":"/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg","srcSet":"/static/b0de6281fb28a266510b3b09b9243e5a/f340b/Perfil.jpg 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/22d64/Perfil.jpg 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/aa249/Perfil.jpg 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/0dc33/Perfil.jpg 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/60667/Perfil.jpg 307w","srcWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp","srcSetWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/59cda/Perfil.webp 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/7da75/Perfil.webp 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f282e/Perfil.webp 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/a7b21/Perfil.webp 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f59af/Perfil.webp 307w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"nodejs","url":"https://jlgarcia.fulldev.ninja/tag/nodejs/","name":"nodejs","visibility":"public","feature_image":null,"description":null,"meta_title":"NodeJS Ninjas","meta_description":"Aprenderemos desde lo básico este framework de JS para backend, muy bueno en concurrencia y en API Rest y que forma parte del stack MEAN o MERN.","featureImageSharp":null},"tags":[{"slug":"nodejs","url":"https://jlgarcia.fulldev.ninja/tag/nodejs/","name":"nodejs","visibility":"public","feature_image":null,"description":null,"meta_title":"NodeJS Ninjas","meta_description":"Aprenderemos desde lo básico este framework de JS para backend, muy bueno en concurrencia y en API Rest y que forma parte del stack MEAN o MERN.","featureImageSharp":null}],"plaintext":"Bien, en este post vamos a ver algunos extras que no son exclusivos de Node pero\nrealmente son muy útiles.\n\nPromesas\nLas promesas, si no estoy mal, se añadieron oficialmente en JS a partir de\nES6...y por resumir un poco, son como callbacks de finalización pero en bonito,\nexplicome....cuando necesitamos encadenar métodos que continenen callbacks\npodemos terminar con un código de este estilo\n\n\nRealmente es raro que nuestro código termine así, pero realmente esa es la\ntendencia , ¿verdad?.. bueno pues una de las cosas que nos ayudan a mejorar las \npromesas es esa. Por definir concretamente:\nUna promesa es un objeto que, si todavía no ha terminado, aseguramos que se\ncompletará más adelante.\n\nSupongo que con esa frase queda más claro todavía qué es una promesa (y también\nsu nombre jeje). Las promesas tienen tres estados en su ciclo de vida:\n\n * Pendiente(pending): Como su nombre indica todavía está sin cumplir y cambiará\n de estado en algún momento.\n * Completada correctamente(Fullfilled/resolve): Es decir, ha hecho su trabajo\n correctamente y ha devuelto un valor.\n * Rechazada(rejected): En su proceso de ejecución ha dado algún tipo de error y\n ha sido completada con error devolviendonos la razón.\n\nVeamos ahora como podemos crear una promesa\n\nvar prom = new Promise(function(resolve,reject){\n})\n\n\nBásicamente creamos un nuevo objeto Promise el cual tiene una función que recibe\ndos parámetros, con un nombre bastante intuitivo por cierto:\n\n * resolve: Llamaremos a resolve cuando todo haya ido bien y le pasamos el\n resultado que recibirá la siguiente promesa o función.\n * reject: Llamaremos a reject cuando tengamos un error, al cual le pasaremos el\n error.\n\nY, ¿como usamos esto? Bastante sencillo\n\nprom.then(function(resultado){\n //Lo que queramos hacer con el resultado\n}).catch(function(error){\n //Lo que queramos hacer si hemos recibido error\n});\n\n\nEsto lo que hace es ejecutar la promesa que hemos creado y a continuación (then)\nse ejecutará la función dentro del then donde resultado es el parámetro que\nhemos recibido desde la promesa con resolve. En el caso de que algo hubiera\nfallado o el resultado fuera insatisfactorio ejecutariamos reject con el error o\nla información que quisieramos, la cual capturaría el primer catch que\nencontrará la cadena de promesas. Por si no os lo habéis imaginado nosotros\npodemos poner todas las promesas y catch que queramos\n\nprom.then().then().then().catch().then().catch()\n\n\nY en el orden que las hemos escritor se irian ejecutando, y también según ese\norden el primer catch que se encontrara sería el que respondería en caso de\ntener un resultado reject.\nHagamos un ejemplo encadenando promesas y de paso le ponemos algún catch. Vamos\na crear un método nuevo junto con el que ya teníamos que lo vamos a modificar,\nla idea es que cada promesa vaya encadenando un String hasta mostrarlo al final,\naunque en este caso lo que haremos será mostrarlo en cada paso para que se vea\nque esta haciendo.\nPrimero cambiamos nuestra función sleep\n\n//Seria una funcion que devuelve una promesa\nfunction sleep(ms,hero) {\n return new Promise((resolve,reject) => {\n setTimeout(() => {\n resolve(\"La liga de la justicia: \" + hero)\n }, ms);\n });\n}\n\nconst prom = sleep(2000, \"Superman\");\n\n\nLe pasamos el parámetro hero y devolvemos un string. A continuación creamos otro\nmétodo que vaya encadenando\n\nfunction heros(result, hero){\n \n return new Promise((resolve,reject) => {\n\n /*if (hero === \"Green Latern\"){\n reject(\"No aparece esta vez\")\n }*/\n\n console.log(result)\n setTimeout(()=> { \n resolve(result + \" \" + hero)\n },2000)\n })\n}\n\n\nDe momento dejamos comentada la parte de reject para ver el resultado. Como véis\nla función recibe un parámetro result (este primer parámetro sería lo que nos\ndevuelve la promesa en caso de resolve) y también un parámetro extra con el\nnombre de otro hero y luego simplemente lo juntamos todo para que lo devuelva en\n2 segundos.\nYa tenemos nuestros métodos ahora vamos a encadenar las promesas\n\nprom\n.then((result) => {\n return heros(result, \"Batman\")\n})\n.then((result) => {\n return heros(result, \"Green Latern\") \n})\n.then((result) => {\n return heros(result, \"Wonder Woman\")\n})\n.catch((err) => {\n console.log(err)\n})\n.then((result) => {\n return heros(result, \"Aquaman\")\n})\n.then((result)=> { \n console.log(result)\n})\n\n\nDe paso le he metido un catch para probar el error más adelante. Fijáos que lo\nque hacemos es retornar dentro de una función anónima, que es la que recibe \nresult, la promesa resultante de nuestra función heros, si no necesitaramos \nresult no tendríamos porque meterlo dentro de otra función, bastaría solo con\nusar heros(\"New Hero\"). Bueno y ahora si lo probamos\n\nVemos como cada 2 segundos nos aparece el string con el nuevo héroe.\nPor último vamos a probar el catch para que veais como funciona, lo que haremos\nserá descomentar el código que tenía reject y ya podríamos probarlo.\n\nVemos que cuando le toca el turno a Green Latern pasa por el catch pero no se\ndetiene y continua......eso es porque tenemos que cambiar como funciona el catch \nya que solo hemos puesto un console.log para que se vea que pasa por allí, para\nhacer que se detenga podemos poner\n\ncatch((err) => {\n throw err \n})\n\n\nY ahora sí tendríamos un error al estilo promesas\n\n\nCon promesas tenemos también otras opciones, por ejemplo podemos pasar un array\nde promesas y cuando terminen todas pasa al then o al catch según si ha dado\nerror o no.\n\nPromise.all(arrayPromises)\n .then((result) =>{console.log(result)})\n .catch((error){})\n\n\nCon Promise.all, pasamos una array de promesas y esperamos a que terminen todas,\ntenemos también la opción de que pase al then cuando responda la primera\n\nPromise.race([arrayPromises])\n .then((result) => { console.log(\"La más rápida ha sido\" + result)})\n\n\nEste concepto es útil por ejemplo si tenemos varios servidores de base de datos,\nhacemos las llamadas pertinentes en cada una de las promesas y en cuanto uno\ntermine ya tenemos un resultado, lo que nos permite responder lo más rápido\nposible ignorando si un servidor tiene más carga que otro.\n\nAhora pasemos al siguiente nivel en las promesas, no en dificultad, pero si en\nun extra o forma de usarlas que, si no me equivoco, salió en ES7 y para esto es\nnecesario tener Node actualizado a la última versión o por lo menos en la 7.6\n(creo), con node -v podéis ver en que versión estáis y actualizar si lo\nnecesitáis.\n\nConcretamente vamos a hablar de async/await. Estos nuevos métodos nos ayudan un\npoco con la gestión de las promesas, y de los callbacks por supuesto. Lo que\nhacemos con await es esperar a que una función termine y parece ser que como \nbest practice(o que tiene que ser si o sí más bien) tenemos que hacer ese código\nasíncrono asi que nos han puesto async para facilitarnos esa tarea. Y como\nfunciona esto? Pues vamos a ver un ejemplo sencillo con lo que más o menos\nteníamos antes.\nPartimos de esto\n\n'use strict'\n\n//Seria una funcion que devuelve una promesa\nfunction sleep(ms,hero) {\n return new Promise((resolve,reject) => {\n setTimeout(() => {\n resolve(\"La liga de la justicia: \" + hero)\n \n }, ms);\n });\n}\n\n\nSe supone que tenemos que usar await para que el código se espere a que termine\nla promesa y meterlo todo dentro de async...pues vamos\n\nasync function asyncPromise(){\n console.log(\"Empezamos a contar\")\n return await sleep(2000,\"Superman\")\n}\n\n\nComo véis simplemente hemos puesto await al principio de la ejecución de nuestra\npromesa, la hemos retornado porque si no, no obtendríamos resultado y lo hemos\nmetido todo dentro de una función que empieza con async. Ahora vamos a usarlo\ncomo si de una promesa normal se tratase\n\nasyncPromise().then((result) => console.log(result))\n\n\nBien ya tenemos todo, ahora vamos a ejecutarlo\n\n\nComo habréis podido comprobar nos ha aparecido el log indicando que empieza y a\nlos 2 segundos nos ha mostrado el resultado como si de una promesa normal se\ntratase. Este tipo de estructura realmente nos puede ahorrar el uso de callbacks\nde finalización o similar. Esto es solo un ejemplo de lo que se puede hacer con\nestas opciones \"nuevas\" de node, pero se puede usar de otras muchas maneras, el\nlímite lo ponéis vosotros de como usar esto.\n\nCreo que por el momento vamos a dejar las promesas (o lo relacionado con ellas)\naquí, en algún otro momento volveremos a trastear con ellas pero creo que hemos\nvisto más o menos como se tienen que usar y en que nos pueden ayudar. Creo que\nsolo me quedaría un mini-post más de extras de Node y nos pondríamos ya con\nMongoDB.\n\nNos veeeemosssss un abrazooorrrrr","html":"Bien, en este post vamos a ver algunos extras que no son exclusivos de Node pero realmente son muy útiles.
\nLas promesas, si no estoy mal, se añadieron oficialmente en JS a partir de ES6...y por resumir un poco, son como callbacks de finalización pero en bonito, explicome....cuando necesitamos encadenar métodos que continenen callbacks podemos terminar con un código de este estilo
\n![\"callBack_hell\"](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/callBack_hell.gif\")
Realmente es raro que nuestro código termine así, pero realmente esa es la tendencia , ¿verdad?.. bueno pues una de las cosas que nos ayudan a mejorar las promesas es esa. Por definir concretamente:
\nUna promesa es un objeto que, si todavía no ha terminado, aseguramos que se completará más adelante.
Supongo que con esa frase queda más claro todavía qué es una promesa (y también su nombre jeje). Las promesas tienen tres estados en su ciclo de vida:
\nVeamos ahora como podemos crear una promesa
\nvar prom = new Promise(function(resolve,reject){\n})\nBásicamente creamos un nuevo objeto Promise el cual tiene una función que recibe dos parámetros, con un nombre bastante intuitivo por cierto:
\nY, ¿como usamos esto? Bastante sencillo
\nprom.then(function(resultado){\n //Lo que queramos hacer con el resultado\n}).catch(function(error){\n //Lo que queramos hacer si hemos recibido error\n});\nEsto lo que hace es ejecutar la promesa que hemos creado y a continuación (then) se ejecutará la función dentro del then donde resultado es el parámetro que hemos recibido desde la promesa con resolve. En el caso de que algo hubiera fallado o el resultado fuera insatisfactorio ejecutariamos reject con el error o la información que quisieramos, la cual capturaría el primer catch que encontrará la cadena de promesas. Por si no os lo habéis imaginado nosotros podemos poner todas las promesas y catch que queramos
\nprom.then().then().then().catch().then().catch()\nY en el orden que las hemos escritor se irian ejecutando, y también según ese orden el primer catch que se encontrara sería el que respondería en caso de tener un resultado reject.
\nHagamos un ejemplo encadenando promesas y de paso le ponemos algún catch. Vamos a crear un método nuevo junto con el que ya teníamos que lo vamos a modificar, la idea es que cada promesa vaya encadenando un String hasta mostrarlo al final, aunque en este caso lo que haremos será mostrarlo en cada paso para que se vea que esta haciendo.
\nPrimero cambiamos nuestra función sleep
//Seria una funcion que devuelve una promesa\nfunction sleep(ms,hero) {\n return new Promise((resolve,reject) => {\n setTimeout(() => {\n resolve("La liga de la justicia: " + hero)\n }, ms);\n });\n}\n\nconst prom = sleep(2000, "Superman");\nLe pasamos el parámetro hero y devolvemos un string. A continuación creamos otro método que vaya encadenando
\nfunction heros(result, hero){\n \n return new Promise((resolve,reject) => {\n\n /*if (hero === "Green Latern"){\n reject("No aparece esta vez")\n }*/\n\n console.log(result)\n setTimeout(()=> { \n resolve(result + " " + hero)\n },2000)\n })\n}\nDe momento dejamos comentada la parte de reject para ver el resultado. Como véis la función recibe un parámetro result (este primer parámetro sería lo que nos devuelve la promesa en caso de resolve) y también un parámetro extra con el nombre de otro hero y luego simplemente lo juntamos todo para que lo devuelva en 2 segundos.
\nYa tenemos nuestros métodos ahora vamos a encadenar las promesas
prom\n.then((result) => {\n return heros(result, "Batman")\n})\n.then((result) => {\n return heros(result, "Green Latern") \n})\n.then((result) => {\n return heros(result, "Wonder Woman")\n})\n.catch((err) => {\n console.log(err)\n})\n.then((result) => {\n return heros(result, "Aquaman")\n})\n.then((result)=> { \n console.log(result)\n})\nDe paso le he metido un catch para probar el error más adelante. Fijáos que lo que hacemos es retornar dentro de una función anónima, que es la que recibe result, la promesa resultante de nuestra función heros, si no necesitaramos result no tendríamos porque meterlo dentro de otra función, bastaría solo con usar heros("New Hero"). Bueno y ahora si lo probamos
\n![\"Example](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-09-a-las-8.58.17.png\")
\nVemos como cada 2 segundos nos aparece el string con el nuevo héroe.
\nPor último vamos a probar el catch para que veais como funciona, lo que haremos será descomentar el código que tenía reject y ya podríamos probarlo.
\n![\"Example](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-09-a-las-9.01.28.png\")
\nVemos que cuando le toca el turno a Green Latern pasa por el catch pero no se detiene y continua......eso es porque tenemos que cambiar como funciona el catch ya que solo hemos puesto un console.log para que se vea que pasa por allí, para hacer que se detenga podemos poner
catch((err) => {\n throw err \n})\nY ahora sí tendríamos un error al estilo promesas
\n![\"Promises](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-09-a-las-9.09.06.png\")
Con promesas tenemos también otras opciones, por ejemplo podemos pasar un array de promesas y cuando terminen todas pasa al then o al catch según si ha dado error o no.
\nPromise.all(arrayPromises)\n .then((result) =>{console.log(result)})\n .catch((error){})\nCon Promise.all, pasamos una array de promesas y esperamos a que terminen todas, tenemos también la opción de que pase al then cuando responda la primera
\nPromise.race([arrayPromises])\n .then((result) => { console.log("La más rápida ha sido" + result)})\nEste concepto es útil por ejemplo si tenemos varios servidores de base de datos, hacemos las llamadas pertinentes en cada una de las promesas y en cuanto uno termine ya tenemos un resultado, lo que nos permite responder lo más rápido posible ignorando si un servidor tiene más carga que otro.
\nAhora pasemos al siguiente nivel en las promesas, no en dificultad, pero si en un extra o forma de usarlas que, si no me equivoco, salió en ES7 y para esto es necesario tener Node actualizado a la última versión o por lo menos en la 7.6 (creo), con node -v podéis ver en que versión estáis y actualizar si lo necesitáis.
\nConcretamente vamos a hablar de async/await. Estos nuevos métodos nos ayudan un poco con la gestión de las promesas, y de los callbacks por supuesto. Lo que hacemos con await es esperar a que una función termine y parece ser que como best practice(o que tiene que ser si o sí más bien) tenemos que hacer ese código asíncrono asi que nos han puesto async para facilitarnos esa tarea. Y como funciona esto? Pues vamos a ver un ejemplo sencillo con lo que más o menos teníamos antes.
\nPartimos de esto
'use strict'\n\n//Seria una funcion que devuelve una promesa\nfunction sleep(ms,hero) {\n return new Promise((resolve,reject) => {\n setTimeout(() => {\n resolve("La liga de la justicia: " + hero)\n \n }, ms);\n });\n}\nSe supone que tenemos que usar await para que el código se espere a que termine la promesa y meterlo todo dentro de async...pues vamos
\nasync function asyncPromise(){\n console.log("Empezamos a contar")\n return await sleep(2000,"Superman")\n}\nComo véis simplemente hemos puesto await al principio de la ejecución de nuestra promesa, la hemos retornado porque si no, no obtendríamos resultado y lo hemos metido todo dentro de una función que empieza con async. Ahora vamos a usarlo como si de una promesa normal se tratase
\nasyncPromise().then((result) => console.log(result))\nBien ya tenemos todo, ahora vamos a ejecutarlo
\n![\"Async](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-10-a-las-21.35.32.png\")
Como habréis podido comprobar nos ha aparecido el log indicando que empieza y a los 2 segundos nos ha mostrado el resultado como si de una promesa normal se tratase. Este tipo de estructura realmente nos puede ahorrar el uso de callbacks de finalización o similar. Esto es solo un ejemplo de lo que se puede hacer con estas opciones "nuevas" de node, pero se puede usar de otras muchas maneras, el límite lo ponéis vosotros de como usar esto.
\nCreo que por el momento vamos a dejar las promesas (o lo relacionado con ellas) aquí, en algún otro momento volveremos a trastear con ellas pero creo que hemos visto más o menos como se tienen que usar y en que nos pueden ayudar. Creo que solo me quedaría un mini-post más de extras de Node y nos pondríamos ya con MongoDB.
\nNos veeeemosssss un abrazooorrrrr
\n","url":"https://jlgarcia.fulldev.ninja/dont-stop-the-party-node-js-xii-promesas/","canonical_url":null,"uuid":"df54bc2b-2b01-4415-a567-2b5d30f1f162","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"59d3de4158177700014ca384","reading_time":6,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"Bien, en este post vamos a ver algunos extras que no son exclusivos de Node pero realmente son muy útiles.
\nLas promesas, si no estoy mal, se añadieron oficialmente en JS a partir de ES6...y por resumir un poco, son como callbacks de finalización pero en bonito, explicome....cuando necesitamos encadenar métodos que continenen callbacks podemos terminar con un código de este estilo
\n
Realmente es raro que nuestro código termine así, pero realmente esa es la tendencia , ¿verdad?.. bueno pues una de las cosas que nos ayudan a mejorar las promesas es esa. Por definir concretamente:
\nUna promesa es un objeto que, si todavía no ha terminado, aseguramos que se completará más adelante.
Supongo que con esa frase queda más claro todavía qué es una promesa (y también su nombre jeje). Las promesas tienen tres estados en su ciclo de vida:
\nVeamos ahora como podemos crear una promesa
\nvar prom = new Promise(function(resolve,reject){\n})\nBásicamente creamos un nuevo objeto Promise el cual tiene una función que recibe dos parámetros, con un nombre bastante intuitivo por cierto:
\nY, ¿como usamos esto? Bastante sencillo
\nprom.then(function(resultado){\n //Lo que queramos hacer con el resultado\n}).catch(function(error){\n //Lo que queramos hacer si hemos recibido error\n});\nEsto lo que hace es ejecutar la promesa que hemos creado y a continuación (then) se ejecutará la función dentro del then donde resultado es el parámetro que hemos recibido desde la promesa con resolve. En el caso de que algo hubiera fallado o el resultado fuera insatisfactorio ejecutariamos reject con el error o la información que quisieramos, la cual capturaría el primer catch que encontrará la cadena de promesas. Por si no os lo habéis imaginado nosotros podemos poner todas las promesas y catch que queramos
\nprom.then().then().then().catch().then().catch()\nY en el orden que las hemos escritor se irian ejecutando, y también según ese orden el primer catch que se encontrara sería el que respondería en caso de tener un resultado reject.
\nHagamos un ejemplo encadenando promesas y de paso le ponemos algún catch. Vamos a crear un método nuevo junto con el que ya teníamos que lo vamos a modificar, la idea es que cada promesa vaya encadenando un String hasta mostrarlo al final, aunque en este caso lo que haremos será mostrarlo en cada paso para que se vea que esta haciendo.
\nPrimero cambiamos nuestra función sleep
//Seria una funcion que devuelve una promesa\nfunction sleep(ms,hero) {\n return new Promise((resolve,reject) => {\n setTimeout(() => {\n resolve(\"La liga de la justicia: \" + hero)\n }, ms);\n });\n}\n\nconst prom = sleep(2000, \"Superman\");\nLe pasamos el parámetro hero y devolvemos un string. A continuación creamos otro método que vaya encadenando
\nfunction heros(result, hero){\n \n return new Promise((resolve,reject) => {\n\n /*if (hero === \"Green Latern\"){\n reject(\"No aparece esta vez\")\n }*/\n\n console.log(result)\n setTimeout(()=> { \n resolve(result + \" \" + hero)\n },2000)\n })\n}\nDe momento dejamos comentada la parte de reject para ver el resultado. Como véis la función recibe un parámetro result (este primer parámetro sería lo que nos devuelve la promesa en caso de resolve) y también un parámetro extra con el nombre de otro hero y luego simplemente lo juntamos todo para que lo devuelva en 2 segundos.
\nYa tenemos nuestros métodos ahora vamos a encadenar las promesas
prom\n.then((result) => {\n return heros(result, \"Batman\")\n})\n.then((result) => {\n return heros(result, \"Green Latern\") \n})\n.then((result) => {\n return heros(result, \"Wonder Woman\")\n})\n.catch((err) => {\n console.log(err)\n})\n.then((result) => {\n return heros(result, \"Aquaman\")\n})\n.then((result)=> { \n console.log(result)\n})\nDe paso le he metido un catch para probar el error más adelante. Fijáos que lo que hacemos es retornar dentro de una función anónima, que es la que recibe result, la promesa resultante de nuestra función heros, si no necesitaramos result no tendríamos porque meterlo dentro de otra función, bastaría solo con usar heros(\"New Hero\"). Bueno y ahora si lo probamos
\n
\nVemos como cada 2 segundos nos aparece el string con el nuevo héroe.
\nPor último vamos a probar el catch para que veais como funciona, lo que haremos será descomentar el código que tenía reject y ya podríamos probarlo.
\n
\nVemos que cuando le toca el turno a Green Latern pasa por el catch pero no se detiene y continua......eso es porque tenemos que cambiar como funciona el catch ya que solo hemos puesto un console.log para que se vea que pasa por allí, para hacer que se detenga podemos poner
catch((err) => {\n throw err \n})\nY ahora sí tendríamos un error al estilo promesas
\n
Con promesas tenemos también otras opciones, por ejemplo podemos pasar un array de promesas y cuando terminen todas pasa al then o al catch según si ha dado error o no.
\nPromise.all(arrayPromises)\n .then((result) =>{console.log(result)})\n .catch((error){})\nCon Promise.all, pasamos una array de promesas y esperamos a que terminen todas, tenemos también la opción de que pase al then cuando responda la primera
\nPromise.race([arrayPromises])\n .then((result) => { console.log(\"La más rápida ha sido\" + result)})\nEste concepto es útil por ejemplo si tenemos varios servidores de base de datos, hacemos las llamadas pertinentes en cada una de las promesas y en cuanto uno termine ya tenemos un resultado, lo que nos permite responder lo más rápido posible ignorando si un servidor tiene más carga que otro.
\nAhora pasemos al siguiente nivel en las promesas, no en dificultad, pero si en un extra o forma de usarlas que, si no me equivoco, salió en ES7 y para esto es necesario tener Node actualizado a la última versión o por lo menos en la 7.6 (creo), con node -v podéis ver en que versión estáis y actualizar si lo necesitáis.
\nConcretamente vamos a hablar de async/await. Estos nuevos métodos nos ayudan un poco con la gestión de las promesas, y de los callbacks por supuesto. Lo que hacemos con await es esperar a que una función termine y parece ser que como best practice(o que tiene que ser si o sí más bien) tenemos que hacer ese código asíncrono asi que nos han puesto async para facilitarnos esa tarea. Y como funciona esto? Pues vamos a ver un ejemplo sencillo con lo que más o menos teníamos antes.
\nPartimos de esto
'use strict'\n\n//Seria una funcion que devuelve una promesa\nfunction sleep(ms,hero) {\n return new Promise((resolve,reject) => {\n setTimeout(() => {\n resolve(\"La liga de la justicia: \" + hero)\n \n }, ms);\n });\n}\nSe supone que tenemos que usar await para que el código se espere a que termine la promesa y meterlo todo dentro de async...pues vamos
\nasync function asyncPromise(){\n console.log(\"Empezamos a contar\")\n return await sleep(2000,\"Superman\")\n}\nComo véis simplemente hemos puesto await al principio de la ejecución de nuestra promesa, la hemos retornado porque si no, no obtendríamos resultado y lo hemos metido todo dentro de una función que empieza con async. Ahora vamos a usarlo como si de una promesa normal se tratase
\nasyncPromise().then((result) => console.log(result))\nBien ya tenemos todo, ahora vamos a ejecutarlo
\n
Como habréis podido comprobar nos ha aparecido el log indicando que empieza y a los 2 segundos nos ha mostrado el resultado como si de una promesa normal se tratase. Este tipo de estructura realmente nos puede ahorrar el uso de callbacks de finalización o similar. Esto es solo un ejemplo de lo que se puede hacer con estas opciones \"nuevas\" de node, pero se puede usar de otras muchas maneras, el límite lo ponéis vosotros de como usar esto.
\nCreo que por el momento vamos a dejar las promesas (o lo relacionado con ellas) aquí, en algún otro momento volveremos a trastear con ellas pero creo que hemos visto más o menos como se tienen que usar y en que nos pueden ayudar. Creo que solo me quedaría un mini-post más de extras de Node y nos pondríamos ya con MongoDB.
\nNos veeeemosssss un abrazooorrrrr
\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bien, en este post vamos a ver algunos extras que no son exclusivos de Node pero realmente son muy útiles."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"promesas"},"children":[{"type":"text","value":"Promesas"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Las promesas, si no estoy mal, se añadieron oficialmente en JS a partir de ES6...y por resumir un poco, son como callbacks de finalización pero en bonito, explicome....cuando necesitamos encadenar métodos que continenen callbacks podemos terminar con un código de este estilo"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/callBack_hell.gif","alt":"callBack_hell"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Realmente es raro que nuestro código termine así, pero realmente esa es la tendencia , ¿verdad?.. bueno pues una de las cosas que nos ayudan a mejorar las "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"promesas"}]},{"type":"text","value":" es esa. Por definir concretamente:"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Una promesa es un objeto que, si todavía no ha terminado, aseguramos que se completará más adelante"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Supongo que con esa frase queda más claro todavía qué es una promesa (y también su nombre jeje). Las "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"promesas"}]},{"type":"text","value":" tienen tres estados en su ciclo de vida:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Pendiente(pending)"}]},{"type":"text","value":": Como su nombre indica todavía está sin cumplir y cambiará de estado en algún momento."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Completada correctamente(Fullfilled/resolve)"}]},{"type":"text","value":": Es decir, ha hecho su trabajo correctamente y ha devuelto un valor."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Rechazada(rejected)"}]},{"type":"text","value":": En su proceso de ejecución ha dado algún tipo de error y ha sido completada con error devolviendonos la razón."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Veamos ahora como podemos crear una promesa"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var prom = new Promise(function(resolve,reject){\n})\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Básicamente creamos un nuevo objeto "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Promise"}]},{"type":"text","value":" el cual tiene una función que recibe dos parámetros, con un nombre bastante intuitivo por cierto:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"resolve"}]},{"type":"text","value":": Llamaremos a resolve cuando todo haya ido bien y le pasamos el resultado que recibirá la siguiente "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"promesa"}]},{"type":"text","value":" o función."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"reject"}]},{"type":"text","value":": Llamaremos a "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"reject"}]},{"type":"text","value":" cuando tengamos un error, al cual le pasaremos el error."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y, ¿como usamos esto? Bastante sencillo"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"prom.then(function(resultado){\n //Lo que queramos hacer con el resultado\n}).catch(function(error){\n //Lo que queramos hacer si hemos recibido error\n});\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto lo que hace es ejecutar la promesa que hemos creado y a continuación ("},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"then"}]},{"type":"text","value":") se ejecutará la función dentro del "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"then"}]},{"type":"text","value":" donde "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"resultado"}]},{"type":"text","value":" es el parámetro que hemos recibido desde la promesa con "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"resolve"}]},{"type":"text","value":". En el caso de que algo hubiera fallado o el resultado fuera insatisfactorio ejecutariamos "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"reject"}]},{"type":"text","value":" con el error o la información que quisieramos, la cual capturaría el primer catch que encontrará la cadena de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"promesas"}]},{"type":"text","value":". Por si no os lo habéis imaginado nosotros podemos poner todas las promesas y catch que queramos"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"prom.then().then().then().catch().then().catch()\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y en el orden que las hemos escritor se irian ejecutando, y también según ese orden el primer catch que se encontrara sería el que respondería en caso de tener un resultado "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"reject"}]},{"type":"text","value":"."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nHagamos un ejemplo encadenando promesas y de paso le ponemos algún "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"catch"}]},{"type":"text","value":". Vamos a crear un método nuevo junto con el que ya teníamos que lo vamos a modificar, la idea es que cada promesa vaya encadenando un String hasta mostrarlo al final, aunque en este caso lo que haremos será mostrarlo en cada paso para que se vea que esta haciendo."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPrimero cambiamos nuestra función "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"sleep"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"//Seria una funcion que devuelve una promesa\nfunction sleep(ms,hero) {\n return new Promise((resolve,reject) => {\n setTimeout(() => {\n resolve(\"La liga de la justicia: \" + hero)\n }, ms);\n });\n}\n\nconst prom = sleep(2000, \"Superman\");\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Le pasamos el parámetro "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"hero"}]},{"type":"text","value":" y devolvemos un string. A continuación creamos otro método que vaya encadenando"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"function heros(result, hero){\n \n return new Promise((resolve,reject) => {\n\n /*if (hero === \"Green Latern\"){\n reject(\"No aparece esta vez\")\n }*/\n\n console.log(result)\n setTimeout(()=> { \n resolve(result + \" \" + hero)\n },2000)\n })\n}\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"De momento dejamos comentada la parte de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"reject"}]},{"type":"text","value":" para ver el resultado. Como véis la función recibe un parámetro "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"result"}]},{"type":"text","value":" (este primer parámetro sería lo que nos devuelve la promesa en caso de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"resolve"}]},{"type":"text","value":") y también un parámetro extra con el nombre de otro "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"hero"}]},{"type":"text","value":" y luego simplemente lo juntamos todo para que lo devuelva en 2 segundos."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nYa tenemos nuestros métodos ahora vamos a encadenar las promesas"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"prom\n.then((result) => {\n return heros(result, \"Batman\")\n})\n.then((result) => {\n return heros(result, \"Green Latern\") \n})\n.then((result) => {\n return heros(result, \"Wonder Woman\")\n})\n.catch((err) => {\n console.log(err)\n})\n.then((result) => {\n return heros(result, \"Aquaman\")\n})\n.then((result)=> { \n console.log(result)\n})\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"De paso le he metido un catch para probar el error más adelante. Fijáos que lo que hacemos es retornar dentro de una función anónima, que es la que recibe "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"result"}]},{"type":"text","value":", la promesa resultante de nuestra función "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"heros"}]},{"type":"text","value":", si no necesitaramos "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"result"}]},{"type":"text","value":" no tendríamos porque meterlo dentro de otra función, bastaría solo con usar "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"heros(\"New Hero\")"}]},{"type":"text","value":". Bueno y ahora si lo probamos"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-09-a-las-8.58.17.png","alt":"Example Multiple promises"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nVemos como cada 2 segundos nos aparece el string con el nuevo héroe."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPor último vamos a probar el catch para que veais como funciona, lo que haremos será descomentar el código que tenía reject y ya podríamos probarlo."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-09-a-las-9.01.28.png","alt":"Example Catch without return"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nVemos que cuando le toca el turno a "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Green Latern"}]},{"type":"text","value":" pasa por el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"catch"}]},{"type":"text","value":" pero no se detiene y continua......eso es porque tenemos que cambiar como funciona el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"catch"}]},{"type":"text","value":" ya que solo hemos puesto un "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"console.log"}]},{"type":"text","value":" para que se vea que pasa por allí, para hacer que se detenga podemos poner"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"catch((err) => {\n throw err \n})\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y ahora sí tendríamos un error al "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"estilo promesas"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-09-a-las-9.09.06.png","alt":"Promises error"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Con promesas tenemos también otras opciones, por ejemplo podemos pasar un array de promesas y cuando terminen todas pasa al "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"then"}]},{"type":"text","value":" o al "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"catch"}]},{"type":"text","value":" según si ha dado error o no."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Promise.all(arrayPromises)\n .then((result) =>{console.log(result)})\n .catch((error){})\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Con "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Promise.all"}]},{"type":"text","value":", pasamos una array de promesas y esperamos a que terminen todas, tenemos también la opción de que pase al "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"then"}]},{"type":"text","value":" cuando responda la primera"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Promise.race([arrayPromises])\n .then((result) => { console.log(\"La más rápida ha sido\" + result)})\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Este concepto es útil por ejemplo si tenemos varios servidores de base de datos, hacemos las llamadas pertinentes en cada una de las promesas y en cuanto uno termine ya tenemos un resultado, lo que nos permite responder lo más rápido posible ignorando si un servidor tiene más carga que otro."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ahora pasemos al siguiente nivel en las promesas, no en dificultad, pero si en un extra o forma de usarlas que, si no me equivoco, salió en ES7 y "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"para esto es necesario tener Node actualizado a la última versión o por lo menos en la 7.6 (creo)"}]},{"type":"text","value":", con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"node -v"}]},{"type":"text","value":" podéis ver en que versión estáis y actualizar si lo necesitáis."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Concretamente vamos a hablar de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"async/await"}]},{"type":"text","value":". Estos nuevos métodos nos ayudan un poco con la gestión de las promesas, y de los callbacks por supuesto. Lo que hacemos con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"await"}]},{"type":"text","value":" es esperar a que una función termine y parece ser que como "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"best practice"}]},{"type":"text","value":"(o que tiene que ser si o sí más bien) tenemos que hacer ese código asíncrono asi que nos han puesto "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"async"}]},{"type":"text","value":" para facilitarnos esa tarea. Y como funciona esto? Pues vamos a ver un ejemplo sencillo con lo que más o menos teníamos antes."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPartimos de esto"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"'use strict'\n\n//Seria una funcion que devuelve una promesa\nfunction sleep(ms,hero) {\n return new Promise((resolve,reject) => {\n setTimeout(() => {\n resolve(\"La liga de la justicia: \" + hero)\n \n }, ms);\n });\n}\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Se supone que tenemos que usar "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"await"}]},{"type":"text","value":" para que el código se espere a que termine la promesa y meterlo todo dentro de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"async"}]},{"type":"text","value":"...pues vamos"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"async function asyncPromise(){\n console.log(\"Empezamos a contar\")\n return await sleep(2000,\"Superman\")\n}\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como véis simplemente hemos puesto "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"await"}]},{"type":"text","value":" al principio de la ejecución de nuestra promesa, la hemos retornado porque si no, no obtendríamos resultado y lo hemos metido todo dentro de una función que empieza con "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"async"}]},{"type":"text","value":". Ahora vamos a usarlo como si de una promesa normal se tratase"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"asyncPromise().then((result) => console.log(result))\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bien ya tenemos todo, ahora vamos a ejecutarlo"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-10-a-las-21.35.32.png","alt":"Async Await example"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como habréis podido comprobar nos ha aparecido el log indicando que empieza y a los 2 segundos nos ha mostrado el resultado como si de una promesa normal se tratase. Este tipo de estructura realmente nos puede ahorrar el uso de callbacks de finalización o similar. Esto es solo un ejemplo de lo que se puede hacer con estas opciones \"nuevas\" de node, pero se puede usar de otras muchas maneras, el límite lo ponéis vosotros de como usar esto."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Creo que por el momento vamos a dejar las promesas (o lo relacionado con ellas) aquí, en algún otro momento volveremos a trastear con ellas pero creo que hemos visto más o menos como se tienen que usar y en que nos pueden ayudar. Creo que solo me quedaría un mini-post más de extras de Node y nos pondríamos ya con MongoDB."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Nos veeeemosssss un abrazooorrrrr"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"promesas","heading":"Promesas"}]},"featureImageSharp":{"base":"nodebaner.jpg","publicURL":"/static/ebae59fce798d71ce68bf2a304f1491f/nodebaner.jpg","imageMeta":{"width":1680,"height":420},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAME/9oADAMBAAIQAxAAAAGrMokzQT//xAAXEAEBAQEAAAAAAAAAAAAAAAACASIh/9oACAEBAAEFAgMKdU1//8QAFhEBAQEAAAAAAAAAAAAAAAAAAAEx/9oACAEDAQE/AamP/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAEx/9oACAECAQE/AV1//8QAFRABAQAAAAAAAAAAAAAAAAAAEHH/2gAIAQEABj8Cr//EABgQAQADAQAAAAAAAAAAAAAAAAEAETEh/9oACAEBAAE/Ido1iddq0QhE/9oADAMBAAIAAwAAABDz/wD/xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QbrNxf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxAgav/EABgQAQADAQAAAAAAAAAAAAAAAAEAETFx/9oACAEBAAE/ECLXUGFQ03NnlQ0Zc//Z","aspectRatio":3.977272727272727,"src":"/static/ebae59fce798d71ce68bf2a304f1491f/ea4ab/nodebaner.jpg","srcSet":"/static/ebae59fce798d71ce68bf2a304f1491f/477ba/nodebaner.jpg 175w,\n/static/ebae59fce798d71ce68bf2a304f1491f/06776/nodebaner.jpg 350w,\n/static/ebae59fce798d71ce68bf2a304f1491f/ea4ab/nodebaner.jpg 700w,\n/static/ebae59fce798d71ce68bf2a304f1491f/3055e/nodebaner.jpg 1050w,\n/static/ebae59fce798d71ce68bf2a304f1491f/eff08/nodebaner.jpg 1400w,\n/static/ebae59fce798d71ce68bf2a304f1491f/34c3a/nodebaner.jpg 1680w","srcWebp":"/static/ebae59fce798d71ce68bf2a304f1491f/89afa/nodebaner.webp","srcSetWebp":"/static/ebae59fce798d71ce68bf2a304f1491f/9fca7/nodebaner.webp 175w,\n/static/ebae59fce798d71ce68bf2a304f1491f/37a4e/nodebaner.webp 350w,\n/static/ebae59fce798d71ce68bf2a304f1491f/89afa/nodebaner.webp 700w,\n/static/ebae59fce798d71ce68bf2a304f1491f/78e7a/nodebaner.webp 1050w,\n/static/ebae59fce798d71ce68bf2a304f1491f/03d34/nodebaner.webp 1400w,\n/static/ebae59fce798d71ce68bf2a304f1491f/41aa5/nodebaner.webp 1680w","sizes":"(max-width: 700px) 100vw, 700px"}}}}},{"node":{"id":"Ghost__Post__5a338158333e0f134c248f37","title":"Don't stop the party: Node JS(XI) Autenticación","slug":"dont-stop-the-party-node-js-x-templates-o-vistas-2","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/nodebaner-6.jpg","excerpt":"En este post vamos a centrarnos en algunas de las posibilidades de\nimplementación de autenticación en Node, concretamente hablaremos de lo que se\nconoce como Basic Auth y de JSON Web Token.\n\nBasic Auth\nEste sistema de autenticación es el más sencillo de todos, y a su vez no de lo\nmás seguro, pero puede que para un sistema sencillo o alguna aplicación interna\npueda servirnos (en plan....bueno voy a intentar que no entre todo el mundo pero\nsi entras....pues bienvenido pásalo bien ;) ).\nVamos a con","custom_excerpt":null,"visibility":"public","created_at_pretty":"29 Sep 2017","published_at_pretty":"10 Oct 2017","updated_at_pretty":"22 Jan 2018","created_at":"2017-09-29T11:22:23.000+02:00","published_at":"2017-10-10T10:00:00.000+02:00","updated_at":"2018-01-22T09:36:28.000+01:00","meta_title":null,"meta_description":"Hablaremos de algunas de las posibilidades de autenticación en Node, concretamente hablaremos de lo que se conoce como Basic Auth y de JSON Web Token. ","og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"Perfil.jpg","publicURL":"/static/b0de6281fb28a266510b3b09b9243e5a/Perfil.jpg","imageMeta":{"width":307,"height":307},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAUDBAb/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGzw6zC6zHn+cLYP//EAB0QAAICAQUAAAAAAAAAAAAAAAEDAAIEEyEiIzL/2gAIAQEAAQUCifca8KgcKWVfUpkHsG5pxX//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAdEAACAgEFAAAAAAAAAAAAAAAAARARcQISIUFR/9oACAEBAAY/AhU88xkb7N06a8P/xAAcEAEAAwEAAwEAAAAAAAAAAAABABEhMUFRYXH/2gAIAQEAAT8hR2pq40aqb+xIAeXibhW9JXr8joF4TBcSNe0//9oADAMBAAIAAwAAABDzDwD/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAcEAEAAgIDAQAAAAAAAAAAAAABABEhUTFhcfD/2gAIAQEAAT8QyItrELaTlatLwU63MvEW6vUNdy4LZQDn7iVApV9VLtANdWwKkuYq4Er1VZ//2Q==","aspectRatio":1,"src":"/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg","srcSet":"/static/b0de6281fb28a266510b3b09b9243e5a/f340b/Perfil.jpg 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/22d64/Perfil.jpg 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/aa249/Perfil.jpg 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/0dc33/Perfil.jpg 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/60667/Perfil.jpg 307w","srcWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp","srcSetWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/59cda/Perfil.webp 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/7da75/Perfil.webp 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f282e/Perfil.webp 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/a7b21/Perfil.webp 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f59af/Perfil.webp 307w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"nodejs","url":"https://jlgarcia.fulldev.ninja/tag/nodejs/","name":"nodejs","visibility":"public","feature_image":null,"description":null,"meta_title":"NodeJS Ninjas","meta_description":"Aprenderemos desde lo básico este framework de JS para backend, muy bueno en concurrencia y en API Rest y que forma parte del stack MEAN o MERN.","featureImageSharp":null},"tags":[{"slug":"nodejs","url":"https://jlgarcia.fulldev.ninja/tag/nodejs/","name":"nodejs","visibility":"public","feature_image":null,"description":null,"meta_title":"NodeJS Ninjas","meta_description":"Aprenderemos desde lo básico este framework de JS para backend, muy bueno en concurrencia y en API Rest y que forma parte del stack MEAN o MERN.","featureImageSharp":null}],"plaintext":"En este post vamos a centrarnos en algunas de las posibilidades de\nimplementación de autenticación en Node, concretamente hablaremos de lo que se\nconoce como Basic Auth y de JSON Web Token.\n\nBasic Auth\nEste sistema de autenticación es el más sencillo de todos, y a su vez no de lo\nmás seguro, pero puede que para un sistema sencillo o alguna aplicación interna\npueda servirnos (en plan....bueno voy a intentar que no entre todo el mundo pero\nsi entras....pues bienvenido pásalo bien ;) ).\nVamos a configurar por ejemplo nuestra ruta con heros, la que está en el fichero \nninjas.js para que nos solicite un usuario y contraseña.\n\nLo primero de todo como es habitual en Node, usaremos npm para instalar el\nmódulo necesario\n\nnpm install basic-auth --save\n\n\nA continuación lo que hacemos es requerir el módulo como siempre y lo siguiente\nen el middleware que queramos usamos lo que hemos requerido y le pasamos la\nrequest. Esto lo que hará será buscar datos de usuario y contraseña en ella.\n\n//Con esto importamos el módulo\nconst auth = require('basic-auth');\n\n\nY en nuestro middleware\n\nrouter.get('/heros', function(req, res, next) {\n\n const userLogin = auth(req);\n\n\nAhora si lo probaramos esto no haría nada, tenemos que añadirle algunas cosas\nmás.\nTenemos que hacer que nos solicite usuario y contraseña, para hacer esto tenemos\nque responder a nuestro cliente desde nuestro middleware con un valor espécifico\nen la cabecera y ya de paso para hacerlo bien le ponemos el código de estado\npertinente (401 en este caso). Pero claro esto no es tan automático como podemos\npensar, necesiteamos controlar si ya nos ha pasado usuario y contraseña en\nnuestra constante userLogin, con todo esto de momento nuestro código sería el\nsiguiente\n\nrouter.get('/heros', function(req, res, next) {\n\n const userLogin = auth(req);\n \n if (!userLogin) { \n res.set('WWW-Authenticate', 'basic realm=Authorization Required');\n res.send(401);\n return;//Esto para que no continue la ejecución del middleware\n }\n \n res.json({ninja:\"Somos un monton de ninjas autenticados\" })\n});\n\n\nSi ahora lo probamos tendríamos esto\n\nComo veis nos pide usuario y contraseña pero claro ahora mismo pongamos lo que\npongamos nos dejará pasar, tenemos que comprobar el usuario y contraseña de\nalguna forma. En un principio esto lo ideal sería tener una base de datos, un\nfichero o similar para comprobar tanto usuario como contraseña, en nuestro caso\nno tenemos implementado nada de esto por lo que de momento lo que haremos será\ncomprobarlo directamente en el código, pero tener en cuenta que en este punto lo\nque haríamos sería comprobar en algún lado que los datos son correctos\n\nrouter.get('/heros', function(req, res, next) {\n\n const userLogin = auth(req);\n \n if (!userLogin) { \n res.set('WWW-Authenticate', 'basic realm=Authorization Required');\n res.send(401);\n return;\n }\n\n //Aqui haríamos la comprobación en nuestras base de datos o similar\n if (userLogin.name !== 'ninja' || userLogin.pass !== '1234' ){\n res.set('WWW-Authenticate', 'basic realm=Authorization Required');\n res.send(401);\n return;\n }\n res.json({ninja:\"Somos un montón de ninjas autenticados\" })\n});\n\n\nAhora ya si lo probamos solo funcionará si introducimos ese usuario y contraseña\n\nComo veis es bastante simple, veamos ahora como podemos hacer esto un poco más\nelegante, no creo que sea lo mejor hacer este código en todos los middleware que\nnecesitemos (bueno si es general para toda la aplicación solo necesitamos\nponerlo en el app.js y crear un middleware que responda a todas las request,\npero ese no creo que sea el escenario en general).\nVamos a crear nuestro propio módulo para gestionar esto, primero creamos una\ncarpeta lib que sera la que tendrá las librerías/módulos que creemos o\nimportemos y no lo hagamos con npm. Creamos un fichero auth.js y lo que haremos\nserá exportar el callback al que respondería un middleware\n\n'use strict';\n\nconst auth = require('basic-auth');\n\nmodule.exports = (req, res, next) => {\n\n const userLogin = auth(req);\n \n if (!userLogin) { \n res.set('WWW-Authenticate', 'basic realm=Authorization Required');\n res.send(401);\n return;\n }\n\n //Aqui haríamos la comprobación en nuestras base de datos o similar\n if (userLogin.name !== 'ninja' || userLogin.pass !== '12345' ){\n res.set('WWW-Authenticate', 'basic realm=Authorization Required');\n res.send(401);\n return;\n }\n next();//Para que continue con el siguiente middleware\n\n};\n\n\nBásicamente he puesto el mismo código que habíamos añadido antes, solo que al\nfinal le hemos puesto un next() para que continue con el siguiente middleware\nque coincida.\nAhora vamos a módificar nuestra ruta ninjas para que use esto\n\n'use strict'\n\nvar express = require('express');\nvar router = express.Router();\nconst auth = require('../lib/auth.js');\n\n/* GET home page. */\nrouter.get('/heros', auth, function(req, res, next) {\n\n res.json({ninja:\"Somos un montón de ninjas autenticados\" })\n});\n\nmodule.exports = router;\n\n\nHemos importado nuestro módulo y simplemente se lo hemos pasado como primer\nhandler del middleware. A un middleware le podemos pasar todos los handlers que\nqueramos y se irán ejecutando uno detrás de otro según vayan terminando.\nSi ahora lo probáis debería funcionaros igual que antes, probar a cambiar la\ncontraseña porque seguramente el navegador haya almacenado los datos que habéis\nintroducido anteriormente.\nBueno en cuanto a este método de autenticación poco más merece que miremos, es\nbastante sencillo y pueden existir otro tipo de implementaciones pero este sería\nel funcionamiento típico.\n\nJSON Web Token\nY, ¿qué es JSON Web Token?... básicamente es una forma de tener una sesión pero\nalmacenandola en el cliente, lo que aligera un poco la gestión de esto por parte\ndel backend y como su nombre indica lo hacemos en formato JSON.\nEl proceso sería el siguiente. El usuario se autentica con su usuario y\ncontraseña, el cual se comprueba de alguna forma (BBDD, fichero, etc...), el\nbackend una vez que confirma los datos le devuelve al usuario un token. A partir\nde entonces todas las peticiones HTTP del usuario deben ir acompañadas de este\ntoken(cabecera, queryString...). El token se almacena en el lado del cliente de\nalguna forma(sessionStorage o localStorage por ejemplo), lo que hace que no\ntenga que mantener esta información el backend, lo que convierte todo en\nbastante más escalable. El Token es una firma cifrada que el backend descifra y\nverifica al recibirla lo que permite confirmar la identidad del usuario.\nEste tipo de autenticación nos permite utilizar el mismo tipo de autenticación\npara todos nuestros desarrollos (Web, Android, IOS,....) solo es necesario hacer\nla gestión pertinente del token. También nos provee de algo más de seguridad, ya\nque no usa cookies para mantener información de usuario se pueden evitar ciertos\ntipos de ataques que manipulen la sesión y además podemos hacer que el token\nexpire cada cierto tiempo lo que nos provee de otra capa más de seguridad.\nVamos a hablar un poco del token que recibimos para que entendamos un poco que\ninformación lleva. Este de aqui será un token tipo\n\neyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjoibmluamEiLCJpYXQiOjE1MDY4NDk4NTEsImV4cCI6MTUwNzAyMjY1MX0.qVSS9iQAyIQzjlp4uCyiJUOGSgXMSbmZUAJ7hQncco4\n\n\nSi os fijáis bien esta compuesto por tres strings separados por puntos, hablemos\nun poco de cada uno\n\n1º Header\n\neyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9\n\n\nEsto básicamente indica el tipo de token y el algoritmo usado para codificar,\nnormalmente es HMAC SHA256. Descodificado sería algo similar a esto:\n\n{\n \"alg\": \"HS256\",\n \"typ\": \"JWT\"\n}\n\n\n2º Payload/Data\n\neyJ1c2VyIjoibmluamEiLCJpYXQiOjE1MDY4NDk4NTEsImV4cCI6MTUwNzAyMjY1MX0\n\n\nLa segunda parte tiene datos extra que indicamos nosotros desde el backend que\nse guarden, ya sea para recomprobar en el backend o cualquier otra cosa. Este \npayload a parte de la información que queramos nosotros guardar, tiene lo que se\nconoce como claims, son atributos propios que definen el token(aqui\n[http://self-issued.info/docs/draft-ietf-oauth-json-web-token.html#RegisteredClaimName] \nmás en detalle), tiene mínimo 2:\n\n * iat: La fecha en la que se creó el token.\n * exp: La fecha de expiración del token. Esto normalmente lo indicamos nosotros\n desde el backend.\n\nDescodificado este tendría:\n\n{\n \"user\": \"ninja\",\n \"iat\": 1506849851,\n \"exp\": 1507022651\n}\n\n\n3º Firma/Signature\n\nqVSS9iQAyIQzjlp4uCyiJUOGSgXMSbmZUAJ7hQncco4\n\n\nEsta última parte es la que realmente comprobamos en el backend, esta compuesta\nde los 2 strings anteriores codificados en BASE64 junto con una clave secreta \nque indicamos nosotros en el backend, por lo que si lo que descodifica en este\npunto es igual que lo anterior da por sentado que es correcto.\nDescodificado sería:\n\nHMACSHA256(\n base64UrlEncode(header) + \".\" +\n base64UrlEncode(payload),\n Secret KEY\n)\n\n\nSecret KEY es la clave secreta que hemos usado para codificar. Podemos comprobar\neste token completo en la pagina oficial de JWT.io [https://jwt.io/] solo es\nnecesario copiar el token completo en la parte donde pone ENCODED y poner la\nclave secreta \"Secret KEY\" en la zona donde pone VERIFY SIGNATURE.\nBueno ya hemos visto un poco de teoría sobre de que esta compuesto el token,\nahora vamos a implantar JWT en Node para que veamos un ejemplo de como se hace\nimplanta.\n\nLo primero de todo como siempre es instalar el módulo de jsonwebtoken con npm.\n\nnpm install jsonwebtoken --save\n\n\nUna vez instalado, vamos a crearnos otra ruta para hacer el login (así repasamos\nun poco), para ello en la carpeta routes creamos el fichero login.js con este\ncontenido\n\nvar express = require('express');\nvar router = express.Router();\nconst jwt = require('jsonwebtoken')\n\n\nrouter.post('/', function(req, res, next) {\n \n const user = req.body.user; \n const pass = req.body.pass;\n\n if (!user){\n return res.status(401).json({sucess: false, error: 'Auth failed. We need a valid user'});\n }\n\n if (!pass){\n return res.status(401).json({sucess: false, error: 'Auth failed. We need a valid pass'});\n }\n \n //Aqui lo suyo es que comprobaramos con una base de datos o fichero el usuario y contraseña\n if (user !== 'ninja' || pass !== '1234'){\n return res.status(401).json({sucess: false, error: 'Auth failed. Invalid user or password'});\n \n }\n \n //La clabe secreta que pone Secret KEY debería estar en un fichero de configuración o deberíamos usar variables de entorno para que no este puesta directamente\n const token = jwt.sign({user: user},'Secret KEY',{expiresIn: \"2 days\"});\n res.json({sucess: true, token: token});\n\n});\n\nmodule.exports = router;\n\n\nComo siempre requerimos express e instanciamos router, como extra requerimos \nnuestro nuevo módulo jsonwebtoken\n\nconst express = require('express');\nconst router = express.Router();\nconst jwt = require('jsonwebtoken')\n\n\nHacemos que este nuevo middleware responda a peticiones post, necesario ya que\nmandaremos la información en el body, y extraemos el usuario y contraseña para\ncomprobarlos(se podría hacer en el cliente que la contraseña se codificara de\nalguna forma para mayor seguridad pero eso esta fuera de lo que queremos ver con\nNode)\n\nrouter.post('/', function(req, res, next) {\n \n const user = req.body.user; \n const pass = req.body.pass;\n\n\nPonemos comprobaciones típicas, por si el usuario o contraseña estan vacios y en\nnuestro caso que usuario y contraseña están bien, pero recordar que esto\nrealmente se debería comprobar en una base de datos o similar, esto es solo para\nagilizar el desarrollo\n\n if (!user){\n return res.status(401).json({sucess: false, error: 'Auth failed. We need a valid user'});\n }\n\n if (!pass){\n return res.status(401).json({sucess: false, error: 'Auth failed. We need a valid pass'});\n }\n\n if (user !== 'ninja' || pass !== '1234'){\n return res.status(401).json({sucess: false, error: 'Auth failed. Invalid user or password'});\n \n }\n\n\nAhora tenemos donde creamos el token\n\nconst token = jwt.sign({user: user},'Secret KEY',{expiresIn: \"2 days\"});\n\n\nLe hemos puesto un payload/data en formato JSON(da menos problemas con este\nformato) que contiene el usuario. Luego le hemos indicado la clave secreta para\ncomponer el hash Secret KEY, **IMPORTANTE esto no debería estar así deberíamos\nponerlo en un fichero de configuración o en las variables de entorno de nuestro\nbackend, para extraerlo con process.env... **. Por último le hemos indicado el\ntiempo de expiración de nuestro token, esto tiene varios formatos podéis verlos\nen la página de npm sobre JSON Web token\n[https://www.npmjs.com/package/jsonwebtoken].\nPor último le devolvemos al cliente el token que hemos generado para que lo use\n\nres.json({sucess: true, token: token});\n\n\nYa tenemos nuestra nueva ruta creada, la indicamos en el app.js, importamos la\nnueva ruta, por ejemplo debajo de la de ninjas que creamos anteriormente\n\nvar ninjas = require('./routes/ninjas');\nvar login = require('./routes/login');\n\n\nY le indicamos a express que la use(debajo de la de ninjas por ejemplo)\n\napp.use('/ninjas',ninjas);\napp.use('/login',login);\n\n\nVoilá ya lo tenemos ahora vamos a probarlo, lo mejor sería hacerlo con un\nsoftware tipo POSTMAN o similar que nos permite personalizar como hacemos las\npeticiones HTTP.\nComo hemos configurado le pasamos en el body por post el usuario y contraseña.\n\nComo veis tenemos nuestro token jejejeje, relativamente sencillo ¿verdad? Si\ncambiamos la contraseña veréis como nos devuelve algún tipo de 401\n\n\nBueno ya tenemos el token.....pero nos falta algún sitio para usarlo,\n¿no?...pues vamos a por ello.\nAl igual que hicimos arriba con Basic Auth vamos a crearnos un módulo para\ngestionar la verificación del login. En la carpeta lib creamos el fichero \nauthJWT.js y ponemos lo siguiente\n\nconst jwt = require('jsonwebtoken');\n\nmodule.exports = function(req,res,next) {\n \n const token = req.query.token;\n\n if (token){\n \n jwt.verify(token,'Secret KEY',(err,decoded) => {\n if (err){\n console.log(decoded)\n return res.status(401).json({success: false, error: 'Failed to authenticate token'});\n } else {\n console.log('Decoded',decoded);\n next();\n }\n });\n\n }else{\n return res.status(403).json({success: false, error: 'No token provided'})\n }\n }\n\n\nEl código es bastante simple, recibimos el token por queryString, y lo\nverificamos con jwt.verify pasandole también la clave privada que hemos usado y\nuna vez comprobado saltaría el callback con el error o con el payload\ndescodificado. Recordar clave secreta aqui kaka, tiene que estar en fichero de\nconfiguración o en variable de entorno\n\njwt.verify(token,'Secret KEY',(err,decoded) => {\n\n\nLe he puesto un console.log para que veáis lo que descodifica si todo va bien o\nda error.\nPor último tenemos que hacer que algún middleware lo use de alguna manera. En\neste caso vamos a cambiar el que usamos con Basic Auth y usamos el nuevo con JWT\n. Nos vamos a ninjas.js y ponemos lo siguiente\n\n'use strict'\n\nvar express = require('express');\nvar router = express.Router();\n//const auth = require('../lib/auth.js');\nconst authJWT = require('../lib/authJWT.js');\n\nrouter.get('/heros', authJWT, function(req, res, next) {\n\n res.json({ninja:\"Somos un monton de ninjas autenticados\" })\n});\n\nmodule.exports = router;\n\n\nComentamos lo que pertenecia a basic-auth y hacemos lo mismo que hicimos antes\npero con JWT y ya lo tendríamos, vamos a probarlo para ello el token que nos ha\ndevuelto antes se lo pasamos como queryString\n\nhttp://localhost:3000/ninjas/heros?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjoibmluamEiLCJpYXQiOjE1MDY4NTUzNTAsImV4cCI6MTUwNzAyODE1MH0.RS-ow1UqTz66l5X26rpKw5qB-1gX31t8_ycNgIkdUuE\n\n\nY si todo va bien veremos esto\n\ny si por algún motivo el token no es correcto\n\nBueno como hemos visto usar JSON web Token es relativamente sencillo, en este\ncaso no hemos usado base de datos pero lo ideal seria tener los usuarios y\ncontraseñas almacenados en una base de datos, con la contraseña codificada con\nalgún tipo de hash por supuesto, y hacer las comprobaciones con ellos, no\ntenerlos en nuestro código puestos a mano.\nComo extra comentaros que casi todos los métodos de autenticación con token\n(login con terceros como Google, Facebook, OAuth, Azure o AWS por ejemplo)\nsuelen funcionar de forma similar, es decir un token que almacenamos y pasamos\nen cada petición normalmente en el header con un nombre tipo x-access-token, \nauthorization o similar.\n\nY hasta aquí la parte de autenticación en el siguiente post y el último por el\nmomento de esta serie de Node (Lo siguiente será mezclar con MongoDB) hablaremos\nde Promesas que aunque no es propio de NodeJS, es más de JS creo que es útil que\nlas repasemos y también veremos como poner nuestro proceso de Node en cluster \npara aumentar el rendimiento con un gran númeo de peticiones. Luego empezaré una\nlinea nueva de post donde hablaremos de MongoDB y ya de paso lo integraremos con\nNode.\n\nNos veeeemossss un abrazooorrrrrr","html":"En este post vamos a centrarnos en algunas de las posibilidades de implementación de autenticación en Node, concretamente hablaremos de lo que se conoce como Basic Auth y de JSON Web Token.
\nEste sistema de autenticación es el más sencillo de todos, y a su vez no de lo más seguro, pero puede que para un sistema sencillo o alguna aplicación interna pueda servirnos (en plan....bueno voy a intentar que no entre todo el mundo pero si entras....pues bienvenido pásalo bien ;) ).
\nVamos a configurar por ejemplo nuestra ruta con heros, la que está en el fichero ninjas.js para que nos solicite un usuario y contraseña.
Lo primero de todo como es habitual en Node, usaremos npm para instalar el módulo necesario
\nnpm install basic-auth --save\nA continuación lo que hacemos es requerir el módulo como siempre y lo siguiente en el middleware que queramos usamos lo que hemos requerido y le pasamos la request. Esto lo que hará será buscar datos de usuario y contraseña en ella.
\n//Con esto importamos el módulo\nconst auth = require('basic-auth');\nY en nuestro middleware
\nrouter.get('/heros', function(req, res, next) {\n\n const userLogin = auth(req);\nAhora si lo probaramos esto no haría nada, tenemos que añadirle algunas cosas más.
\nTenemos que hacer que nos solicite usuario y contraseña, para hacer esto tenemos que responder a nuestro cliente desde nuestro middleware con un valor espécifico en la cabecera y ya de paso para hacerlo bien le ponemos el código de estado pertinente (401 en este caso). Pero claro esto no es tan automático como podemos pensar, necesiteamos controlar si ya nos ha pasado usuario y contraseña en nuestra constante userLogin, con todo esto de momento nuestro código sería el siguiente
router.get('/heros', function(req, res, next) {\n\n const userLogin = auth(req);\n \n if (!userLogin) { \n res.set('WWW-Authenticate', 'basic realm=Authorization Required');\n res.send(401);\n return;//Esto para que no continue la ejecución del middleware\n }\n \n res.json({ninja:"Somos un monton de ninjas autenticados" })\n});\nSi ahora lo probamos tendríamos esto
\n![\"Http_Auth](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-30-at-12.33.17.png\")
\nComo veis nos pide usuario y contraseña pero claro ahora mismo pongamos lo que pongamos nos dejará pasar, tenemos que comprobar el usuario y contraseña de alguna forma. En un principio esto lo ideal sería tener una base de datos, un fichero o similar para comprobar tanto usuario como contraseña, en nuestro caso no tenemos implementado nada de esto por lo que de momento lo que haremos será comprobarlo directamente en el código, pero tener en cuenta que en este punto lo que haríamos sería comprobar en algún lado que los datos son correctos
router.get('/heros', function(req, res, next) {\n\n const userLogin = auth(req);\n \n if (!userLogin) { \n res.set('WWW-Authenticate', 'basic realm=Authorization Required');\n res.send(401);\n return;\n }\n\n //Aqui haríamos la comprobación en nuestras base de datos o similar\n if (userLogin.name !== 'ninja' || userLogin.pass !== '1234' ){\n res.set('WWW-Authenticate', 'basic realm=Authorization Required');\n res.send(401);\n return;\n }\n res.json({ninja:"Somos un montón de ninjas autenticados" })\n});\nAhora ya si lo probamos solo funcionará si introducimos ese usuario y contraseña
\n![\"Http](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-30-at-12.39.40.png\")
\nComo veis es bastante simple, veamos ahora como podemos hacer esto un poco más elegante, no creo que sea lo mejor hacer este código en todos los middleware que necesitemos (bueno si es general para toda la aplicación solo necesitamos ponerlo en el app.js y crear un middleware que responda a todas las request, pero ese no creo que sea el escenario en general).
\nVamos a crear nuestro propio módulo para gestionar esto, primero creamos una carpeta lib que sera la que tendrá las librerías/módulos que creemos o importemos y no lo hagamos con npm. Creamos un fichero auth.js y lo que haremos será exportar el callback al que respondería un middleware
'use strict';\n\nconst auth = require('basic-auth');\n\nmodule.exports = (req, res, next) => {\n\n const userLogin = auth(req);\n \n if (!userLogin) { \n res.set('WWW-Authenticate', 'basic realm=Authorization Required');\n res.send(401);\n return;\n }\n\n //Aqui haríamos la comprobación en nuestras base de datos o similar\n if (userLogin.name !== 'ninja' || userLogin.pass !== '12345' ){\n res.set('WWW-Authenticate', 'basic realm=Authorization Required');\n res.send(401);\n return;\n }\n next();//Para que continue con el siguiente middleware\n\n};\nBásicamente he puesto el mismo código que habíamos añadido antes, solo que al final le hemos puesto un next() para que continue con el siguiente middleware que coincida.
\nAhora vamos a módificar nuestra ruta ninjas para que use esto
'use strict'\n\nvar express = require('express');\nvar router = express.Router();\nconst auth = require('../lib/auth.js');\n\n/* GET home page. */\nrouter.get('/heros', auth, function(req, res, next) {\n\n res.json({ninja:"Somos un montón de ninjas autenticados" })\n});\n\nmodule.exports = router;\nHemos importado nuestro módulo y simplemente se lo hemos pasado como primer handler del middleware. A un middleware le podemos pasar todos los handlers que queramos y se irán ejecutando uno detrás de otro según vayan terminando.
\nSi ahora lo probáis debería funcionaros igual que antes, probar a cambiar la contraseña porque seguramente el navegador haya almacenado los datos que habéis introducido anteriormente.
\nBueno en cuanto a este método de autenticación poco más merece que miremos, es bastante sencillo y pueden existir otro tipo de implementaciones pero este sería el funcionamiento típico.
Y, ¿qué es JSON Web Token?... básicamente es una forma de tener una sesión pero almacenandola en el cliente, lo que aligera un poco la gestión de esto por parte del backend y como su nombre indica lo hacemos en formato JSON.
\nEl proceso sería el siguiente. El usuario se autentica con su usuario y contraseña, el cual se comprueba de alguna forma (BBDD, fichero, etc...), el backend una vez que confirma los datos le devuelve al usuario un token. A partir de entonces todas las peticiones HTTP del usuario deben ir acompañadas de este token(cabecera, queryString...). El token se almacena en el lado del cliente de alguna forma(sessionStorage o localStorage por ejemplo), lo que hace que no tenga que mantener esta información el backend, lo que convierte todo en bastante más escalable. El Token es una firma cifrada que el backend descifra y verifica al recibirla lo que permite confirmar la identidad del usuario.
\nEste tipo de autenticación nos permite utilizar el mismo tipo de autenticación para todos nuestros desarrollos (Web, Android, IOS,....) solo es necesario hacer la gestión pertinente del token. También nos provee de algo más de seguridad, ya que no usa cookies para mantener información de usuario se pueden evitar ciertos tipos de ataques que manipulen la sesión y además podemos hacer que el token expire cada cierto tiempo lo que nos provee de otra capa más de seguridad.
\nVamos a hablar un poco del token que recibimos para que entendamos un poco que información lleva. Este de aqui será un token tipo
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjoibmluamEiLCJpYXQiOjE1MDY4NDk4NTEsImV4cCI6MTUwNzAyMjY1MX0.qVSS9iQAyIQzjlp4uCyiJUOGSgXMSbmZUAJ7hQncco4\nSi os fijáis bien esta compuesto por tres strings separados por puntos, hablemos un poco de cada uno
\n1º Header
\neyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9\nEsto básicamente indica el tipo de token y el algoritmo usado para codificar, normalmente es HMAC SHA256. Descodificado sería algo similar a esto:
\n{\n "alg": "HS256",\n "typ": "JWT"\n}\n2º Payload/Data
\neyJ1c2VyIjoibmluamEiLCJpYXQiOjE1MDY4NDk4NTEsImV4cCI6MTUwNzAyMjY1MX0\nLa segunda parte tiene datos extra que indicamos nosotros desde el backend que se guarden, ya sea para recomprobar en el backend o cualquier otra cosa. Este payload a parte de la información que queramos nosotros guardar, tiene lo que se conoce como claims, son atributos propios que definen el token(aqui más en detalle), tiene mínimo 2:
\nDescodificado este tendría:
\n{\n "user": "ninja",\n "iat": 1506849851,\n "exp": 1507022651\n}\n3º Firma/Signature
\nqVSS9iQAyIQzjlp4uCyiJUOGSgXMSbmZUAJ7hQncco4\nEsta última parte es la que realmente comprobamos en el backend, esta compuesta de los 2 strings anteriores codificados en BASE64 junto con una clave secreta que indicamos nosotros en el backend, por lo que si lo que descodifica en este punto es igual que lo anterior da por sentado que es correcto.
\nDescodificado sería:
HMACSHA256(\n base64UrlEncode(header) + "." +\n base64UrlEncode(payload),\n Secret KEY\n)\nSecret KEY es la clave secreta que hemos usado para codificar. Podemos comprobar este token completo en la pagina oficial de JWT.io solo es necesario copiar el token completo en la parte donde pone ENCODED y poner la clave secreta "Secret KEY" en la zona donde pone VERIFY SIGNATURE.
\nBueno ya hemos visto un poco de teoría sobre de que esta compuesto el token, ahora vamos a implantar JWT en Node para que veamos un ejemplo de como se hace implanta.
Lo primero de todo como siempre es instalar el módulo de jsonwebtoken con npm.
\nnpm install jsonwebtoken --save\nUna vez instalado, vamos a crearnos otra ruta para hacer el login (así repasamos un poco), para ello en la carpeta routes creamos el fichero login.js con este contenido
\nvar express = require('express');\nvar router = express.Router();\nconst jwt = require('jsonwebtoken')\n\n\nrouter.post('/', function(req, res, next) {\n \n const user = req.body.user; \n const pass = req.body.pass;\n\n if (!user){\n return res.status(401).json({sucess: false, error: 'Auth failed. We need a valid user'});\n }\n\n if (!pass){\n return res.status(401).json({sucess: false, error: 'Auth failed. We need a valid pass'});\n }\n \n //Aqui lo suyo es que comprobaramos con una base de datos o fichero el usuario y contraseña\n if (user !== 'ninja' || pass !== '1234'){\n return res.status(401).json({sucess: false, error: 'Auth failed. Invalid user or password'});\n \n }\n \n //La clabe secreta que pone Secret KEY debería estar en un fichero de configuración o deberíamos usar variables de entorno para que no este puesta directamente\n const token = jwt.sign({user: user},'Secret KEY',{expiresIn: "2 days"});\n res.json({sucess: true, token: token});\n\n});\n\nmodule.exports = router;\nComo siempre requerimos express e instanciamos router, como extra requerimos nuestro nuevo módulo jsonwebtoken
\nconst express = require('express');\nconst router = express.Router();\nconst jwt = require('jsonwebtoken')\nHacemos que este nuevo middleware responda a peticiones post, necesario ya que mandaremos la información en el body, y extraemos el usuario y contraseña para comprobarlos(se podría hacer en el cliente que la contraseña se codificara de alguna forma para mayor seguridad pero eso esta fuera de lo que queremos ver con Node)
\nrouter.post('/', function(req, res, next) {\n \n const user = req.body.user; \n const pass = req.body.pass;\nPonemos comprobaciones típicas, por si el usuario o contraseña estan vacios y en nuestro caso que usuario y contraseña están bien, pero recordar que esto realmente se debería comprobar en una base de datos o similar, esto es solo para agilizar el desarrollo
\n if (!user){\n return res.status(401).json({sucess: false, error: 'Auth failed. We need a valid user'});\n }\n\n if (!pass){\n return res.status(401).json({sucess: false, error: 'Auth failed. We need a valid pass'});\n }\n\n if (user !== 'ninja' || pass !== '1234'){\n return res.status(401).json({sucess: false, error: 'Auth failed. Invalid user or password'});\n \n }\nAhora tenemos donde creamos el token
\nconst token = jwt.sign({user: user},'Secret KEY',{expiresIn: "2 days"});\nLe hemos puesto un payload/data en formato JSON(da menos problemas con este formato) que contiene el usuario. Luego le hemos indicado la clave secreta para componer el hash Secret KEY, **IMPORTANTE esto no debería estar así deberíamos ponerlo en un fichero de configuración o en las variables de entorno de nuestro backend, para extraerlo con process.env... **. Por último le hemos indicado el tiempo de expiración de nuestro token, esto tiene varios formatos podéis verlos en la página de npm sobre JSON Web token.
\nPor último le devolvemos al cliente el token que hemos generado para que lo use
res.json({sucess: true, token: token});\nYa tenemos nuestra nueva ruta creada, la indicamos en el app.js, importamos la nueva ruta, por ejemplo debajo de la de ninjas que creamos anteriormente
\nvar ninjas = require('./routes/ninjas');\nvar login = require('./routes/login');\nY le indicamos a express que la use(debajo de la de ninjas por ejemplo)
\napp.use('/ninjas',ninjas);\napp.use('/login',login);\nVoilá ya lo tenemos ahora vamos a probarlo, lo mejor sería hacerlo con un software tipo POSTMAN o similar que nos permite personalizar como hacemos las peticiones HTTP.
\nComo hemos configurado le pasamos en el body por post el usuario y contraseña.
\n![\"Postman](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Screen-Shot-2017-10-01-at-12.48.36.png\")
\nComo veis tenemos nuestro token jejejeje, relativamente sencillo ¿verdad? Si cambiamos la contraseña veréis como nos devuelve algún tipo de 401
\n![\"postman](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Screen-Shot-2017-10-01-at-12.50.30.png\")
Bueno ya tenemos el token.....pero nos falta algún sitio para usarlo, ¿no?...pues vamos a por ello.
\nAl igual que hicimos arriba con Basic Auth vamos a crearnos un módulo para gestionar la verificación del login. En la carpeta lib creamos el fichero authJWT.js y ponemos lo siguiente
const jwt = require('jsonwebtoken');\n\nmodule.exports = function(req,res,next) {\n \n const token = req.query.token;\n\n if (token){\n \n jwt.verify(token,'Secret KEY',(err,decoded) => {\n if (err){\n console.log(decoded)\n return res.status(401).json({success: false, error: 'Failed to authenticate token'});\n } else {\n console.log('Decoded',decoded);\n next();\n }\n });\n\n }else{\n return res.status(403).json({success: false, error: 'No token provided'})\n }\n }\nEl código es bastante simple, recibimos el token por queryString, y lo verificamos con jwt.verify pasandole también la clave privada que hemos usado y una vez comprobado saltaría el callback con el error o con el payload descodificado. Recordar clave secreta aqui kaka, tiene que estar en fichero de configuración o en variable de entorno
\njwt.verify(token,'Secret KEY',(err,decoded) => {\nLe he puesto un console.log para que veáis lo que descodifica si todo va bien o da error.
\nPor último tenemos que hacer que algún middleware lo use de alguna manera. En este caso vamos a cambiar el que usamos con Basic Auth y usamos el nuevo con JWT. Nos vamos a ninjas.js y ponemos lo siguiente
'use strict'\n\nvar express = require('express');\nvar router = express.Router();\n//const auth = require('../lib/auth.js');\nconst authJWT = require('../lib/authJWT.js');\n\nrouter.get('/heros', authJWT, function(req, res, next) {\n\n res.json({ninja:"Somos un monton de ninjas autenticados" })\n});\n\nmodule.exports = router;\nComentamos lo que pertenecia a basic-auth y hacemos lo mismo que hicimos antes pero con JWT y ya lo tendríamos, vamos a probarlo para ello el token que nos ha devuelto antes se lo pasamos como queryString
\nhttp://localhost:3000/ninjas/heros?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjoibmluamEiLCJpYXQiOjE1MDY4NTUzNTAsImV4cCI6MTUwNzAyODE1MH0.RS-ow1UqTz66l5X26rpKw5qB-1gX31t8_ycNgIkdUuE\nY si todo va bien veremos esto
\n![\"Token](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Screen-Shot-2017-10-01-at-13.09.04.png\")
\ny si por algún motivo el token no es correcto
\n![\"Token](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Screen-Shot-2017-10-01-at-13.09.48.png\")
\nBueno como hemos visto usar JSON web Token es relativamente sencillo, en este caso no hemos usado base de datos pero lo ideal seria tener los usuarios y contraseñas almacenados en una base de datos, con la contraseña codificada con algún tipo de hash por supuesto, y hacer las comprobaciones con ellos, no tenerlos en nuestro código puestos a mano.
\nComo extra comentaros que casi todos los métodos de autenticación con token (login con terceros como Google, Facebook, OAuth, Azure o AWS por ejemplo) suelen funcionar de forma similar, es decir un token que almacenamos y pasamos en cada petición normalmente en el header con un nombre tipo x-access-token, authorization o similar.
Y hasta aquí la parte de autenticación en el siguiente post y el último por el momento de esta serie de Node (Lo siguiente será mezclar con MongoDB) hablaremos de Promesas que aunque no es propio de NodeJS, es más de JS creo que es útil que las repasemos y también veremos como poner nuestro proceso de Node en cluster para aumentar el rendimiento con un gran númeo de peticiones. Luego empezaré una linea nueva de post donde hablaremos de MongoDB y ya de paso lo integraremos con Node.
\nNos veeeemossss un abrazooorrrrrr
\n","url":"https://jlgarcia.fulldev.ninja/dont-stop-the-party-node-js-x-templates-o-vistas-2/","canonical_url":null,"uuid":"96fce422-5da1-4ecd-99e6-8fc5f9d47d37","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"59ce10cf58177700014ca379","reading_time":11,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"En este post vamos a centrarnos en algunas de las posibilidades de implementación de autenticación en Node, concretamente hablaremos de lo que se conoce como Basic Auth y de JSON Web Token.
\nEste sistema de autenticación es el más sencillo de todos, y a su vez no de lo más seguro, pero puede que para un sistema sencillo o alguna aplicación interna pueda servirnos (en plan....bueno voy a intentar que no entre todo el mundo pero si entras....pues bienvenido pásalo bien ;) ).
\nVamos a configurar por ejemplo nuestra ruta con heros, la que está en el fichero ninjas.js para que nos solicite un usuario y contraseña.
Lo primero de todo como es habitual en Node, usaremos npm para instalar el módulo necesario
\nnpm install basic-auth --save\nA continuación lo que hacemos es requerir el módulo como siempre y lo siguiente en el middleware que queramos usamos lo que hemos requerido y le pasamos la request. Esto lo que hará será buscar datos de usuario y contraseña en ella.
\n//Con esto importamos el módulo\nconst auth = require('basic-auth');\nY en nuestro middleware
\nrouter.get('/heros', function(req, res, next) {\n\n const userLogin = auth(req);\nAhora si lo probaramos esto no haría nada, tenemos que añadirle algunas cosas más.
\nTenemos que hacer que nos solicite usuario y contraseña, para hacer esto tenemos que responder a nuestro cliente desde nuestro middleware con un valor espécifico en la cabecera y ya de paso para hacerlo bien le ponemos el código de estado pertinente (401 en este caso). Pero claro esto no es tan automático como podemos pensar, necesiteamos controlar si ya nos ha pasado usuario y contraseña en nuestra constante userLogin, con todo esto de momento nuestro código sería el siguiente
router.get('/heros', function(req, res, next) {\n\n const userLogin = auth(req);\n \n if (!userLogin) { \n res.set('WWW-Authenticate', 'basic realm=Authorization Required');\n res.send(401);\n return;//Esto para que no continue la ejecución del middleware\n }\n \n res.json({ninja:\"Somos un monton de ninjas autenticados\" })\n});\nSi ahora lo probamos tendríamos esto
\n
\nComo veis nos pide usuario y contraseña pero claro ahora mismo pongamos lo que pongamos nos dejará pasar, tenemos que comprobar el usuario y contraseña de alguna forma. En un principio esto lo ideal sería tener una base de datos, un fichero o similar para comprobar tanto usuario como contraseña, en nuestro caso no tenemos implementado nada de esto por lo que de momento lo que haremos será comprobarlo directamente en el código, pero tener en cuenta que en este punto lo que haríamos sería comprobar en algún lado que los datos son correctos
router.get('/heros', function(req, res, next) {\n\n const userLogin = auth(req);\n \n if (!userLogin) { \n res.set('WWW-Authenticate', 'basic realm=Authorization Required');\n res.send(401);\n return;\n }\n\n //Aqui haríamos la comprobación en nuestras base de datos o similar\n if (userLogin.name !== 'ninja' || userLogin.pass !== '1234' ){\n res.set('WWW-Authenticate', 'basic realm=Authorization Required');\n res.send(401);\n return;\n }\n res.json({ninja:\"Somos un montón de ninjas autenticados\" })\n});\nAhora ya si lo probamos solo funcionará si introducimos ese usuario y contraseña
\n
\nComo veis es bastante simple, veamos ahora como podemos hacer esto un poco más elegante, no creo que sea lo mejor hacer este código en todos los middleware que necesitemos (bueno si es general para toda la aplicación solo necesitamos ponerlo en el app.js y crear un middleware que responda a todas las request, pero ese no creo que sea el escenario en general).
\nVamos a crear nuestro propio módulo para gestionar esto, primero creamos una carpeta lib que sera la que tendrá las librerías/módulos que creemos o importemos y no lo hagamos con npm. Creamos un fichero auth.js y lo que haremos será exportar el callback al que respondería un middleware
'use strict';\n\nconst auth = require('basic-auth');\n\nmodule.exports = (req, res, next) => {\n\n const userLogin = auth(req);\n \n if (!userLogin) { \n res.set('WWW-Authenticate', 'basic realm=Authorization Required');\n res.send(401);\n return;\n }\n\n //Aqui haríamos la comprobación en nuestras base de datos o similar\n if (userLogin.name !== 'ninja' || userLogin.pass !== '12345' ){\n res.set('WWW-Authenticate', 'basic realm=Authorization Required');\n res.send(401);\n return;\n }\n next();//Para que continue con el siguiente middleware\n\n};\nBásicamente he puesto el mismo código que habíamos añadido antes, solo que al final le hemos puesto un next() para que continue con el siguiente middleware que coincida.
\nAhora vamos a módificar nuestra ruta ninjas para que use esto
'use strict'\n\nvar express = require('express');\nvar router = express.Router();\nconst auth = require('../lib/auth.js');\n\n/* GET home page. */\nrouter.get('/heros', auth, function(req, res, next) {\n\n res.json({ninja:\"Somos un montón de ninjas autenticados\" })\n});\n\nmodule.exports = router;\nHemos importado nuestro módulo y simplemente se lo hemos pasado como primer handler del middleware. A un middleware le podemos pasar todos los handlers que queramos y se irán ejecutando uno detrás de otro según vayan terminando.
\nSi ahora lo probáis debería funcionaros igual que antes, probar a cambiar la contraseña porque seguramente el navegador haya almacenado los datos que habéis introducido anteriormente.
\nBueno en cuanto a este método de autenticación poco más merece que miremos, es bastante sencillo y pueden existir otro tipo de implementaciones pero este sería el funcionamiento típico.
Y, ¿qué es JSON Web Token?... básicamente es una forma de tener una sesión pero almacenandola en el cliente, lo que aligera un poco la gestión de esto por parte del backend y como su nombre indica lo hacemos en formato JSON.
\nEl proceso sería el siguiente. El usuario se autentica con su usuario y contraseña, el cual se comprueba de alguna forma (BBDD, fichero, etc...), el backend una vez que confirma los datos le devuelve al usuario un token. A partir de entonces todas las peticiones HTTP del usuario deben ir acompañadas de este token(cabecera, queryString...). El token se almacena en el lado del cliente de alguna forma(sessionStorage o localStorage por ejemplo), lo que hace que no tenga que mantener esta información el backend, lo que convierte todo en bastante más escalable. El Token es una firma cifrada que el backend descifra y verifica al recibirla lo que permite confirmar la identidad del usuario.
\nEste tipo de autenticación nos permite utilizar el mismo tipo de autenticación para todos nuestros desarrollos (Web, Android, IOS,....) solo es necesario hacer la gestión pertinente del token. También nos provee de algo más de seguridad, ya que no usa cookies para mantener información de usuario se pueden evitar ciertos tipos de ataques que manipulen la sesión y además podemos hacer que el token expire cada cierto tiempo lo que nos provee de otra capa más de seguridad.
\nVamos a hablar un poco del token que recibimos para que entendamos un poco que información lleva. Este de aqui será un token tipo
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjoibmluamEiLCJpYXQiOjE1MDY4NDk4NTEsImV4cCI6MTUwNzAyMjY1MX0.qVSS9iQAyIQzjlp4uCyiJUOGSgXMSbmZUAJ7hQncco4\nSi os fijáis bien esta compuesto por tres strings separados por puntos, hablemos un poco de cada uno
\n1º Header
\neyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9\nEsto básicamente indica el tipo de token y el algoritmo usado para codificar, normalmente es HMAC SHA256. Descodificado sería algo similar a esto:
\n{\n \"alg\": \"HS256\",\n \"typ\": \"JWT\"\n}\n2º Payload/Data
\neyJ1c2VyIjoibmluamEiLCJpYXQiOjE1MDY4NDk4NTEsImV4cCI6MTUwNzAyMjY1MX0\nLa segunda parte tiene datos extra que indicamos nosotros desde el backend que se guarden, ya sea para recomprobar en el backend o cualquier otra cosa. Este payload a parte de la información que queramos nosotros guardar, tiene lo que se conoce como claims, son atributos propios que definen el token(aqui más en detalle), tiene mínimo 2:
\nDescodificado este tendría:
\n{\n \"user\": \"ninja\",\n \"iat\": 1506849851,\n \"exp\": 1507022651\n}\n3º Firma/Signature
\nqVSS9iQAyIQzjlp4uCyiJUOGSgXMSbmZUAJ7hQncco4\nEsta última parte es la que realmente comprobamos en el backend, esta compuesta de los 2 strings anteriores codificados en BASE64 junto con una clave secreta que indicamos nosotros en el backend, por lo que si lo que descodifica en este punto es igual que lo anterior da por sentado que es correcto.
\nDescodificado sería:
HMACSHA256(\n base64UrlEncode(header) + \".\" +\n base64UrlEncode(payload),\n Secret KEY\n)\nSecret KEY es la clave secreta que hemos usado para codificar. Podemos comprobar este token completo en la pagina oficial de JWT.io solo es necesario copiar el token completo en la parte donde pone ENCODED y poner la clave secreta \"Secret KEY\" en la zona donde pone VERIFY SIGNATURE.
\nBueno ya hemos visto un poco de teoría sobre de que esta compuesto el token, ahora vamos a implantar JWT en Node para que veamos un ejemplo de como se hace implanta.
Lo primero de todo como siempre es instalar el módulo de jsonwebtoken con npm.
\nnpm install jsonwebtoken --save\nUna vez instalado, vamos a crearnos otra ruta para hacer el login (así repasamos un poco), para ello en la carpeta routes creamos el fichero login.js con este contenido
\nvar express = require('express');\nvar router = express.Router();\nconst jwt = require('jsonwebtoken')\n\n\nrouter.post('/', function(req, res, next) {\n \n const user = req.body.user; \n const pass = req.body.pass;\n\n if (!user){\n return res.status(401).json({sucess: false, error: 'Auth failed. We need a valid user'});\n }\n\n if (!pass){\n return res.status(401).json({sucess: false, error: 'Auth failed. We need a valid pass'});\n }\n \n //Aqui lo suyo es que comprobaramos con una base de datos o fichero el usuario y contraseña\n if (user !== 'ninja' || pass !== '1234'){\n return res.status(401).json({sucess: false, error: 'Auth failed. Invalid user or password'});\n \n }\n \n //La clabe secreta que pone Secret KEY debería estar en un fichero de configuración o deberíamos usar variables de entorno para que no este puesta directamente\n const token = jwt.sign({user: user},'Secret KEY',{expiresIn: \"2 days\"});\n res.json({sucess: true, token: token});\n\n});\n\nmodule.exports = router;\nComo siempre requerimos express e instanciamos router, como extra requerimos nuestro nuevo módulo jsonwebtoken
\nconst express = require('express');\nconst router = express.Router();\nconst jwt = require('jsonwebtoken')\nHacemos que este nuevo middleware responda a peticiones post, necesario ya que mandaremos la información en el body, y extraemos el usuario y contraseña para comprobarlos(se podría hacer en el cliente que la contraseña se codificara de alguna forma para mayor seguridad pero eso esta fuera de lo que queremos ver con Node)
\nrouter.post('/', function(req, res, next) {\n \n const user = req.body.user; \n const pass = req.body.pass;\nPonemos comprobaciones típicas, por si el usuario o contraseña estan vacios y en nuestro caso que usuario y contraseña están bien, pero recordar que esto realmente se debería comprobar en una base de datos o similar, esto es solo para agilizar el desarrollo
\n if (!user){\n return res.status(401).json({sucess: false, error: 'Auth failed. We need a valid user'});\n }\n\n if (!pass){\n return res.status(401).json({sucess: false, error: 'Auth failed. We need a valid pass'});\n }\n\n if (user !== 'ninja' || pass !== '1234'){\n return res.status(401).json({sucess: false, error: 'Auth failed. Invalid user or password'});\n \n }\nAhora tenemos donde creamos el token
\nconst token = jwt.sign({user: user},'Secret KEY',{expiresIn: \"2 days\"});\nLe hemos puesto un payload/data en formato JSON(da menos problemas con este formato) que contiene el usuario. Luego le hemos indicado la clave secreta para componer el hash Secret KEY, **IMPORTANTE esto no debería estar así deberíamos ponerlo en un fichero de configuración o en las variables de entorno de nuestro backend, para extraerlo con process.env... **. Por último le hemos indicado el tiempo de expiración de nuestro token, esto tiene varios formatos podéis verlos en la página de npm sobre JSON Web token.
\nPor último le devolvemos al cliente el token que hemos generado para que lo use
res.json({sucess: true, token: token});\nYa tenemos nuestra nueva ruta creada, la indicamos en el app.js, importamos la nueva ruta, por ejemplo debajo de la de ninjas que creamos anteriormente
\nvar ninjas = require('./routes/ninjas');\nvar login = require('./routes/login');\nY le indicamos a express que la use(debajo de la de ninjas por ejemplo)
\napp.use('/ninjas',ninjas);\napp.use('/login',login);\nVoilá ya lo tenemos ahora vamos a probarlo, lo mejor sería hacerlo con un software tipo POSTMAN o similar que nos permite personalizar como hacemos las peticiones HTTP.
\nComo hemos configurado le pasamos en el body por post el usuario y contraseña.
\n
\nComo veis tenemos nuestro token jejejeje, relativamente sencillo ¿verdad? Si cambiamos la contraseña veréis como nos devuelve algún tipo de 401
\n
Bueno ya tenemos el token.....pero nos falta algún sitio para usarlo, ¿no?...pues vamos a por ello.
\nAl igual que hicimos arriba con Basic Auth vamos a crearnos un módulo para gestionar la verificación del login. En la carpeta lib creamos el fichero authJWT.js y ponemos lo siguiente
const jwt = require('jsonwebtoken');\n\nmodule.exports = function(req,res,next) {\n \n const token = req.query.token;\n\n if (token){\n \n jwt.verify(token,'Secret KEY',(err,decoded) => {\n if (err){\n console.log(decoded)\n return res.status(401).json({success: false, error: 'Failed to authenticate token'});\n } else {\n console.log('Decoded',decoded);\n next();\n }\n });\n\n }else{\n return res.status(403).json({success: false, error: 'No token provided'})\n }\n }\nEl código es bastante simple, recibimos el token por queryString, y lo verificamos con jwt.verify pasandole también la clave privada que hemos usado y una vez comprobado saltaría el callback con el error o con el payload descodificado. Recordar clave secreta aqui kaka, tiene que estar en fichero de configuración o en variable de entorno
\njwt.verify(token,'Secret KEY',(err,decoded) => {\nLe he puesto un console.log para que veáis lo que descodifica si todo va bien o da error.
\nPor último tenemos que hacer que algún middleware lo use de alguna manera. En este caso vamos a cambiar el que usamos con Basic Auth y usamos el nuevo con JWT. Nos vamos a ninjas.js y ponemos lo siguiente
'use strict'\n\nvar express = require('express');\nvar router = express.Router();\n//const auth = require('../lib/auth.js');\nconst authJWT = require('../lib/authJWT.js');\n\nrouter.get('/heros', authJWT, function(req, res, next) {\n\n res.json({ninja:\"Somos un monton de ninjas autenticados\" })\n});\n\nmodule.exports = router;\nComentamos lo que pertenecia a basic-auth y hacemos lo mismo que hicimos antes pero con JWT y ya lo tendríamos, vamos a probarlo para ello el token que nos ha devuelto antes se lo pasamos como queryString
\nhttp://localhost:3000/ninjas/heros?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjoibmluamEiLCJpYXQiOjE1MDY4NTUzNTAsImV4cCI6MTUwNzAyODE1MH0.RS-ow1UqTz66l5X26rpKw5qB-1gX31t8_ycNgIkdUuE\nY si todo va bien veremos esto
\n
\ny si por algún motivo el token no es correcto
\n
\nBueno como hemos visto usar JSON web Token es relativamente sencillo, en este caso no hemos usado base de datos pero lo ideal seria tener los usuarios y contraseñas almacenados en una base de datos, con la contraseña codificada con algún tipo de hash por supuesto, y hacer las comprobaciones con ellos, no tenerlos en nuestro código puestos a mano.
\nComo extra comentaros que casi todos los métodos de autenticación con token (login con terceros como Google, Facebook, OAuth, Azure o AWS por ejemplo) suelen funcionar de forma similar, es decir un token que almacenamos y pasamos en cada petición normalmente en el header con un nombre tipo x-access-token, authorization o similar.
Y hasta aquí la parte de autenticación en el siguiente post y el último por el momento de esta serie de Node (Lo siguiente será mezclar con MongoDB) hablaremos de Promesas que aunque no es propio de NodeJS, es más de JS creo que es útil que las repasemos y también veremos como poner nuestro proceso de Node en cluster para aumentar el rendimiento con un gran númeo de peticiones. Luego empezaré una linea nueva de post donde hablaremos de MongoDB y ya de paso lo integraremos con Node.
\nNos veeeemossss un abrazooorrrrrr
\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En este post vamos a centrarnos en algunas de las posibilidades de implementación de autenticación en Node, concretamente hablaremos de lo que se conoce como "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Basic Auth"}]},{"type":"text","value":" y de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"JSON Web Token"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"basicauth"},"children":[{"type":"text","value":"Basic Auth"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Este sistema de autenticación es el más sencillo de todos, y a su vez no de lo más seguro, pero puede que para un sistema sencillo o alguna aplicación interna pueda servirnos (en plan....bueno voy a intentar que no entre todo el mundo pero si entras....pues bienvenido pásalo bien ;) )."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nVamos a configurar por ejemplo nuestra ruta con "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"heros"}]},{"type":"text","value":", la que está en el fichero "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"ninjas.js"}]},{"type":"text","value":" para que nos solicite un usuario y contraseña."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lo primero de todo como es habitual en Node, usaremos "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":" para instalar el módulo necesario"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"npm install basic-auth --save\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A continuación lo que hacemos es "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"requerir"}]},{"type":"text","value":" el módulo como siempre y lo siguiente en el middleware que queramos usamos lo que hemos "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"requerido"}]},{"type":"text","value":" y le pasamos la request. Esto lo que hará será buscar datos de usuario y contraseña en ella."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"//Con esto importamos el módulo\nconst auth = require('basic-auth');\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y en nuestro middleware"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"router.get('/heros', function(req, res, next) {\n\n const userLogin = auth(req);\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ahora si lo probaramos esto no haría nada, tenemos que añadirle algunas cosas más."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nTenemos que hacer que nos solicite usuario y contraseña, para hacer esto tenemos que responder a nuestro cliente desde nuestro middleware con un valor espécifico en la cabecera y ya de paso para hacerlo bien le ponemos el código de estado pertinente (401 en este caso). Pero claro esto no es tan automático como podemos pensar, necesiteamos controlar si ya nos ha pasado usuario y contraseña en nuestra constante "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"userLogin"}]},{"type":"text","value":", con todo esto de momento nuestro código sería el siguiente"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"router.get('/heros', function(req, res, next) {\n\n const userLogin = auth(req);\n \n if (!userLogin) { \n res.set('WWW-Authenticate', 'basic realm=Authorization Required');\n res.send(401);\n return;//Esto para que no continue la ejecución del middleware\n }\n \n res.json({ninja:\"Somos un monton de ninjas autenticados\" })\n});\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si ahora lo probamos tendríamos esto"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-30-at-12.33.17.png","alt":"Http_Auth example1"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nComo veis nos pide usuario y contraseña pero claro ahora mismo pongamos lo que pongamos nos dejará pasar, tenemos que comprobar el usuario y contraseña de alguna forma. En un principio esto lo ideal sería tener una base de datos, un fichero o similar para comprobar tanto usuario como contraseña, en nuestro caso no tenemos implementado nada de esto por lo que de momento lo que haremos será comprobarlo directamente en el código, pero tener en cuenta que en este punto lo que haríamos sería comprobar en algún lado que los datos son correctos"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"router.get('/heros', function(req, res, next) {\n\n const userLogin = auth(req);\n \n if (!userLogin) { \n res.set('WWW-Authenticate', 'basic realm=Authorization Required');\n res.send(401);\n return;\n }\n\n //Aqui haríamos la comprobación en nuestras base de datos o similar\n if (userLogin.name !== 'ninja' || userLogin.pass !== '1234' ){\n res.set('WWW-Authenticate', 'basic realm=Authorization Required');\n res.send(401);\n return;\n }\n res.json({ninja:\"Somos un montón de ninjas autenticados\" })\n});\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ahora ya si lo probamos solo funcionará si introducimos ese usuario y contraseña"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-30-at-12.39.40.png","alt":"Http Auth success"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nComo veis es bastante simple, veamos ahora como podemos hacer esto un poco más elegante, no creo que sea lo mejor hacer este código en todos los middleware que necesitemos (bueno si es general para toda la aplicación solo necesitamos ponerlo en el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"app.js"}]},{"type":"text","value":" y crear un middleware que responda a todas las request, pero ese no creo que sea el escenario en general)."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nVamos a crear nuestro propio módulo para gestionar esto, primero creamos una carpeta "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"lib"}]},{"type":"text","value":" que sera la que tendrá las librerías/módulos que creemos o importemos y no lo hagamos con npm. Creamos un fichero "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"auth.js"}]},{"type":"text","value":" y lo que haremos será "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"exportar"}]},{"type":"text","value":" el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"callback"}]},{"type":"text","value":" al que respondería un middleware"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"'use strict';\n\nconst auth = require('basic-auth');\n\nmodule.exports = (req, res, next) => {\n\n const userLogin = auth(req);\n \n if (!userLogin) { \n res.set('WWW-Authenticate', 'basic realm=Authorization Required');\n res.send(401);\n return;\n }\n\n //Aqui haríamos la comprobación en nuestras base de datos o similar\n if (userLogin.name !== 'ninja' || userLogin.pass !== '12345' ){\n res.set('WWW-Authenticate', 'basic realm=Authorization Required');\n res.send(401);\n return;\n }\n next();//Para que continue con el siguiente middleware\n\n};\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Básicamente he puesto el mismo código que habíamos añadido antes, solo que al final le hemos puesto un "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"next()"}]},{"type":"text","value":" para que continue con el siguiente middleware que coincida."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nAhora vamos a módificar nuestra ruta "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"ninjas"}]},{"type":"text","value":" para que use esto"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"'use strict'\n\nvar express = require('express');\nvar router = express.Router();\nconst auth = require('../lib/auth.js');\n\n/* GET home page. */\nrouter.get('/heros', auth, function(req, res, next) {\n\n res.json({ninja:\"Somos un montón de ninjas autenticados\" })\n});\n\nmodule.exports = router;\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Hemos importado nuestro módulo y simplemente se lo hemos pasado como primer handler del middleware. "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"A un middleware le podemos pasar todos los handlers que queramos y se irán ejecutando uno detrás de otro según vayan terminando"}]},{"type":"text","value":"."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nSi ahora lo probáis debería funcionaros igual que antes, probar a cambiar la contraseña porque seguramente el navegador haya almacenado los datos que habéis introducido anteriormente."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nBueno en cuanto a este método de autenticación poco más merece que miremos, es bastante sencillo y pueden existir otro tipo de implementaciones pero este sería el funcionamiento típico."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"jsonwebtoken"},"children":[{"type":"text","value":"JSON Web Token"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y, ¿qué es JSON Web Token?... básicamente es una forma de tener una sesión pero almacenandola en el cliente, lo que aligera un poco la gestión de esto por parte del backend y como su nombre indica lo hacemos en formato JSON."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nEl proceso sería el siguiente. El usuario se autentica con su usuario y contraseña, el cual se comprueba de alguna forma (BBDD, fichero, etc...), el backend una vez que confirma los datos le devuelve al usuario un "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"token"}]},{"type":"text","value":". A partir de entonces todas las peticiones HTTP del usuario deben ir acompañadas de este token(cabecera, queryString...). El token se almacena en el lado del cliente de alguna forma("},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"sessionStorage o localStorage"}]},{"type":"text","value":" por ejemplo), lo que hace que no tenga que mantener esta información el backend, lo que convierte todo en bastante más escalable. El "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Token"}]},{"type":"text","value":" es una firma cifrada que el backend descifra y verifica al recibirla lo que permite confirmar la identidad del usuario."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nEste tipo de autenticación nos permite utilizar el mismo tipo de autenticación para todos nuestros desarrollos (Web, Android, IOS,....) solo es necesario hacer la gestión pertinente del token. También nos provee de algo más de seguridad, ya que no usa cookies para mantener información de usuario se pueden evitar ciertos tipos de ataques que manipulen la sesión y además podemos hacer que el token expire cada cierto tiempo lo que nos provee de otra capa más de seguridad."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nVamos a hablar un poco del token que recibimos para que entendamos un poco que información lleva. Este de aqui será un token tipo"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjoibmluamEiLCJpYXQiOjE1MDY4NDk4NTEsImV4cCI6MTUwNzAyMjY1MX0.qVSS9iQAyIQzjlp4uCyiJUOGSgXMSbmZUAJ7hQncco4\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si os fijáis bien esta compuesto por tres strings separados por puntos, hablemos un poco de cada uno"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"1º Header"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto básicamente indica el tipo de token y el algoritmo usado para codificar, normalmente es "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"HMAC SHA256"}]},{"type":"text","value":". Descodificado sería algo similar a esto:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"{\n \"alg\": \"HS256\",\n \"typ\": \"JWT\"\n}\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"2º Payload/Data"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"eyJ1c2VyIjoibmluamEiLCJpYXQiOjE1MDY4NDk4NTEsImV4cCI6MTUwNzAyMjY1MX0\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"La segunda parte tiene datos extra que indicamos nosotros desde el backend que se guarden, ya sea para recomprobar en el backend o cualquier otra cosa. Este "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"payload"}]},{"type":"text","value":" a parte de la información que queramos nosotros guardar, tiene lo que se conoce como "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"claims"}]},{"type":"text","value":", son atributos propios que definen el token("},{"type":"element","tagName":"a","properties":{"href":"http://self-issued.info/docs/draft-ietf-oauth-json-web-token.html#RegisteredClaimName"},"children":[{"type":"text","value":"aqui"}]},{"type":"text","value":" más en detalle), tiene mínimo 2:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"iat"}]},{"type":"text","value":": La fecha en la que se creó el token."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"exp"}]},{"type":"text","value":": La fecha de expiración del token. Esto normalmente lo indicamos nosotros desde el backend."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Descodificado este tendría:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"{\n \"user\": \"ninja\",\n \"iat\": 1506849851,\n \"exp\": 1507022651\n}\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"3º Firma/Signature"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"qVSS9iQAyIQzjlp4uCyiJUOGSgXMSbmZUAJ7hQncco4\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esta última parte es la que realmente comprobamos en el backend, esta compuesta de los 2 strings anteriores codificados en "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"BASE64"}]},{"type":"text","value":" junto con una "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"clave secreta"}]},{"type":"text","value":" que indicamos nosotros en el backend, por lo que si lo que descodifica en este punto es igual que lo anterior da por sentado que es correcto."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nDescodificado sería:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"HMACSHA256(\n base64UrlEncode(header) + \".\" +\n base64UrlEncode(payload),\n Secret KEY\n)\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Secret KEY"}]},{"type":"text","value":" es la clave secreta que hemos usado para codificar. Podemos comprobar este token completo en la pagina oficial de "},{"type":"element","tagName":"a","properties":{"href":"https://jwt.io/"},"children":[{"type":"text","value":"JWT.io"}]},{"type":"text","value":" solo es necesario copiar el token completo en la parte donde pone "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"ENCODED"}]},{"type":"text","value":" y poner la clave secreta "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"\"Secret KEY\""}]},{"type":"text","value":" en la zona donde pone "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"VERIFY SIGNATURE"}]},{"type":"text","value":"."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nBueno ya hemos visto un poco de teoría sobre de que esta compuesto el token, ahora vamos a implantar "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"JWT"}]},{"type":"text","value":" en "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Node"}]},{"type":"text","value":" para que veamos un ejemplo de como se hace implanta."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lo primero de todo como siempre es instalar el módulo de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"jsonwebtoken"}]},{"type":"text","value":" con npm."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"npm install jsonwebtoken --save\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Una vez instalado, vamos a crearnos otra "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"ruta"}]},{"type":"text","value":" para hacer el login (así repasamos un poco), para ello en la carpeta "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"routes"}]},{"type":"text","value":" creamos el fichero "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"login.js"}]},{"type":"text","value":" con este contenido"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var express = require('express');\nvar router = express.Router();\nconst jwt = require('jsonwebtoken')\n\n\nrouter.post('/', function(req, res, next) {\n \n const user = req.body.user; \n const pass = req.body.pass;\n\n if (!user){\n return res.status(401).json({sucess: false, error: 'Auth failed. We need a valid user'});\n }\n\n if (!pass){\n return res.status(401).json({sucess: false, error: 'Auth failed. We need a valid pass'});\n }\n \n //Aqui lo suyo es que comprobaramos con una base de datos o fichero el usuario y contraseña\n if (user !== 'ninja' || pass !== '1234'){\n return res.status(401).json({sucess: false, error: 'Auth failed. Invalid user or password'});\n \n }\n \n //La clabe secreta que pone Secret KEY debería estar en un fichero de configuración o deberíamos usar variables de entorno para que no este puesta directamente\n const token = jwt.sign({user: user},'Secret KEY',{expiresIn: \"2 days\"});\n res.json({sucess: true, token: token});\n\n});\n\nmodule.exports = router;\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como siempre "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"requerimos"}]},{"type":"text","value":" express e instanciamos "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"router"}]},{"type":"text","value":", como extra "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"requerimos"}]},{"type":"text","value":" nuestro nuevo módulo "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"jsonwebtoken"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"const express = require('express');\nconst router = express.Router();\nconst jwt = require('jsonwebtoken')\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Hacemos que este nuevo middleware responda a peticiones "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"post"}]},{"type":"text","value":", necesario ya que mandaremos la información en el body, y extraemos el usuario y contraseña para comprobarlos(se podría hacer en el cliente que la contraseña se codificara de alguna forma para mayor seguridad pero eso esta fuera de lo que queremos ver con Node)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"router.post('/', function(req, res, next) {\n \n const user = req.body.user; \n const pass = req.body.pass;\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ponemos comprobaciones típicas, por si el usuario o contraseña estan vacios y en nuestro caso que usuario y contraseña están bien, pero recordar que esto realmente se debería comprobar en una base de datos o similar, esto es solo para agilizar el desarrollo"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":" if (!user){\n return res.status(401).json({sucess: false, error: 'Auth failed. We need a valid user'});\n }\n\n if (!pass){\n return res.status(401).json({sucess: false, error: 'Auth failed. We need a valid pass'});\n }\n\n if (user !== 'ninja' || pass !== '1234'){\n return res.status(401).json({sucess: false, error: 'Auth failed. Invalid user or password'});\n \n }\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ahora tenemos donde creamos el token"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"const token = jwt.sign({user: user},'Secret KEY',{expiresIn: \"2 days\"});\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Le hemos puesto un "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"payload/data"}]},{"type":"text","value":" en formato JSON(da menos problemas con este formato) que contiene el usuario. Luego le hemos indicado la clave secreta para componer el hash "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Secret KEY"}]},{"type":"text","value":", **IMPORTANTE esto no debería estar así deberíamos ponerlo en un fichero de configuración o en las variables de entorno de nuestro backend, para extraerlo con "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"process.env..."}]},{"type":"text","value":" **. Por último le hemos indicado el tiempo de expiración de nuestro token, esto tiene varios formatos podéis verlos en la página de npm sobre "},{"type":"element","tagName":"a","properties":{"href":"https://www.npmjs.com/package/jsonwebtoken"},"children":[{"type":"text","value":"JSON Web token"}]},{"type":"text","value":"."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPor último le devolvemos al cliente el token que hemos generado para que lo use"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"res.json({sucess: true, token: token});\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ya tenemos nuestra nueva ruta creada, la indicamos en el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"app.js"}]},{"type":"text","value":", importamos la nueva ruta, por ejemplo debajo de la de ninjas que creamos anteriormente"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var ninjas = require('./routes/ninjas');\nvar login = require('./routes/login');\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y le indicamos a express que la use(debajo de la de ninjas por ejemplo)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"app.use('/ninjas',ninjas);\napp.use('/login',login);\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Voilá ya lo tenemos ahora vamos a probarlo, lo mejor sería hacerlo con un software tipo "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"POSTMAN"}]},{"type":"text","value":" o similar que nos permite personalizar como hacemos las peticiones HTTP."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nComo hemos configurado le pasamos en el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"body por post"}]},{"type":"text","value":" el usuario y contraseña."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Screen-Shot-2017-10-01-at-12.48.36.png","alt":"Postman login"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nComo veis tenemos nuestro token jejejeje, relativamente sencillo ¿verdad? Si cambiamos la contraseña veréis como nos devuelve algún tipo de 401"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Screen-Shot-2017-10-01-at-12.50.30.png","alt":"postman fail login"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bueno ya tenemos el token.....pero nos falta algún sitio para usarlo, ¿no?...pues vamos a por ello."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nAl igual que hicimos arriba con "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Basic Auth"}]},{"type":"text","value":" vamos a crearnos un módulo para gestionar la verificación del login. En la carpeta "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"lib"}]},{"type":"text","value":" creamos el fichero "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"authJWT.js"}]},{"type":"text","value":" y ponemos lo siguiente"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"const jwt = require('jsonwebtoken');\n\nmodule.exports = function(req,res,next) {\n \n const token = req.query.token;\n\n if (token){\n \n jwt.verify(token,'Secret KEY',(err,decoded) => {\n if (err){\n console.log(decoded)\n return res.status(401).json({success: false, error: 'Failed to authenticate token'});\n } else {\n console.log('Decoded',decoded);\n next();\n }\n });\n\n }else{\n return res.status(403).json({success: false, error: 'No token provided'})\n }\n }\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"El código es bastante simple, recibimos el token por "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"queryString"}]},{"type":"text","value":", y lo verificamos con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"jwt.verify"}]},{"type":"text","value":" pasandole también la "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"clave privada"}]},{"type":"text","value":" que hemos usado y una vez comprobado saltaría el callback con el error o con el payload descodificado. "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Recordar clave secreta aqui kaka, tiene que estar en fichero de configuración o en variable de entorno"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"jwt.verify(token,'Secret KEY',(err,decoded) => {\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Le he puesto un "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"console.log"}]},{"type":"text","value":" para que veáis lo que descodifica si todo va bien o da error."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPor último tenemos que hacer que algún middleware lo use de alguna manera. En este caso vamos a cambiar el que usamos con "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Basic Auth"}]},{"type":"text","value":" y usamos el nuevo con "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"JWT"}]},{"type":"text","value":". Nos vamos a "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"ninjas.js"}]},{"type":"text","value":" y ponemos lo siguiente"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"'use strict'\n\nvar express = require('express');\nvar router = express.Router();\n//const auth = require('../lib/auth.js');\nconst authJWT = require('../lib/authJWT.js');\n\nrouter.get('/heros', authJWT, function(req, res, next) {\n\n res.json({ninja:\"Somos un monton de ninjas autenticados\" })\n});\n\nmodule.exports = router;\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Comentamos lo que pertenecia a "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"basic-auth"}]},{"type":"text","value":" y hacemos lo mismo que hicimos antes pero con "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"JWT"}]},{"type":"text","value":" y ya lo tendríamos, vamos a probarlo para ello el token que nos ha devuelto antes se lo pasamos como "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"queryString"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"http://localhost:3000/ninjas/heros?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjoibmluamEiLCJpYXQiOjE1MDY4NTUzNTAsImV4cCI6MTUwNzAyODE1MH0.RS-ow1UqTz66l5X26rpKw5qB-1gX31t8_ycNgIkdUuE\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y si todo va bien veremos esto"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Screen-Shot-2017-10-01-at-13.09.04.png","alt":"Token success"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\ny si por algún motivo el token no es correcto"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Screen-Shot-2017-10-01-at-13.09.48.png","alt":"Token error"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nBueno como hemos visto usar "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"JSON web Token"}]},{"type":"text","value":" es relativamente sencillo, en este caso no hemos usado base de datos pero lo ideal seria tener los usuarios y contraseñas almacenados en una base de datos, con la contraseña codificada con algún tipo de hash por supuesto, y hacer las comprobaciones con ellos, no tenerlos en nuestro código puestos a mano."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nComo extra comentaros que casi todos los métodos de autenticación con token (login con terceros como Google, Facebook, OAuth, Azure o AWS por ejemplo) suelen funcionar de forma similar, es decir un token que almacenamos y pasamos en cada petición normalmente en el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"header"}]},{"type":"text","value":" con un nombre tipo "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"x-access-token"}]},{"type":"text","value":", "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"authorization"}]},{"type":"text","value":" o similar."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y hasta aquí la parte de autenticación en el siguiente post y el último por el momento de esta serie de Node (Lo siguiente será mezclar con MongoDB) hablaremos de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Promesas"}]},{"type":"text","value":" que aunque no es propio de NodeJS, es más de JS creo que es útil que las repasemos y también veremos como poner nuestro proceso de Node en "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"cluster"}]},{"type":"text","value":" para aumentar el rendimiento con un gran númeo de peticiones. Luego empezaré una linea nueva de post donde hablaremos de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"MongoDB"}]},{"type":"text","value":" y ya de paso lo integraremos con Node."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Nos veeeemossss un abrazooorrrrrr"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"basicauth","heading":"Basic Auth"},{"id":"jsonwebtoken","heading":"JSON Web Token"}]},"featureImageSharp":{"base":"nodebaner-6.jpg","publicURL":"/static/ebae59fce798d71ce68bf2a304f1491f/nodebaner-6.jpg","imageMeta":{"width":1680,"height":420},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAME/9oADAMBAAIQAxAAAAGrMokzQT//xAAXEAEBAQEAAAAAAAAAAAAAAAACASIh/9oACAEBAAEFAgMKdU1//8QAFhEBAQEAAAAAAAAAAAAAAAAAAAEx/9oACAEDAQE/AamP/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAEx/9oACAECAQE/AV1//8QAFRABAQAAAAAAAAAAAAAAAAAAEHH/2gAIAQEABj8Cr//EABgQAQADAQAAAAAAAAAAAAAAAAEAETEh/9oACAEBAAE/Ido1iddq0QhE/9oADAMBAAIAAwAAABDz/wD/xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QbrNxf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxAgav/EABgQAQADAQAAAAAAAAAAAAAAAAEAETFx/9oACAEBAAE/ECLXUGFQ03NnlQ0Zc//Z","aspectRatio":3.977272727272727,"src":"/static/ebae59fce798d71ce68bf2a304f1491f/ea4ab/nodebaner-6.jpg","srcSet":"/static/ebae59fce798d71ce68bf2a304f1491f/477ba/nodebaner-6.jpg 175w,\n/static/ebae59fce798d71ce68bf2a304f1491f/06776/nodebaner-6.jpg 350w,\n/static/ebae59fce798d71ce68bf2a304f1491f/ea4ab/nodebaner-6.jpg 700w,\n/static/ebae59fce798d71ce68bf2a304f1491f/3055e/nodebaner-6.jpg 1050w,\n/static/ebae59fce798d71ce68bf2a304f1491f/eff08/nodebaner-6.jpg 1400w,\n/static/ebae59fce798d71ce68bf2a304f1491f/34c3a/nodebaner-6.jpg 1680w","srcWebp":"/static/ebae59fce798d71ce68bf2a304f1491f/89afa/nodebaner-6.webp","srcSetWebp":"/static/ebae59fce798d71ce68bf2a304f1491f/9fca7/nodebaner-6.webp 175w,\n/static/ebae59fce798d71ce68bf2a304f1491f/37a4e/nodebaner-6.webp 350w,\n/static/ebae59fce798d71ce68bf2a304f1491f/89afa/nodebaner-6.webp 700w,\n/static/ebae59fce798d71ce68bf2a304f1491f/78e7a/nodebaner-6.webp 1050w,\n/static/ebae59fce798d71ce68bf2a304f1491f/03d34/nodebaner-6.webp 1400w,\n/static/ebae59fce798d71ce68bf2a304f1491f/41aa5/nodebaner-6.webp 1680w","sizes":"(max-width: 700px) 100vw, 700px"}}}}}]}},"pageContext":{"slug":"dont-stop-the-party-node-js-ix-rutas","prev":"dont-stop-the-party-node-js-x-templates-o-vistas","next":"dont-stop-the-party-node-js-vii-mvc-y-express","tag":"nodejs","limit":3,"skip":0,"primaryTagCount":13,"collectionPaths":{}}}, "staticQueryHashes": ["1272700106","1676991999","2138873178","2546165603","2681841279","2938721187","293880488","3052966952","4156497161"]}