Crear servidor de Expressjs usando TypeScript

Si has trabajado con nodejs sabes que express es un framework para crear servidores web. Express trabaja con JavaScript por defecto, por lo que para que podamos usar TypeScript, deberemos hacer algunas configuraciones adicionales. Nada difíciles.

Primero es importante haber instalado un proyecto node usando TypeScript. Si no lo has hecho, te recomiendo un articulo que ya realice explicando como se hace.

Aquí te dejo el enlace. https://medium.com/@alexismontla/como-empezar-un-proyecto-de-nodejs-usando-typescript-2d3a8c1b86bf

Listo, ya con el proyecto node creado vamos a continuar.

Vamos a crear el servidor de express usando TypeScript. Lo primero que haremos es instalar express, cors y dotenv.

Express es el paquete(framework) para crear servidores web usando nodejs. En nuestro caso usaremos ademas TypeScript.

Cors es un paquete para el manejo de peticiones HTTP a nuestro servidor. Estas peticiones deben habilitarse para que otras ip’s puedan hacer solicitudes a nuestro servidor. Por defecto el servidor solo aceptara peticiones HTTP solo de su propia ip.

Dotenv es un paquete para el manejo de variables de entorno en nuestro proyecto. Estas variables generalmente son valores de configuración o claves de accesos a bases de datos, conexiones con terceros y otras cosas que no deben estar publicas en nuestra app.

Dotenv usa un archivo llamado .env que debe encontrarse en la raíz del proyecto. Este archivo contendrá todas las variables de entorno que estaremos usando en nuestro proyecto.

npm install express cors dotenv

Adicionalmente debemos instalar la dependencia de express para soportar TypeScript. Por defecto express soporta JavaScript, pero no TypeScript por lo que hay que instalar el paquete correspondiente.

npm install --save-dev @types/express

Esta dependencia que se instaló es de desarrollo.

Para empezar crearemos ese archivo(.env) con la primera variable de entorno. En este caso será el puerto de nuestra app. Quedaria asi:

PORT=8000

Usaremos el puerto 8000 como el puerto de acceso a nuestra aplicación.

Luego crearemos un directorio llamado ‘models’ en la raíz del proyecto

cd project-name && mkdir models

Ahora creamos un archivo llamado ‘server.ts’ dentro de la carpeta models. Y creamos una clase llamada Server dentro del archivo. Esta clase contendrá la configuración de nuestro servidor de express.

// Importamos express y el modulo Application
import express, { Application } from 'express';

// Creamos la clase llamada Server
class Server 
{

    // Creamos nuestra porpiedad app de tipo Application
    // Esta propiedad contendra la aplicacion express
    private app: Application;
    // Propiedad que almacenara el puerto
    private port: string;

    constructor() {
        // Iniciamos express y guardamos en la pripiedad app
        this.app  = express();
        // Asignamos el valor de la variable PORT del archivo .env
        // En caso de no existir o no tener valor, se tomara '3000'
        this.port = process.env.PORT || '3000';
    }

    // Creamos el metodo listen que ejecuta nuestra aplicacion en el puerto 8000
    listen() {
        this.app.listen(this.port, () => {
            console.log(`Server running on port ${this.port}`);
        });
    }

}

export default Server;

Ahora vamos a configurar nuestro punto de entrada. En la raiz del proyecto configuramos nuestro archivo app.js

import dotenv from 'dotenv';
import Server from './models/server';
// Ejecutamos el metodo config de dotenv. Este metodo carga la configuracion por defecto del paquete
// Lo cual nos permite leer las variables del archivo .env en nuestra aplicacion.
dotenv.config();

// Creamos una instancia de la clase Server. 
// Esta clase contiene toda la lógica para levantar el servidor Express
const server = new Server();

// Llamamos al método listen, esto es lo que hace que el servidor se ponga a escuchar peticiones HTTP
// En este caso en el puerto 8000
server.listen();

Bien. Ahora vamos a compilar nuestro proyecto con TypeScript y a lanzar el servidor con node.

Para compilar ele proyecto con TypeScript podemos usar el comando:

tsc

Sin embargo, este comando se deberá ejecutar cada vez que realicemos un cambio en nuestros archivos .ts de nuestra aplicación. Hay un mejor método. Y es agregándole un parámetro al comando. De esta manera:

tsc --watch

Esto le indica a TypeScript que debe estar escuchando cualquier cambio que ocurra en algún archivo .ts de nuestra aplicación.

Listo. Con nuestra aplicacion trasnpilada/compilada de TypeScript a JavaScript, debemos ejecutar nuestro servidor con node.

En este caso estaremos usando nodemon. Con el siguiente comando:

nodemon dist/index.js

¡Y listo! Tenemos nuestro servidor escuchan particiones HTTP en el puerto 8000.

¡Saludos!