馃敟 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.