Servidor Nodejs con Express

Iniciando el proyecto express

• Puedes utilizar tu editor de código favorito, en mi caso estaré utizando Visual Studio Code

Primero empezaremos creando la carpeta donde trabajaremos.

1
2

    mkdir express-server
    cd express-server

Una vez dentro de la carpeta, iniciamos el proytecto Nodejs, lo cual creará el archivo de configuración package.json

1

    npm init

Dependencias del proyecto

1. Dependecia de desarrollo.
   Las dependencias de desarrollo, son las librerías que solo se utilizarán en el desarrollo de la aplicación, las cuales ya no se haran uso en producción.

   1 2	npm i typescript -D npm i nodemon -D

   
   

   • Typescript
     En este proyecto utilizaremos Ts para desarrollar el servidor express.

     TypeScript es un lenguaje de programación fuertemente tipado que se basa en JavaScript y le brinda mejores herramientas a cualquier escala.
     –Typescript
     

   • Nodemon
     Nodemon nos falicitara al momento de desarrollar, ya que monitorea el proyecto por cualquier cambios, y reiniciará automáticamente el servidor.

2. Depencias del proyecto
   La siguiente dependecias son lo que requerirá el proyecto para funcionar correctamente.

   1 2 3

   npm i morgan npm i express npm i dotenv

   • Express
     Espress es una librería que nos permite construir un servidor para servir una página, aplicación web o api, lo cual también se ha convertido en el estándar para desarrollo de aplicaciones backend con nodejs.
     

     Express.js, a veces también llamado «Express», es un framework de backend Node.js minimalista, rápido y similar a Sinatra, que proporciona características y herramientas robustas para desarrollar aplicaciones de backend escalables.
     –Kinsta

   • Morgan
     

     Nos mostrara las solicitudes y respuestas del servidor, las cuales podemos visualizar por consola.
     

     Morgan es un Middleware de nivel de solicitud HTTP. Es una gran herramienta que registra las requests junto con otra información dependiendo de su configuración y el ajuste preestablecido utilizado. Resulta muy útil durante la depuración y también si desea crear archivos de registro.
     –Rudeus G
     

   • Dotenv
     
     Para uso de variable de entorno.

3. @Types
   

   Nos perimite el uso de tipado en las dependecias que instalemos

   1 2	npm i @type/express -D npm i @types/dotenv -D

Configurando Typescript

Para poder empezar utiliziar typescript en el proyecto, debemos hacer unas modifcaciones primero.

En la raiz del proyecto ejecutaremos el siguiente comando.
Crea el archivo de configuracion typescript para compilar.

1

    npx tsc --init

Una vez ejecutado el comando, abrimos el archivo tsconfig.json para hacer algunas modificaciones.

Dentro del archivo buscaremos lo siguiente para descomentarlo y agregar la siguiente configuración:
rootDirt : Indica donde estarán los archivos typescript
outDirt : Indica donde se guardaran los arhivos compilados

1
2

   "rootDir": "./src",
   "outDir": "./dist", 

Lo siguiente es opcional
target : Indica a versión de javascript compilara los archivos typescript
Mi persona, trabajara con la version de 2019

1
2

    /* Language and Environment */
    "target": "es2019",     

Agregaremos lo siguiente al final, entre el último y penúltimo corchete

1
2
3
4
5
6

    {
    "compilerOptions": {
            ....contenido
        },
        "exclude": ["node_modules"]
    }

Configuración de Nodemon

En el directorio raiz del proyecto, crearemos el siguiente archivo.
nodemon.json

Y agrearemos las siguientes lineas.

1
2
3
4
5
6
7
8

   {
    "watch": ["src"],
    "ext": "ts",
    "ignore": [
        "src/**/*.spec.ts"
    ],
    "exec": "ts-node "
    }

• watch :
  Indicamos que carpeta estará observando por cambios.
  
• ext :
  Cual serán las extención que estaremos observando por cambios.
  
• ignore :
  Ignorar los que tengan las siguiente extención.
  
• exec :
  El comando que ejecutará.
  

Configurando el Package.json

En la sección de script agregaremos los siguiente comando para ejecución.

1
2
3
4
5

    "scripts": {
    "build": "tsc ",
    "dev": "nodemon src/index.ts",
    "start": "npm run build  && node dist/index.js"
    },

• dev :
  Este comando ejecutara el modo desarrollo, no compila a js , más puede ejecutar *.ts gracias a la configuracion que hicimos con nodemon.json
• build :
  Este comado compila los hay en la carpeta src
• start :
  Compila y ejecuta el proyecto compilado

Estructura de carpetas

La siguiente estrutura que se utilizará.
(es básica, en el siguiente post, utilzaremos este mismo proyecto para realizar una API y luego una aplicacion web con la estrucura MVC)

Listo, empezemos a codificar!

1. app.ts
   Dentro del archivo app.ts creamos un clase, para instanciar un servidor express.
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

   import express,{Application} from "express"; //Importamos express import * as dotenv from "dotenv" // Importamos dotenv (si tenemos variables de entorno) import morgan from "morgan"; //Importamos Morgan para logs por consola dotenv.config(); // Cargamos las variables de entorno /** * Clase Server */ export class Server{ private app:Application; /** * * @param port Especifica el puerto de escucha del servidor */ constructor(private port?: number| string) { this.app = express(); //Iniciamos express this.configuracion(); //Configuracion this.listen(); //Escuchamos this.middlewares(); //Middlewares this.route(); // Espones las Rutas disponibles } /** * Configuracion del puerto de escucha */ configuracion(){ this.app.set("port", this.port || process.env.PORT || 8080); } /** * Escuchamos por el puerto que configuramos */ async listen (){ await this.app.listen(this.app.get("port")); console.log("Servidor escuchando en el puerto:", this.app.get("port")); } //Middlewares middlewares(){ this.app.use(morgan("dev")); // Mesaje por consola de las peticiones con estilo dev , puede mirar la documentacion de morgan para ver mas detalles this.app.use(express.json()); // Permite leer el body de las peticiones // this.app.use(cors()); //Explicare en otro post por el momento // this.app.use(bodyParser.urlencoded({extended:true})); // this.app.use(cookieSession({ // name:"trxsalo", // secret: process.env.SECRET, // httpOnly: true // })); } /** * Rutas expuestas */ route(){ this.app.use("/", express.static("public")); //Publico la carpeta public, servira un index.html } }

2.index.ts
En el archivo index.ts dentro de la carpeta src agregáremos las siguiente lineas de código.

Este será que levante el servidor express.

1
2
3
4
5

    import {Server} from "./app"; //importamos la clase server
        async function main(){ //funcion principal
            const app:Server = new  Server(); //instanciamos la clase server
        }
        main(); //ejecutamos la funcion

3. Public/
   En la carpeta public , creamos un archivo index.html que serviremos por defecto en nuestro servidor.
   

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page</title>
</head>
<body>
        <h1>Hello World!!</h1>
</body>
</html>

Listo ya tenemos nuestro servidor Express escrito con typescript.
Ya podemos ejecutar el programa

1

    npm run dev

Podemos verifcarlo por consola.

1
2
3
4
5
6
7
8

> nodemon src/index.ts

[nodemon] 3.0.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): src/**/*
[nodemon] watching extensions: ts
[nodemon] starting `ts-node  src/index.ts`
Servidor escuchando en el puerto: 8080

Ahí nos ínidica en que puerto esta escuchando el servidor.
Vamos a nuestro navegador favorito, he ingresamos a la siguiente url

localhost:(puerto que configuramos)

Si vamos al link observaremos lo siguiente.

Listo ya temos nuestro servidor web sirviendo un documento html, ya tenéis su primera página web.

Link del repositorio

Github