Ejemplos de Node.js Express: Sitios web renderizados, REST y estáticos

E

El desarrollo web ha recorrido un largo camino desde el boom de la WWW a finales de los 90. Nosotros, como desarrolladores, ahora tenemos infinitos recursos y herramientas a nuestra disposición. La gran versatilidad que tenemos es alucinante.

Con el auge de Node.js y npm, JavaScript se ha convertido en el lenguaje de programación más utilizado de facto en el mundo. Es como si todos los días apareciera un nuevo marco. Molesto como el infierno, lo sé. Pero, subamos al tren del bombo y veamos cómo crear cosas interesantes con Node.js. Si aún no lo has probado, seguro que te encantará.

Hoy crearemos cuatro tipos diferentes de aplicaciones usando Express.js , el framework Node.js más popular.

Antes de saltar, hay un par de cosas que debemos repasar con respecto a Node.js y Express, solo para orientarnos correctamente.

Mojarse los pies

Node es un tiempo de ejecución de JavaScript asincrónico impulsado por eventos construido en el motor de JavaScript V8 de Chrome. Está diseñado para crear aplicaciones de red escalables. JavaScript es de un solo subproceso, por lo que la fortaleza de Node radica en su naturaleza asincrónica. Maneja eventos sin bloquear el hilo principal de ejecución. Esta es la razón por la que Node es increíblemente rápido, porque puede manejar conexiones al mismo tiempo.

La verdadera razón por la que Node.js explotó y se volvió tan popular como lo es hoy en día es el administrador de paquetes que viene para el viaje. NPM es el principal lugar de encuentro de todos los paquetes de Node, de ahí su nombre. Administrador de paquetes de node, ¿verdad? Aquí puede encontrar varios módulos de código para usar en sus aplicaciones, o publicar el suyo si lo desea.

Uno de estos módulos es Express.js, un marco web minimalista y muy popular para crear rápidamente aplicaciones Node.js. Express es hoy el marco principal de facto para usar con Node.js. Ciertamente con mucha razón. Solo proporciona una fina capa de abstracción fundamental sin cambiar las características principales por las que Node es famoso. Hace que sea fácil crear aplicaciones web y API REST con poca o ninguna molestia. De hecho, es tan fácil que muchos otros marcos se basan en Express.

Ahora se pregunta qué tipo de aplicaciones puede crear con Express. Tengamos un segundo para hablarlo. ¿Cuáles son los tipos principales que admite la web? Hay aplicaciones con páginas HTML renderizadas por el servidor, que serán familiares para algunos de ustedes, los programadores de la vieja escuela. Esta era la forma predeterminada de crear aplicaciones en la era anterior a JavaScript.

Luego tenemos las API REST. Por lo general, se usan para enviar y recibir cargas útiles JSON, generalmente hacia y desde una base de datos u otro servicio.

Por último, tenemos sitios web estáticos simples. En este escenario, Express se utiliza para poner en marcha un servidor y entregar estos archivos. Es una forma rápida de crear páginas de destino o páginas de marketing para empresas y nuevas empresas.

Saltando de cabeza primero

Aprender haciendo es, con mucho, el mejor principio para aprender algo nuevo, especialmente en programación. Vamos a sumergirnos y explicar las cosas a lo largo del camino.

Aplicaciones renderizadas por servidor

Puedes adivinar cómo funcionan estas aplicaciones por el título, ¿verdad? Las páginas HTML renderizadas en el navegador de un usuario se generan y renderizan en el servidor. Este proceso se denomina renderización del servidor. Aplicaciones como estas consisten en plantillas y motores de plantillas. Los motores generan la página HTML final para ser renderizada. Algunos motores populares incluyen Jade, Pug y EJS.

¿Qué tienen de especial estos motores? Tienen una cosa elegante llamada interpolación. Permite insertar variables en una plantilla o cadena. Como este ejemplo con Jade: Hello #{world}donde worldes una variable.

Veámoslo en acción.

Cree un nuevo directorio y abra una ventana de terminal. Inicie npm en el directorio e instale los siguientes módulos.

$ npm init
$ npm install --save express jade

La estructura de este proyecto es muy sencilla. Un archivo app.js para todas las configuraciones de la aplicación, un archivo server.js para activar un servidor http y una carpeta de vistas donde se almacenarán todas nuestras plantillas. Primero, cree el archivo app.js y pegue este fragmento de código en él.

// copy this into your app.js
const express = require('express');
const path = require('path');
const app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.get("https://Pharos.sh.com/", function(req, res, next) {
    res.render('index', { title: 'Hello World!' });
});

module.exports = app;

Bien, ¿qué está pasando aquí? Estamos requiriendo expresse instanciando el appobjeto. El pathmódulo es un módulo de node integrado que proporciona una forma de trabajar con archivos y directorios. Lo usamos en este ejemplo para asegurarnos de que nuestras rutas de archivo funcionen en todas las plataformas.

Luego configuramos el motor de vista y la carpeta donde se encuentran nuestras plantillas. El motor de visualización que usaremos en esta muestra será Jade , pero cualquier motor de visualización está bien aquí.

Ahora viene la parte divertida, ¿ves el .get()método en el objeto de la aplicación? Toma 2 parámetros. Primero una ruta, luego una función de devolución de llamada. Cuando se activa la ruta “https://Pharos.sh.com/”, se invoca la devolución de llamada. Esto activará la representación de la plantilla de índice, con una variable interpolada denominada titlecon el valor de ‘¡Hola mundo!’. Finalmente exportamos la aplicación para tener acceso a ella en otros archivos.

¡Increíble! Con eso fuera del camino, creemos el archivo server.js y agreguemos este fragmento.

const app = require('./app');
const port = 3030;

app.listen(port, function() {
    console.log('Express server listening on port ' + port);
});

Aquí requerimos el archivo app.js y le indicamos que escuche en el puerto 3030.

Solo queda una cosa más por hacer, crear la carpeta ‘vistas’ con algunas plantillas. Continúe y agregue la carpeta ‘vistas’ ahora, y coloque estas dos plantillas.

<!-- layout.jade -->
doctype html
html
  head
    title= title
  body
    block content

<!-- index.jade -->
extends layout

block content
  h1= title
  p Welcome to #{title}

Como puede ver, la sintaxis del motor de plantillas de jade es bastante extraña en comparación con el HTML normal. Pero no dejes que te engañe. Al final, se representará como HTML normal en el navegador. ¿Ves el aspecto gracioso #{title}? Esta es la interpolación que mencioné anteriormente. La titlevariable de la función de devolución de llamada se pasó a la vista y se representó como el valor que se proporcionó.

La estructura de carpetas final de la aplicación de muestra debería verse así.

> node_modules
> views
 - index.jade
 - layout.jade
- app.js
- package.json
- package-lock.json // this file will be present only if you have NPM version 5 or above.
- server.js 

Eche un vistazo al repositorio para ponerse al día si se perdió algunos de los pasos.

Uf, finalmente podemos ejecutar la aplicación para ver cómo se ve. Vuelve a tu terminal y ejecuta:

$ node server.js

Debería ver “Servidor Express escuchando en el puerto 3030” volver a iniciar sesión en su terminal. En su navegador, vaya a http: // localhost: 3030 y debería ver el texto “¡Hola mundo!” y “¡Bienvenido a Hello World!” en la pantalla.

API REST

¿Listo para poner tu mundo patas arriba? Bienvenido a las API REST . El acrónimo significa Re presentative S tate T ransfer. Pero nunca necesitarás recordar eso. Sin embargo, lo importante es comprender la lógica detrás de cómo funciona REST y por qué es el tipo preferido de entrega de datos.

Las mentiras fundamentales en la creación de una API , un A plicación P rograma I Nterface, para enviar y recibir datos en formato JSON. Las API REST se utilizan para interactuar con bases de datos para almacenar datos de manera persistente. Por suerte para nosotros, usar REST con Express es fácil.

Veámoslo en acción.

Para este ejemplo solo necesitamos dos módulos. Expreso y analizador corporal . Cree un nuevo directorio de proyecto y ejecute:

$ npm init && npm install --save express body-parser

Solo necesitamos dos archivos para que la aplicación de muestra funcione, así que adelante, cree un app.js y un server.js.

Copie estos fragmentos en los archivos.

'use strict';

//
// app.js
//

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.get("https://Pharos.sh.com/", function(req, res) {
    let data = {
        message: 'Hello World!'
    };
    res.status(200).send(data);
});

app.post("https://Pharos.sh.com/", function(req, res) {
    let data = {
        response: 'You sent: ' + req.body.message
    };

    // Do something, like query a database or save data

    res.status(200).send(data);
});

module.exports = app;
'use strict';

//
// server.js
//

const app = require('./app');
const port = 4040;

app.listen(port, function() {
    console.log('Express server listening on port ' + port);
});

El diseño de app.js es muy similar al ejemplo renderizado por el servidor. La única diferencia real es que enviamos un objeto JSON como respuesta del get()método. Vamos a analizarlo.

En la parte superior, nuevamente requerimos expressy creamos un appobjeto. Pero también requerimos body-parser. Este es un increíble módulo de middleware Express para analizar el cuerpo de una solicitud HTTP entrante. Agrega un objeto al objeto de Express reqdentro de los appmétodos. Entonces, cuando publicamos algunos datos en la ruta “https://Pharos.sh.com/”, tenemos acceso a esos datos en el req.bodyobjeto. ¡Increíble!

Para probar esto, inicie una herramienta como Postman o cualquier otra herramienta de prueba de cliente REST que desee. Si nunca ha oído hablar de esto, no se asuste, puede consultarlo aquí. .

Inicie server.js y abra Postman.

$ node server.js

En Postman (o cualquier otra herramienta de cliente REST) ​​comience enviando una solicitud GET a http: // localhost: 4040 /:

Ahora envíe una solicitud POST a la misma URL:

Ingrese un “mensaje” como datos JSON en el cuerpo de la solicitud (use “x-www-form-urlencoded” en este caso) y presione “Enviar”. El mensaje que envía al punto final debería ser enviado de esta manera:

{
    "response": "You sent: Hello World!"
}

Regrese al código y expliquemos qué está pasando. En la ruta POST, tomamos el valor de req.body.messagey lo asignamos a la datavariable con nuestro propio mensaje corto. Luego, enviamos los datos a la respuesta con un estado de 200.

Las solicitudes como estas, que se utilizan únicamente como medio para transferir datos hacia y desde un servidor, se utilizan para almacenar datos en almacenamiento persistente, como bases de datos. Esto es en lo que las API REST son increíbles. En el mundo actual, prosperan porque trabajan al unísono con aplicaciones móviles y web como almacenamiento de datos.

Si se perdió algún paso, puede consultar el código aquí .

Sitios web estáticos

¿Qué pasa si no necesitamos ninguna representación de plantilla interesante, ni interacción con una base de datos? ¿Qué pasa si solo queremos una página de destino genial, una impresionante página de prueba de concepto o un servidor de archivos estático?

Ignoremos todos los casos de uso complicados que mencionamos anteriormente y centrémonos en los fundamentos en los que se basa la World Wide Web. Sirviendo documentos HTML.

Express se puede convertir en un servidor web HTTP simple para servir páginas HTML estáticas. El proceso es absolutamente simple. Lo que se necesita es especificar una ubicación que se verá como un directorio estático.

Vamos a sumergirnos.

Cree un nuevo directorio, cree los mismos dos archivos que en los ejemplos anteriores, un app.js y un server.js. Solo necesitará instalar express para este ejemplo.

$ npm init && install express --save
// app.js
const express = require('express');
const app = express();

app.use("https://Pharos.sh.com/", express.static('html'));

module.exports = app;

La aplicación está configurada en .use()la carpeta html para servir archivos estáticos. Lo que significa que la ruta al recurso en la URL no buscará rutas en la aplicación Express, sino que buscará en el sistema de archivos el archivo solicitado.

Simplemente puede reutilizar server.js de los ejemplos anteriores.

// server.js
const app = require('./app');
const port = 5050;

app.listen(port, function() {
    console.log('Express server listening on port ' + port);
});

Cree una carpeta llamada ‘html’ y agregue dos archivos llamados ‘index.html’ y ‘about.html’. El contenido de los archivos no importa, acabo de agregar un poco de texto para saber cuál es cuál.

<!-- index.html -->
<h1>index</h1>

<!-- about.html -->
<h1>about</h1>

Eso es todo. Adelante, encienda el servidor y abra un navegador y diríjase a http: // localhost: 5050 , que debería mostrar una página con la palabra “índice”.

Puede ver al solicitar la ruta “https://Pharos.sh.com/” que index.html se ha cargado por defecto. Puede cambiar a ‘/about.html’ y se cargará el archivo HTML ‘about’. Este principio funciona con cualquier tipo de archivo. También puede agregar una imagen a esta carpeta, y se mostrará de la misma manera si navegó hasta ella a través de la URL.

Si se perdió algún paso, tómese un descanso y consulte el código aquí .

Aplicaciones híbridas

No, no vamos a hablar del Toyota Prius. Este es otro tipo de híbrido. Digamos que desea la versatilidad, la potencia y la facilidad de uso de una API REST, pero también la velocidad de una aplicación de página única (SPA).

Información rápida: las SPA son aplicaciones de JavaScript frontales que solo tienen un archivo index.html principal. Todos los demás archivos html son plantillas que se inyectan en el archivo principal cuando es necesario. Debido a que la lógica y el enrutamiento se manejan en la interfaz, son increíblemente rápidos. Pero al final, se comportan como una simple página web estática cuando se trata de servirlos.

Si este es el caso, puede pensar en este escenario. ¿Por qué no ejecutar una API REST, con un SPA servido estáticamente en el mismo servidor? Suena bien para mí.

Inicie una terminal, cree un nuevo directorio y escriba:

$ npm init && npm install --save express body-parser

Conozcamos la estructura de carpetas.

> app       // folder that will hold all of our files for the SPA
> node_modules
- app.js
- package-lock.json
- package.json
- server.js

La estructura es la misma que en el ejemplo de servicio de archivos estáticos, con la diferencia en el nombre de la carpeta donde guardaremos nuestros archivos estáticos.

Aquí hay un código:

// app.js
const express = require('express');
const app = express();
const path = require('path');
const bodyParser = require('body-parser');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

/**
 * API
 */
app.get('/api', function(req, res, next) {
    let data = {
        message: 'Hello World!'
    };
    res.status(200).send(data);
});
app.post('/api', function(req, res, next) {
    let data = req.body;
    // query a database and save data
    res.status(200).send(data);
});

/**
 * STATIC FILES
 */
app.use("https://Pharos.sh.com/", express.static('app'));

// Default every route except the above to serve the index.html
app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname + '/app/index.html'));
});

module.exports = app;

Esta estructura parece familiar ahora, ¿no es así? Hemos combinado la API REST con los archivos estáticos de servicio. La única excepción es el último .get()en la parte inferior. Las *coincidencias con todas las rutas, excepto las anteriores, se establecerán de forma predeterminada para enviar el index.html de vuelta al cliente. Lo que significa que cada ruta servirá al index.html principal. ¡Exactamente lo que queremos!

Ahora, cuando queremos recuperar algunos datos de la API, simplemente podemos presionar la ruta ‘/ api’ y recuperar los datos JSON. De lo contrario, la aplicación siempre servirá el archivo HTML principal ubicado en la carpeta de la aplicación.

Si desea entrar en más detalles, puede consultar el ejemplo completo usando Angular.js aquí .

¿Cuándo usar qué?

Ningún tipo de aplicación es el mejor en todos los escenarios. Todos tienen su lugar en el mundo de la programación. Todo depende de tu caso de uso y de lo que quieras construir.

Si desea un back-end robusto sin preocuparse demasiado por el front-end, realmente le encantarán las aplicaciones renderizadas por servidor. Tienen excelentes motores de plantillas que simplifican la forma en que escribe HTML, lo que facilita la creación de plantillas complejas. También brindan un gran soporte para almacenar y recuperar datos.

Las API REST son las aplicaciones preferidas cuando tiene que administrar múltiples interfaces. Los datos que recibe se pueden solicitar tanto desde aplicaciones móviles como web. ¿No es increíble que pueda construir un backend que pueda ser consumido por todas las aplicaciones del lado del cliente que desee? ¡Seguro que lo creo!

El servicio de archivos estáticos se utiliza en varios casos. Sirve archivos HTML, imágenes, hojas de estilo CSS y scripts JavaScript. Todos se ven como archivos estáticos y todos pueden servirse con Express. Esto se usa más para crear páginas de destino y otras aplicaciones frontales como las aplicaciones de una sola página. No dude en utilizar esta técnica para todas sus aplicaciones. ¡Siempre será útil saber cómo servir archivos estáticos como imágenes y CSS!

¿Qué hay que decir sobre las aplicaciones híbridas? Pues, ante todo. Por favor, si tiene acceso a dos servidores web, mantenga las aplicaciones separadas. Cree la API REST en uno y el SPA en el otro. Pero si no tiene ese lujo, está bien mantenerlo en uno. De lo contrario, esta combinación de aplicaciones es la mejor en cuanto a rendimiento.

¡Empieza a construir cosas!

Todas estas técnicas son válidas y perfectamente adecuadas para usar. ¡Solo elige uno y comienza a construir! Aprenderá más si lo hace usted mismo.

Espero que hayan disfrutado leyendo esto tanto como yo disfruté escribiéndolo. Hasta la próxima, ten curiosidad y diviértete.

¿Crees que este tutorial será de ayuda para alguien? No dudes en compartir. Si te gustó, házmelo saber en los comentarios a continuación.

About the author

Ramiro de la Vega

Bienvenido a Pharos.sh

Soy Ramiro de la Vega, Estadounidense con raíces Españolas. Empecé a programar hace casi 20 años cuando era muy jovencito.

Espero que en mi web encuentres la inspiración y ayuda que necesitas para adentrarte en el fantástico mundo de la programación y conseguir tus objetivos por difíciles que sean.

Add comment

Sobre mi

Últimos Post

Etiquetas

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, aceptas el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad