驴C贸mo crear un servidor web en JavaScript con Express?

JavaScriptNodejs

Desde que se cre贸 JavaScript (JS), se le ha denominado el "Lenguaje de la Web", y esto junto con algunas librer铆as como JQuery, hizo que se le denominara como un lenguaje de front. Pero desde hace unos a帽os hasta la actualidad, con la aparici贸n de Node.js podemos programar con JS en la parte del backend.

Si es la primera vez que lees sobre Node.js, te estar谩s preguntando... 驴Qu茅 es Node.js? Podr铆as llegar a pensar que es un nuevo lenguaje basado en JavaScript como puede llegar a ser TypeScript, pero no, es un entorno de desarrollo de JS, basado en el motor V8 de Google, y fue creado por Ryan Dahl.

Ryan Dahl

Ryan Dahl

En este blog, se ver谩 Node desde el punto de vista del desarrollo web, pero vale para Desarrollo Web, IoT, Bots, Inteligencia Artificial y un largo etc.

驴C贸mo crear un servidor web?

Para crear un servidor web, en este art铆culo voy a usar la librer铆a de Express.js, una librer铆a orientada al backend muy minimalista pero a la vez potente.

El primer paso ser铆a crear nuestro proyecto de Node, creamos nuestro directorio primer-proyecto y ejecutamos:

# Accedemos al directorio
$ cd primer-proyecto/
# Creamos proyecto node
$ npm init

La consola nos mostrar谩 la primera versi贸n de nuestro package.json desde el cual podremos trabajar.

Press ^C at any time to quit.                                           
package name: (primer-proyecto)                                         
version: (1.0.0)                                                        
description:                                                            
entry point: (index.js)                                                 
test command:                                                           
git repository:                                                         
keywords:                                                               
author: Alex Canton                                                     
license: (ISC)                                                          
About to write to ~/primer-proyecto/package.json:
                                                                        
{                                                                       
  "name": "primer-proyecto",                                            
  "version": "1.0.0",                                                   
  "description": "",                                                    
  "main": "index.js",                                                   
  "scripts": {                                                          
    "test": "echo \"Error: no test specified\" && exit 1"               
  },                                                                    
  "author": "Alex Canton",                                              
  "license": "ISC"                                                      
}                                                                       
                                                                        
                                                                        
Is this OK? (yes)

Una vez creado nuestro proyecto, tendremos que instalar nuestra dependencia de Express, lo podemos hacer de esta manera:

$ npm install express -S -E

El flag -S es para que se a帽ada en la secci贸n de dependencies en el package.json y el -E para instalar la versi贸n exacta. Si comprobamos el package.json, quedar铆a de esta manera:

$ cat package.json
{
  "name": "primer-proyecto",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Alex Cant贸n",
  "license": "ISC",
  "dependencies": {
    "express": "4.17.1"
  }
}

Ahora que tenemos instalado Express, podemos empezar a desarrollar nuestro servidor. Abriremos nuestro fichero de entrada por defecto, el index.js y escribiremos:

// Imports
const express = require('express')
const app = express()
// Puerto
const PORT = 3000
// Middlewares
app.use(express.json())
// Arrancar Servidor
app.listen(PORT, () => {
    console.log(`Server is running. http://localhost:${PORT}`)
})

En los siguientes puntos voy a explicar los diferentes pasos que he seguido en el c贸digo anterior.

1. Imports

Lo primero que tendremos que hacer para que nuestro servidor funcione ser谩 importar las librer铆as. En este caso, como la 煤nica que se ha instalado ha sido express, se importa y se almacena la librer铆a en la variable, el siguiente paso es crear una aplicaci贸n web con la funci贸n de express().

Esta aplicaci贸n, ser谩 la que arranquemos para tener nuestro servidor levantado.

2. Puerto

Este paso es opcional para este ejemplo, pero he apartado el puerto porque en un proyecto mediano/grande, puede ser que el puerto vaya parametrizado dependiendo del entorno. Entonces puede ser buena pr谩ctica tenerlo aparte como variable antes de aplicarlo a la funci贸n .listen().

3. Middlewares

Un Middleware, en t茅rminos generales, es un fragmento de c贸digo, que se ejecuta antes de la petici贸n principal. Por ejemplo, se puede usar un middleware para la autentificaci贸n, es decir, crear un authMiddleware y que se ejecute antes de cada petici贸n del servidor para poder garantizar que el servidor solo es accesible a los usuarios ya registrados.

Este Middleware en particular transforma tanto la petici贸n (Request) como la respuesta (Response) en un formato JSON, para mantener un estandar de comunicaci贸n con los clientes.

4. Arrancar Servidor

En este bloque de c贸digo se ataca a app.listen(...), que recibe como par谩metro el puerto en el que se va a desplegar nuestra aplicaci贸n y el segundo par谩metro es una funci贸n de callback que se ejecutar谩 en el caso de que la aplicaci贸n arranque correctamente.

Esta ejecuci贸n servir谩 para levantar nuestro servidor backend en Node.js.

Ejecuci贸n

Ahora que ya tenemos el fichero index.js completo, tendremos que comprobar que funciona, para ello iremos a nuestra consola de comandos y ejecutaremos:

$ node index.js

Si todo funciona correctamente deber铆a de mostrar el siguiente mensaje en la consola:

Server is running. http://localhost:3000

Pero con esto simplemente conseguiremos arrancar un servidor en el puerto 3000, pero no podemos acceder a 茅l. Si accedemos en un navegador a la ruta http://localhost:3000 est茅 nos mostrar谩 el mensaje Cannot Get /, esto quiere decir que no puede acceder a la ra铆z, pero la buena noticia es que el servidor funciona.

Explicado esto, vamos a crear una ruta de acceso (o endpoint) para poder acceder a la ra铆z.

Controlador

En nuestro index.js, antes del paso de Arrancar Servidor, a帽adiremos el siguiente bloque de c贸digo:

app.get('/', (req, res) => {
    return res.status(200).send({ message: 'Mensaje de respuesta' })
})

Con este c贸digo nuestro servidor ya tendr谩 un punto de entrada en la ra铆z, mediante el m茅todo GET de HTTP, el cual nos devolver谩 una respuesta, con un estado 200 (C贸digos de respuesta de un servidor) y un body en formato JSON con el siguiente formato:

{
    "message": "Mensaje de respuesta"
}

Conclusi贸n

En este art铆culo hemos visto c贸mo podemos crear un servidor web con JavaScript y su framework backend m谩s conocido, minimalista y potente del mercado, Express.js. Con unas pocas l铆neas hemos podido desplegar en el puerto 3000 un servicio que tiene un punto de entrada en la ra铆z del proyecto, en lo que ser铆a nuestro http://localhost:3000/.

Te dejo el enlace de mi GitHub para este art铆culo:

Linkedin

Github

Instagram

Afiliados

Creado con 鉂わ笍 por Alex Cant贸n