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:
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')
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()
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}`)
})
Si en este momento corremos el codigo, el abrira el puerto 3000 y nos mostrara el mensaje
Y si vamos a la URL, en este caso al ser iniciado desde nuestra maquina ser localhost:3000
nos mostrara lo siguiente.
"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")
})
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.
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
}
]
}
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')
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");
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);
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);
});
Si corremos el codigo y entramos a localhost:3000/json
podremos ver:
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>
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')
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')));
Si corremos el codigo y vamos a localhost:3000/web
`` veremos:
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.
Top comments (0)