ExpressJS - Crea Aplicaciones Web Robustas y de Calidad

Express se ha convertido sin duda en el framework JavaScript numero uno para el manejo de las peticiones del servidor, aquí te explicaremos todo acerca de el.

Express, ha sido el framework mas usado para la programación back-end, es el motor de muchas aplicaciones web de los últimos tiempos, desarrollada 100% en JavaScript. Este provee un conjunto de métodos que ayudan con el desarrollo tanto de APIS como de Aplicaciones Web.

Express se ha popularizado por el hecho de proveer una infraestructura mínima y flexible para las Aplicaciones web. Con una interfaz sencilla de manejar y aprender, y una serie de middlewares propios del framework.

Express trabaja definiendo los middlewares, después las rutas, y al final ponemos al servidor a manejar las peticiones en el puerto indicado.

Para instalarlo simplemente ejecutamos un comando con nuestro gestor de paquetes de JavaScript.

  npm install -s express
  //o
  yarn add express

Vamos a ver un ejemplo sencillo.

  const express = require("express");
  const app = express();

  app
    .get("/", (req, res) => {
      res.send("Hola Mundo");
    })
    .listen(8080, () => console.log("App listen on http://localhost:8080"));

¡Felicidades ya creamos nuestra primera aplicación con Express!

Ahora, ¿Que rayos hicimos?

Bueno vamos a explicar poco a poco. Primero importamos el modulo de Express, para tenerlo de forma global.

  const express = require("express");
  

Después iniciamos la App, aunque también podemos iniciarla directamente en la importación del modulo. Pero recomiendo tener el modulo de Express aparte, pues en algunas aplicaciones necesitaremos usar los middlewares que trae por defecto.

  const app = express();
  

Ahora definimos el método de la petición que recibirá la ruta, los mas comunes son: GET y POST, pero existen muchos mas. La ruta "/" la definimos con el método GET.

  app
    .get("/", (req, res) => {
      //manejo de la ruta
    })
  

Después, dentro de la función callback que es la que manejara la petición, siempre tiene que haber una respuesta por parte del servidor. La mas básica es "send" pero Express provee varios métodos que sirven para enviar distintos tipos de respuestas, mas adelante veremos esto.

  res.send("Hola Mundo");
  

Ahora ponemos al servidor a escuchar las peticiones en el puerto 8080

  .listen(8080, () => console.log("App listen on http://localhost:8080"));

Si no nos lanza ningún error, vamos a http://localhost:8080 y deberíamos ver el mensaje: "Hola Mundo".

Ahora ¿como funciona esto?

¡Sencillo!, primero el cliente (navegador) manda a pedir la pagina "/", el servidor mira a ver en las rutas que están definidas, y devuelve en contenido de esa ruta.

Vamos a ver un ejemplo un poco mas complejo, para eso vamos a crear los siguientes archivos:

Vamos a obviar la carpeta "node_modules" y el archivo "yarn.lock" estos son creados al instalar express.

En el archivo "index.js" vamos a añadir el siguiente código:

  const express = require("express");
  const app = express();
  const {join} = require("path");

  app
    .use(express.static(join(__dirname, "public")));

  app
    .get("*", (req, res) => {
      res.status(404).send(`Ruta <b>${req.url}</b> no conseguida en el servidor`);
    })
    .listen(8080, () => console.log("App escuchando en el puerto 8080"));

Y en el archivo "index.html" vamos a poner cualquier contenido, lo importante es la carpeta "public", vamos a explicar porque es tan importante.

Vamos a examinar el archivo "index.js". No tiene mucha diferencia con el primer ejemplo. En este ejemplo, usaremos el middeware "static" de Express, que define una carpeta con contenido estático, archivos HTML, hojas de estilo, imágenes, etc. Osea, nada que se genere en el servidor

  app
    .use(express.static(join(__dirname, "public")));

Y cambiamos la ruta "/" por "*" que hace que todas la rutas la maneje esta función. Aquí tenemos otro método de Express que es: "status" con esta definimos el código de estado de la respuesta, en este caso, si el archivo no se consigue, el servidor responde con un estado 404 y el mensaje definido

    .get("*", (req, res) => {
      res.status(404).send(`Ruta ${req.url} no conseguida en el servidor`);
    })

Ahora, también podemos cambiar la función "send" por "sendFile" y enviar un archivo mejor estructurado, con contenido HTML para mejoras visuales.

    .get("*", (req, res) => {
      res.status(404).sendFile(join(__dirname, "404.html"));
    })

Ya con esto podemos crear aplicaciones web sencillas con Express y NodeJS. Express es un framework completo, con métodos para manejos tanto de peticiones, como de envió de respuestas, y se puede integrar con frameworks de Renderizado en el lado del Servidor.

Domina este Framework y lograras crear cosas grandes.

Esta al pendiente pues estaré montando mas acerca de Express.