← Back to Lessons
Edit on Github

Introduction to Express.js

express

¿Qué es Express y para qué sirve?

Express es un framework web, escrito en JavaScript y alojado dentro del entorno de ejecución NodeJS. El modulo explica algunos de los beneficios clave de este framework, como configurar tu entorno de desarrollo y como realizar tareas comunes en desarrollo y publicación web.

¿Qué función cumple Express en una aplicación web?

Primeramente definamos qué es Express. Básicamente es un marco de desarrollo minimalista para Node.js que permite estructurar una aplicación de una manera ágil, nos proporciona funcionalidades como el enrutamiento, opciones para gestionar sesiones y cookies, etc. Express nos permite crear no solo Aplicaciones Web sino tambíen API's, esto quiere decir que ademas de genstionar nuestro frontend (html, css, imagenes, javascript, etc.). nos permite crear apis las cuales podran ser utilizadas con cualquier framework o libreria de frontend como por ejemplo: React, Angular, Vue, etc.

Iniciar una aplicacion con express

Para iniciar un proyecto con express crearemos una carpeta llamada test-express, una vez creada nos ubicaremos en la carpeta desde un terminal o con nuestro IDE favorito abriremos un terminal en el cual ejecutaremos el siguiente comando:

1$ npm init -y

Una vez ejecutado obtendremos un archivo basico de configuracion llamado package.json, una vez creado el archivo para trabajar nodejs como módulos podemos modificar nuestro package.json y agregar lo siguiente:

1{ 2 ... 3 "type": "modules", 4 ... 5}

Por defecto nodejs trabaja con commonjs para importar los modulos dentro de nuestra aplicaciòn.

Procederemos a instalar express usando el siguiente comando:

1$ npm i express --save

Ya instalado express en nuestras dependencias, procederemos a crear una archivo llamado app.js, en el cual escribiremos las siguientes lineas de codigo:

  1. Importamos express en nuestro archivo:
1const express = require('express'); // importando express
  1. Instanciamos express
1const app = express() // creando una instancia de express
  1. Definimos el puerto por el cual se estara ejecutando nuestra aplicacion:
1const port = 3000; // definimos nuestro puerto a utilizar
  1. Definimos una ruta utiliando el metodo GET el cual recibe dos parametros, un string que sera la forma de acceder a nuestro ruta y el segundo es una funcion que sera ejecutada al momento de acceder a la ruta, la cual recibe nos proporciona dos objetos un request y un response, siendo el primero el que nos permitira obtener la informacion que nos envia el cliente y el response el cual nos permitira entrear un mensaje al cliente que esta accediendo a nuestra ruta
1app.get('/', (request, response) => { 2 response.send('Hola Mundo desde Express'); 3})
  1. Definimos nuestro servidor utilizando el metodo listen el cual podremos acceder desde nuestra instancia de express, el cual recibe dos argumentos, el primero es el puerto por el cual queremos estar atentos si el cliente se conecta a nuestra aplicacion y el segundo es una funcion la cual podremos observar al momento de acceder a nuestra aplicacion
1app.listen(port, () => { 2 console.log("Iniciando el servidor sobre el puerto" + port); 3});
  1. El resultado esperado es el siguiente para verlo debes acceder a la siguiente ruta desde un navegador http://localhost:3000/:

    preview

  2. Para informa de cuál es la carpeta de plantillas y cuál es la extensión que tienen estos archivos de plantilla vamos a añadir las siguientes lineas.

1... 2const path = require('path'); 3... 4// view engine setup 5app.set('views', path.join(__dirname, 'views')); 6app.set('view engine', 'pug'); 7...
  1. Para definir donde se cargaran nuestros archivos publicos como por ejemplos css, js, imagenes, o archivos descargables podemos definir la siguiente linea:
1... 2app.use(express.static(path.join(__dirname, 'public'))); 3...
  1. Una vez configurado el archivo desde un terminal o consola procederemos a ejecutar el siguiente comando.
1$ node app.js