Un servidor basico en Nodejs con Express

fzbian

Fabian Martin

Posted on February 12, 2023

Un servidor basico en Nodejs con Express

Teniendo conocimiento de las bases de JavaScript, lo primero que haremos será instalar express en la carpeta de nuestro proyecto, en mi caso usaré PNPM, con el comando pnpm install express, agregare un archivo server.js en el cual ira nuestra proyecto.
Por el momento la carpeta de nuestro proyecto debe lucir algo como esto:
Image description

Comenzaremos a modificar nuestro archivo server.js el cual sera la base de todo nuestro servidor.

Lo primero que haremos será requerir express:

const express = require('express')
Enter fullscreen mode Exit fullscreen mode

Ya que express se encuentre requerido en una variable local en nuestro codigo, express para ser usado debemos usar la funcion express() que nos proporciona la libreria para acceder al modulo:

const app = express()
Enter fullscreen mode Exit fullscreen mode

Teniendo la variable app instanciada en nuestro codigo podremos comenzar a usar las funciones que nos proporciona la libreria.
En primer lugar lo que harmeos sera inicializar el servidor, abriendo puertos, asignaremos un puerto y a la hora de correr el codigo le diremos que ya fue inicializado

// Creamos la variable para guardar el puerto y acceder a ella de una manera mas facil
const PORT = 3000

// Usamos el metodo `listen` el cual se une y escucha las conexiones en el host y el puerto especificados. 
app.listen(PORT , () => {
    console.log(`Servidor inicializado en el puerto ${PORT}`)
})
Enter fullscreen mode Exit fullscreen mode

Si en este momento corremos el codigo, el abrira el puerto 3000 y nos mostrara el mensaje

Image description

Y si vamos a la URL, en este caso al ser iniciado desde nuestra maquina ser localhost:3000 nos mostrara lo siguiente.

Image description

"Cannot GET / " nos da a entender que la ruta / no fue encontrada, lo siguiente que haremos será añadirla, para esto usaremos el metodo <app>.get el cual nos brinda la opcion de añadir la ruta y darle una respuesta.

app.get("/", (req, res) => {
    res.send("Hello dev.to")
})
Enter fullscreen mode Exit fullscreen mode

Esto nos enviara un texto plano que dira Hello dev.to.
Si corremos de nuevo el codigo y nos vamos a la misma direccion nos mostrara nuestro texto.

Image description

Esto es un gran paso, ya que logramos inicializar un servidor y devolver un contenido, ahora, en un entorno mas real el contenido que podriamos devolver seria una pagina estatica, un JSON, un archivo, una cookie o hasta una redireccion, en este caso responderemos un archivo JSON y una pagina estatica.

Para responder el JSON primero debemos crear un archivo JSON, por ejemplo, datos.json sera el que yo le dare, en este JSON asignare unos cuantos valores.

{
    "peliculas": [
      {
        "titulo": "The Shawshank Redemption",
        "anio": 1994
      },
      {
        "titulo": "The Godfather",
        "anio": 1972
      },
      {
        "titulo": "The Godfather: Part II",
        "anio": 1974
      },
      {
        "titulo": "The Dark Knight",
        "anio": 2008
      },
      {
        "titulo": "12 Angry Men",
        "anio": 1957
      }
    ]
  }
Enter fullscreen mode Exit fullscreen mode

Ahora en nuestro codigo server.js requeriremos el archivo, primero traeremos un paquete fs el cual nos sirve para realizar tareas como leer, escribir, modificar y eliminar archivos en tu sistema.

const fs = require('fs')
Enter fullscreen mode Exit fullscreen mode

Ahora leeremos el archivo datos.json que se encuentra en la carpeta de nuestro proyecto haciendo uso de la funcion readFileSync que nos brinda 'fs' y lo guadaremos en una constante para usar el archivo

const data = fs.readFileSync("data.json");
Enter fullscreen mode Exit fullscreen mode

Ahora tenemos el archivo en una variable local, sin embargo esta variable aloja los bytes de ese archivo, por lo que no nos mostrara la informacion de el archivo, lo que tenemos que hacer es convertir este archivo en JSON
En JavaScript tenemos una propiedad llamada JSON, el cual cuenta con una funcion llamada parse la cual se utiliza para convertir una cadena de texto en formato JSON en un objeto JavaScript.

const jsonData = JSON.parse(data);
Enter fullscreen mode Exit fullscreen mode

Luego de haberlo convertido y guardado en una variable local nueva podremos mostrarla en alguna ruta, esto lo haremos usando la misma propiedad que usamos en el ejemplo pasado

app.get("/json", (req, res) => {
    res.send(jsonData);
});
Enter fullscreen mode Exit fullscreen mode

Si corremos el codigo y entramos a localhost:3000/json podremos ver:

Image description

Esto es bastante util a la hora de construir aplicaciones como APIs o Microservicios en un entorno real.

Ahora para enviar un archivo HTML es aun mas facil.

Primero haremos la web en HTML, creamos el archivo, en este caso yo le dare el nombre web.html, y le agregare el siguiente contenido.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Express Server</title>
</head>
<body>
    <h1>Hola dev.to</h1>
    <h2>Esta es la prueba de una pagina web que esta en un servidor de express</h2>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Ahora en nuestro codigo server.js requeriremos path el cual nos servira proporcionandonos una serie de funciones para trabajar con rutas de archivos de manera más fácil y consistente en diferentes sistemas operativos. Este módulo es esencial para cualquier aplicación que tenga que trabajar con archivos y rutas de archivos.

const path = require('path')
Enter fullscreen mode Exit fullscreen mode

Luego usaremos <app>.use el cual nos funciona como un tipo de función de Express que permite definir middleware (funciones intermedias) que se ejecutarán en cada petición HTTP que se realice a la aplicación. Los middlewares son funciones que tienen acceso a la solicitud (req), a la respuesta (res), y a la siguiente función en la cadena de middlewares (next).
Le pasaremos la ruta, luego usaremos express.static la cual nos ayudarara a darle una web estatica a la ruta, dentro de esta funcion usaremos path para tomar el directorio actual y añadirle el nombre del archivo de nuestra web

app.use('/web', express.static(path.join(__dirname, 'web.html')));
Enter fullscreen mode Exit fullscreen mode

Si corremos el codigo y vamos a localhost:3000/web`` veremos:

Image description

Podemos afirmar que ha sido redireccionado a nuestro archivo estatico.

Nuestro servidor ahora tendra las rutas
/json la cual respondera un JSON con datos.
/web el cual enviara una archivo estatico.

💖 💪 🙅 🚩
fzbian
Fabian Martin

Posted on February 12, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related