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

    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.

    Etiquetas:

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *