Express.js: El framework para crear aplicaciones web de Node.js

Express.js: El framework para crear aplicaciones web de Node.js

¿Qué es Express.js?

Express es un framework de muy reducido tamaño pero bastante flexible que provee una serie de funcionalidades listas para implementar en aplicaciones web o móviles.

¿Cómo instalar express con Nodejs?

  1. Prepara un nuevo folder para crear este nuevo proyecto.

  2. Inicializa una nueva app con npm init, el package.json lucirá algo así.

    {
      "name": "app",
      "version": "1.0.0",
      "description": "Primera app utilizando express.",
      "main": "app.js",
      "dependencies": {
        "express": "^4.14.0"
      },
      "devDependencies": {},
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }
    
  3. Vamos a instalar express como dependencia de nuestra app.

    $ npm install express --save
    

    Nuestro package.json agregará express como dependencia.

    {
      // ..
      "dependencies": {
        "express": "^4.14.0"
      },
      // ...
    }
    
  4. Dentro de nuestro app.js vamos a mandar llamar express como módulo.

    var express = require("express");
    
  5. Vamos a inicializar después nuestra express app.

    var app = express();
    
  6. Ejecutamos nuestra aplicación en el puerto 3000.

    app.listen(3000);
    

Hasta este punto tenemos una aplicación web funcional, pero no hemos definido ninguna url, para ello tenemos que definir las rutas que vamos a utilizar y el método http por el cual estas estarán disponibles. Para llevar acabo este procedimiento primero explicaremos los distintos métodos http que existen.

¿Cuáles son los tipos de métodos HTTP que existen?

  • GET

    Se utiliza generalmente cuando solo se retrae información, por ejemplo, una pagina que se lee o una imagen que se descarga.

  • HEAD

    Igual que get pero retrae solo las cabeceras http, por ejemplo cuando deseamos saber si una pagina ha sido modificada, sin tener que volver a cargarla completamente.

  • POST

    Se utiliza generalmente cuando se envía información, por ejemplo un formulario de registro, o una forma de inicio de sesión.

  • DELETE

    Se utiliza generalmente para borrar algún recurso, por ejemplo cuando deseamos que se elimine nuestra imagen de perfil.

¿Cómo crear una ruta al home en express?

  1. Vamos a definir la ruta para nuestro home o pagina de inicio.

    // ...
    app.get("/", function (peticion, respuesta) {
        respuesta.send(`
            <html>
                <head></head>
                <body>
                    <p>Pagina de Inicio!</p>
                </body>
            </html>
        `);
    });
    
    app.listen(3000);
    

    Recordar que ES6 permite utilizar la sintaxis de string templates ``, que nos permite entre otras cosas utilizar string multilínea.

  2. También podemos utilizar una variable de entorno para hacer una distinción entre el puerto en un ambiente local y uno de producción.

    // acceder a la variable de entorno PUERTO o usar 3000 por default
    var puerto = process.env.PUERTO || 3000;
    
    // ejecutar listener en el puerto 3000
    app.listen(puerto);
    

    Nuestro código luce algo así en este punto.

    // cargar express como modulo
    var express = require("express");
    
    // generar nuestra app
    var app = express();
    
    // acceder a la variable de entorno PUERTO o usar 3000 por default
    var puerto = process.env.PUERTO || 3000;
    
    app.get("/", function (peticion, respuesta) {
        respuesta.send(`
            <html>
                <head></head>
                <body>
                    <p>Pagina de inicio!</p>
                </body>
            </html>
        `);
    });
    
    // ejecutar listener en el puerto 3000
    app.listen(puerto);
    
  3. Ejecutamos nuestra aplicación, pero ahora utilizando nodemon de manera que cuando realicemos cambios, estos se reflejen automáticamente.

    $ nodemon app.js
    
  4. Abrimos la url http://localhost:3000 en el navegador, y veremos el mensaje Pagina de Inicio.