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](https://pnpm.io/), 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1h5xt7dnr3wo1cpwtrgd.png) Comenzaremos a modificar nuestro archivo `server.js` el cual sera la base de todo nuestro servidor. Lo primero que haremos será requerir express: ```js 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: ```js 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 ```js // 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 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jd0iydav8tou2z0rkhre.png) Y si vamos a la URL, en este caso al ser iniciado desde nuestra maquina ser `localhost:3000` nos mostrara lo siguiente. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92togu9ohp846tnjwy63.png) "Cannot GET / " nos da a entender que la ruta / no fue encontrada, lo siguiente que haremos será añadirla, para esto usaremos el metodo `.get` el cual nos brinda la opcion de añadir la ruta y darle una respuesta. ```js 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. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ma8rq2q1yguja92byvcw.png) 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. ```json { "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. ```js 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 ```js 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. ```js 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 ```js app.get("/json", (req, res) => { res.send(jsonData); }); ``` Si corremos el codigo y entramos a `localhost:3000/json` podremos ver: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wrx86zpmhpgm55hcw3ip.png) 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. ```html Express Server

Hola dev.to

Esta es la prueba de una pagina web que esta en un servidor de express

``` 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. ```js const path = require('path') ``` Luego usaremos `.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 ```js app.use('/web', express.static(path.join(__dirname, 'web.html'))); ``` Si corremos el codigo y vamos a `localhost:3000/web``` veremos: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eta8cumuompayxpi1901.png) 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

Un servidor basico en Nodejs con Express

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