Tiempo estimado: 10min
El objeto de esta práctica es asentar y consolidar los conceptos presentados en la parte teórica de la lección. Al finalizarla, el estudiante:
• Habrá configurado body-parser.
• Habrá accedido al contenido remitido por el usuario mediante un formulario. Objetivos
El objetivo de la práctica es crear una aplicación Express que procese un formulario mediante el método POST y el tipo de contenido application/x-www-form-urlencoded.
Creaci n del proyectoó
Para comenzar, vamos a crear el proyecto de la aplicación. 1. Abrir una consola.
2. Crear el directorio de la práctica. 3. Ir al directorio de la práctica.
4. Crear el archivo package.json con el siguiente contenido:
{
"name": "express-app", "version": "0.1.0", "private": true, "scripts": {
"start": "node ./app.js",
"start-dev": "./node_modules/.bin/nodemon ./app.js" }, "dependencies": { "express": "*", "serve-static": "*" }, "devDependencies": { "nodemon": "*" } }
5. Crear la carpeta pública public.
6. Crear el archivo index.html en la carpeta pública:
<!doctype html> <html> <head> <title>Express app</title> </head> <body> <p>¡Hola Mundo!</p> </body> </html>
7. Crear el archivo app.js con el siguiente contenido:
"use strict"; //imports
const express = require("express"); const http = require("http"); const path = require("path"); //app
const app = express(); //middleware app.use(require("serve-static")(path.join(__dirname, "public"))); //listen http.createServer(app).listen(8080, function() { console.log("Listening..."); }); 8. Instalar dependencias: > npm install
9. Iniciar la aplicación Express:
> npm run start-dev
10. Abrir el navegador. 11. Ir a http://localhost:8080. Configuraci n de body parseró -Veamos cómo usar body-parser:
1. Editar el archivo package.json.
2. Añadir body-parser a las dependencias de la aplicación:
"dependencies": { "express": "*", "body-parser": "*", "serve-static": "*" } 3. Guardar cambios. 4. Abrir una nueva consola. 5. Ir al directorio de la práctica. 6. Instalar las nuevas dependencias:
> npm update
7. Crear el archivo public/form.html:
<!doctype html> <html> <head> <title>Express app</title> </head> <body>
<form action="/form" method="post" enctype="application/x-www-form-urlencoded"> <label>Nombre de usuario: <input type="text" name="username"></label><br> <label>Contraseña: <input type="password" name="password"></label><br> <button type="submit">Enviar</button>
</form> </body> </html>
8. Editar el archivo app.js.
9. Añadir el analizador de cuerpo urlencoded a la pila de middleware:
//middleware
app.use(require("serve-static")(path.join(__dirname, "public"))); app.use(require("body-parser").urlencoded({extended: false}));
10. Añadir el controlador de la ruta /form, el cual se encargará de procesar los datos remitidos por el usuario mediante el formulario:
//rutas
app.post("/form", function(req, res) { res.json(req.body);
});
11. Guardar cambios. 12. Ir al navegador.
13. Solicitar http://localhost:8080/form.html.
14. Rellenar el formulario y hacer clic en el botón Enviar. Restricci n de body parser a ruta particularó
-En la sección anterior, configuramos body-parser para que analizase todas las peticiones HTTP recibidas por la aplicación. Ahora, vamos a configurarlo para que sólo analice las peticiones del recurso /form:
1. Editar el archivo app.js.
2. Suprimir el registro de body-parser en la pila de middleware.
3. Modificar el controlador POST de la ruta /form para que antes ejecute body-parser:
//rutas app.post( "/form",
require("body-parser").urlencoded({extended: false}), function(req, res) { res.json(req.body); }
);
4. Guardar cambios. 5. Ir al navegador.
6. Solicitar http://localhost:8080/form.html.
7. Rellenar el formulario y hacer clic en el botón Enviar.
Generadores
Tiempo estimado: 10min
Para finalizar el curso, vamos a presentar los generadores, componentes que han comenzado a hacerse muy populares dentro de la comunidad de desarrollo, porque facilitan enormemente nuestro trabajo y aumentan la productividad.
La lección comienza introduciendo el concepto de generador. A continuación, se presenta el generador oficial de Express, o sea, el desarrollado por el equipo de Express. Finalmente, el de Justo.js, bastante más completo que el anterior.
Al finalizar la lección, el estudiante sabrá: • Qué es un generador.
• Cómo instalar y usar el generador express-generator. • Cómo instalar y usar el generador justo-generator-express. Introducci nó
Un generador (generator) es un componente que ayuda a realizar determinadas tareas en proyectos, principalmente aunque no necesariamente, de software. Tienen básicamente dos funciones:
• La creación de la estructura inicial de un proyecto como, por ejemplo, de una aplicación Express, Node o React.
• La ayuda en la creación de determinados elementos de un proyecto como, por ejemplo, la creación de rutas o encaminadores de una aplicación Express.
Los generadores son similares a los plugins, proporcionan una funcionalidad reutilizable. Pero se utilizan para producir directorios y/o archivos a partir de plantillas. Suelen recolectar datos del usuario y entonces generar la estructura de directorios más adecuada para lo indicado.
El equipo de Express proporciona un generador oficial. Este generador es muy sencillo y útil para proyectos de pequeño tamaño. Por otra parte, tenemos el generador de Justo.js que es más completo. Veamos cada uno de ellos.
Generador express generator
-El generador oficial de Express es express-generator. Es muy sencillo. La información hay que dársela mediante la línea de comandos a modo de opciones. Básicamente, su principal ventaja es que puede configurar como motor de plantillas Handlebars, EJS o Hogan. A diferencia del generador de Justo que sólo trabaja con Handlebars.
Instalaci n del generadoró
El generador se encuentra disponible mediante NPM, recomendándose una instalación global:
npm install -g express-generator
Una vez instalado, se recomienda comprobar que se tiene acceso al generador, implementado mediante el comando express, mostrando su ayuda mediante la opción -h o --help o bien su versión, -V o --version:
express -h
Generaci n de la estructura de directoriosó
Para crear la estructura inicial de directorios de un proyecto, no hay más que invocar el comando express y lo creará. Mediante la opción --hbs se indica que configure Handlebars como motor de plantillas. Si además
deseamos indicar que cree el archivo .gitignore, indicar --git. Si no se indica ningún nombre de directorio, esto es, el nombre del directorio del proyecto, la estructura la creará en el directorio actual.
A continuación, se muestra un ejemplo ilustrativo: > express --hbs --git create : . create : ./package.json create : ./app.js create : ./.gitignore create : ./public create : ./routes create : ./routes/index.js create : ./routes/users.js create : ./views create : ./views/index.hbs create : ./views/layout.hbs create : ./views/error.hbs create : ./public/images create : ./public/javascripts create : ./public/stylesheets create : ./public/stylesheets/style.css create : ./bin create : ./bin/www install dependencies: > cd . && npm install run the app:
> SET DEBUG=generador:* & npm start >
Una vez generada la estructura del proyecto, no hay más que instalar las dependencias y ejecutar la aplicación mediante npm start.
Generador justo generator express-
-Justo es una herramienta de automatización desarrollada en Node que puede extenderse muy fácilmente mediante JavaScript. La automatización (automation) es el proceso mediante el cual se convierte tareas manuales en automáticas. Al automatizar las tareas, podemos ejecutarlas más fácil y rápidamente que si tuviéramos que hacerlo una y otra vez manualmente.
La automatización se lleva a cabo mediante herramientas de automatización (automation tools), aplicaciones de software que permiten convertir e implementar tareas manuales repetitivas en automáticas. Entre otras tenemos Ansible, Grunt, Gulp, Justo o Puppet, cada una de ellas orientadas a un determinado mercado. No todas ellas proporcionan soporte nativo para generadores, pero Justo sí lo hace.
El generador de Justo para Express presenta las siguientes características con respecto al oficial, o sea, al desarrollado por el equipo de Express:
• Configura Handlebars como motor de plantillas. El oficial permite configurar otros adicionales como EJS y Hogan.
• Permite configurar nodemon como monitor de cambios. Express no lo hace.
• Permite crear encaminadores, recordemos, los archivos ubicados en la carpeta routes. El oficial de Express no permite añadir nuevos archivos una vez creada la estructura. Aunque, claro está, se pueden crear manualmente. Además, para cada nuevo encaminador, actualiza el archivo routes/map.js.
• Permite añadir nuevas rutas a encaminadores. El oficial no lo permite.
• Permite crear archivos de plantilla Handlebars. El oficial no lo hace. Una vez generada la estructura del proyecto, hay que crearlos manualmente.
• Permite configurar componentes de middleware como, por ejemplo, Helmet, Morgan, serve-static y
serve-favicon.
• Permite configurar la aplicación Express para servir una aplicación React. El oficial no lo hace. El repositorio Git oficial del generador se encuentra github.com/justojsg/justo-generator-express. Instalaci n del generadoró
Justo es una herramienta que implementa varios aspectos de automatización como, por ejemplo, la automatización de tareas, los generadores y las pruebas de unidad. Para trabajar con los generadores, hay que instalar dos módulos disponibles en NPM: justo-cli, la interfaz de usuario de línea de comandos de Justo; y justo-generator-express, el generador específico de Express. Ambas cosas hay que instalarlas globalmente:
npm install -g justo-cli justo-generator-express
Una vez instalado, lo primero es comprobar que se tiene acceso al comando justo. Para ello, podemos consultar su ayuda:
justo -h
Si todo ha ido bien, con justo-cli se habrá instalado el comando justo. Recordemos, la interfaz de línea de comandos de Justo.
Por otra parte, tenemos que comprobar el acceso al generador de Express. Por ejemplo, como sigue:
justo -g express help
La opción -g se utiliza para invocar el generador que se indica, en nuestro caso, el de Express, instalado con justo-generator-express.
Generaci n de la estructura de directoriosó
Para crear la estructura de directorios inicial del proyecto, no hay más que invocar el generador:
justo -g express
Para crear la estructura de directorios y la configuración inicial del proyecto, el generador necesita información del usuario, la cual va solicitando una a una. Una vez recolectada toda la información necesaria, generará la estructura de directorios en el directorio actual. Entre la información que solicita al usuario encontramos:
• Descripción, página web, autor y un colaborador del proyecto. • Repositorio Git del proyecto.
• Nombre del script con el que arrancar la aplicación en producción.
• Algunos componentes de middleware a instalar y configurar como, por ejemplo, Helmet, Morgan, serve-favicon, serve-static, body-parser, cookie-parser, cookie-session y express-session.
Si alguno de los componentes a instalar requiere configuración especial, el generador la solicitará para hacer una buena configuración inicial. Por ejemplo, si decidimos usar Morgan como registro de eventos, solicitará el formato de las entradas; de serve-favicon, la ruta del archivo favicono; etc.
• Si usar nodemon como monitor de cambios. • Si se servirá una aplicación React.
En este caso, el generador configurará la aplicación Express para servir una aplicación de este tipo. Una vez generada la estructura del proyecto, no hay más que instalar las dependencias y ejecutar la aplicación mediante npm start. Si hemos configurado nodemon, podemos arrancar con npm run start-dev.
Creaci n de encaminadoresó
Una de las ventajas del generador de Justo para Express es que no se conforma con crear simplemente la estructura de directorios. Nos ayuda a crear elementos del proyecto a lo largo de todo el ciclo de desarrollo. Por ejemplo, podemos crear encaminadores con él. Además de crear el correspondiente archivo en la carpeta routes, lo registrará en el archivo routes/map.js. Lo que ayuda a añadir encaminadores muy fácilmente.
No hay más que usar el comando router:
justo -g express router
De nuevo, solicitará la información que necesita y, a partir de ella, creará el archivo y actualizará map.js. Entre la información solicitada tenemos: el nombre del directorio, dentro de la carpeta routes, al que añadir el encaminador y la plantilla a reproducir cuando se acceda a la ruta raíz (/) del componente.
Veamos un ejemplo ilustrativo: > justo -g express router ? Add to subfolder api ? Router name band
? View to render when root (/) requested band/index Generation
[ OK ] Check whether 'routes/api' exists (0 ms) [ OK ] Generate routes\api\band.js (100 ms) [ OK ] Append content to routes\map.js (27 ms) OK 3 | Failed 0 | Ignored 0 | Total 3
>
Creaci n de rutasó
El generador de Justo también nos asiste en la creación de rutas en un encaminador, mediante el comando route:
justo -g express route
Ejempl0:
> justo -g express route ? Router folder api ? Router name band ? Route path :name
? View to render when path requested band/info ? Method get
Generation
[ OK ] Append content to routes\api\band.js (46 ms) OK 1 | Failed 0 | Ignored 0 | Total 1
>
En este caso, lo que hace es registrar la ruta en el archivo del encaminador indicado. Proporciona soporte para los métodos HTTP más utilizados: GET, POST, PATCH, etc.
Creaci n de plantillas Handlebarsó
Para añadir un archivo plantilla Handlebars, podemos usar los comandos hbs view y hbs partial:
justo -g express hbs view justo -g express hbs partial
El primero añade la plantilla al directorio views. Mientras que el segundo a views/partials.
Generadores
(Práctica)
Tiempo estimado: 25min
El objeto de esta práctica es asentar y consolidar los conceptos presentados en la parte teórica de la lección. Al finalizarla, el estudiante:
• Habrá instalado y usado el generador express-generator. • Habrá instalado y usado el generador justo-generator-express. Objetivos
El objetivo de la práctica es crear la estructura inicial de una aplicación Express mediante un generador con el objeto de facilitar el arranque del proyecto. En el caso del generador de Justo, además, mostrar cómo crear componentes de proyecto con el generador.
Generador express generator
-Primero, vamos a probar el generador oficial de Express. El más sencillo de los dos. Instalaci n del generadoró
Comencemos instalando el generador: 1. Abrir una consola.
2. Instalar el generador globalmente mediante npm:
> npm install -g express-generator
3. Probar el acceso al comando express:
> express -V
Generaci n de la estructura inicial del proyectoó
Ahora, vamos a crear un proyecto de aplicación Express con el generador, con Handlebars como motor de plantillas:
1. Ir a la consola.
2. Crear el directorio de la práctica e ir a él. 3. Mostrar la ayuda del comando:
> express -h
4. Generar el proyecto:
> express --hbs
5. Echar un vistazo detallado a los archivos creados por el generador. Tómese su tiempo. 6. Instalar dependencias: > npm install 7. Arrancar la aplicación: > npm start 8. Abrir el navegador. 9. Ir a localhost:3000.
Generador justo generator express-
-En este punto, vamos a probar el generador Express de Justo. La idea es que el estudiante pueda comparar ambos y decidirse por aquel que más le convenza.
Instalaci n del generadoró
Recordemos que Justo es una herramienta de automatización que proporciona varias funcionalidades entre las que se encuentran los generadores. Por un lado, hay que instalar justo-cli, que proporciona el comando justo; y por otro lado, el generador de Express, justo-generator-express.
1. Abrir una nueva consola. 2. Instalar Justo y el generador:
> npm install -g justo-cli justo-generator-express
3. Comprobar que se tiene acceso al comando justo:
> justo -h
4. Comprobar que se tiene acceso al generador:
> justo -g express help
Generaci n de la estructura inicial del proyectoó Ahora, vamos a crear la estructura inicial de un proyecto Express:
1. Ir a la nueva consola.
2. Crear un nuevo directorio de práctica e ir a él.
Mantendremos el anterior proyecto para poder comprobar posteriormente ambos. 3. Generar la estructura de directorios inicial del proyecto Express:
> justo -g express
El generador le solicitará información sobre el proyecto. Con parte de ella, rellenará el archivo package.json. Otra la utilizará para configurar componentes en la pila de middleware en el archivo app.js. El único componente de middleware que todavía no se ha presentado, pero que se hace en el siguiente curso de Express, es Helmet. Este componente no hace más que configurar ciertos aspectos de la configuración con objeto de hacerla más segura y menos propensa a ataques. Se recomienda encarecidamente su instalación.
4. Echar un vistazo detallado a los archivos creados por el generador. Tómese su tiempo. Es más, compare el proyecto creado por ambos generadores para ver cuál le parece más completo.
5. Instalar dependencias:
> npm install
Arranque de la aplicaci nó
El generador de Justo crea el proyecto bajo la especificación ES2015 de JavaScript. Por lo que hay que compilar la aplicación a ES5 para que funcione en la mayor parte de las versiones de Node. Por suerte, se puede utilizar Justo para compilar la aplicación. Veamos cómo.
1. Ir a la consola.
2. Liste las tareas automatizadas del proyecto:
> justo -c
3. Compilar la aplicación mediante Babel con la tarea build del proyecto:
> justo build
Esta tarea lo que hace es compilar el proyecto y generar un paquete de distribución en el directorio dist. 4. Abrir una nueva consola.
5. Ir al directorio del proyecto.
6. Ir al directorio dist/es5/nodejs/ del proyecto.
7. Entrar en el directorio de la aplicación que hay en el directorio actual. Su nombre dependerá del nombre usado por el estudiante para crear el directorio de la práctica
8. Listar el contenido del directorio:
> dir
Ésta es la versión distribuible del proyecto. Lo que deberíamos instalar en una máquina de producción. No tiene ningún componente instalado. Sólo el código fuente compilado bajo la especificación ES5. Nosotros la vamos a usar para probar nuestra aplicación durante el desarrollo.
9. Instalar dependencias:
> npm install
10. Arrancar la aplicación en modo desarrollo:
> npm run start-dev
11. Abrir el navegador. 12. Solicitar localhost:8080.
A partir de este momento, trabajaremos sobre el directorio del proyecto, no del de distribución. Cuando deseemos probar algo, bastará con ejecutar la tarea build, la cual compilará y dejará el código compilado en el directorio de distribución. El cual se ejecuta bajo nodemon, por lo que los cambios se aplicarán automáticamente. Sólo tenemos que recordar que si instalamos algún componente de software, habrá que abrir una nueva consola, ir al directorio de distribución y solicitar mediante npm update que se instale para que así nodemon pueda trabajar correctamente. nodemon no instala dependencias. Eso debemos hacerlo manualmente.
Creaci n de rutasó
En este punto, vamos a ver cómo crear encaminadores y rutas mediante el generador de Justo. 1. Ir a la consola del proyecto.
2. Solicitar la creación del encaminador band mediante el generador:
> justo -g express router
Responda como sigue:
◦ No indique ninguna carpeta especial, lo que añadirá el archivo del encaminador en la carpeta routes. Para ello, seleccione <none>.
◦ Indique como nombre del encaminador band.
◦ Indique que se presente la plantilla band/index cuando se solicite la página índice raíz.
Observe qué ha hecho el generador. Por un lado, ha creado el archivo routes/band.js. El que contiene la definición del encaminador del componente band. Tendremos algo parecido a:
//imports
import express from "express"; //router
export const router = express.Router(); //routes
router.get("/", function(req, res) { const app = req.app;
res.render("band/index", {}); });
Por otro lado, ha registrado el nuevo encaminador en el archivo routes/map.js. Por favor, échele un vistazo a los dos archivos.
Es raro actualizar manualmente el contenido del archivo routes/map.js si usamos el generador. En cambio, la modificación de los archivos de los encaminadores es muy común, tanto mediante el