Organizar el código del proyecto (2ª parte de creación de una API REST con Express y TypeScript)

En la publicación de la semana pasada se presentaron los primeros pasos para la creación de una REST API con Express y TypeScript. Antes de que el número de servicios crezcan es necesario organizar el código del proyecto para facilitar su mantenimiento en el futuro. Además, también es necesario incluir algunos Middleware para facilitar algunas tareas. Veamos a continuación una forma en la que se puede organizar el código del proyecto.

Esta entrada forma parte de la serie “Creación de una API REST con Express y TypeScript” de la cual forman los siguientes entregas:

1. Creación de una API REST con Express y TypeScript
2. Organizar el código del proyecto
3. Configurar TypeORM para acceder a la base de datos
4. Creación de rutas para consultar y agregar los registros
5. Creación de rutas para modificar y borrar los registros
6. Agregando logs al API con Winston
7. Requerir autenticación mediante JWT
8. Registro de usuarios
9. Incluir un certificado en Express para servir el API mediante HTTPS
10. Ejecutar la aplicación en producción con PM2

Analizador de código estático

Los analizadores de código estático como ESLint son unas herramientas de gran ayuda para mejorar la calidad de los programas. Por eso es aconsejable instalar este paquete en proyecto, como se hizo cuando en el tutorial para la creación de una librería de TypeScript, lo que se hace escribiendo en la terminal el siguiente comando

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Comando que instalará ESLint y dos plugins para trabajar con TypeScript. Una vez hecho esto se puede configurar creando un archivo en la raíz del proyecto llamado .eslintrc en que se escribirá el siguiente código.

Habitualmente solamente no es necesario que ESLint valide el código que se encuentra dentro de la carpeta node_modules ya ahí se encuentran los modelos importados. Para evitar esto se puede crear un archivo .eslintignore en el proyecto donde se indicará las carpetas que ESLint debe ignorar. En el proyecto actual estas son node_modules y dist

Una vez hecho esto se puede validar el código ejecutando la siguiente instrucción en la terminal

npx eslint . --ext .ts

Aunque también se puede crear un script en el archivo package.json, para lo que solamente se debe agregar la siguiente línea.

"lint": "npx eslint . --ext .ts"

Formateador de código

Los formateadores de código son herramientas con las que se le puede dar una mayor homogeneidad a los programas. Algo que facilita tanto la lectura como el mantenimiento a largo plazo. Uno de los más populares es Prettier, el cual se puede agregar al proyecto mediante ejecutando la siguiente línea en la terminal

npm install --save-dev prettier

Ahora se puede formatear el código simplemente escribiendo en la terminal

npx prettier --parser typescript --write ./src

Lo que revisará únicamente el código en la carpeta src, el resto de las carpetas no es necesario revisarlo. También se puede agregar un script en package.json con esta línea para no tener que recordarla.

Personalmente prefiero que Prettier use solamente dos espacios para la tabulación, ya que el código resultante es más compacto, y comillas simples. Estas opciones se pueden fijar creando un archivo .prettierrc en el proyecto e incluyendo en este las siguientes líneas.

Clase con el servidor

Al trabajar en TypeScript puede ser una buena idea crear una clase para la configuración del servidor. Así para la creación de un servidor con el API solamente se tiene que crear una instancia de esta clase. Para ello se puede crear un archivo server.ts en el que se incluya el siguiente código.

import express, { Application, Router, RequestHandler } from 'express';
import * as http from 'http';

interface ServerConfiguration {
  port?: number;
  middleWares?: RequestHandler[];
  routes?: Router[];
}

class Server {
  private _app: Application;
  private _port: number;
  private _server?: http.Server;

  constructor(serverConf: ServerConfiguration) {
    this._app = express();
    this._port = serverConf.port || 3000;

    if (serverConf.middleWares) {
      this._middlewares(serverConf.middleWares);
    }

    if (serverConf.routes) {
      this._routes(serverConf.routes);
    }
  }

  private _middlewares(middleWares: RequestHandler[]) {
    middleWares.forEach((middleWare) => this._app.use(middleWare));
  }

  private _routes(routes: Router[]) {
    routes.forEach((route) => this._app.use(route));
  }

  public listen() {
    this._server = http.createServer(this._app);
    this._server.listen(this._port, () => {
      console.log(`App listening on port ${this._port}`);
    });
  }
}

export default Server;

En la que se ha creado una clase Server con un constructor al que se le deben pasar los parámetros necesarios mediante una interfaz. La cual contiene tres valores opcionales: el puerto, los middlewares y las rutas. Al ser todos los valores opcionales, en el caso de que no se indique ninguna opción cuando se inicie el servicio se creará uno vacío por defecto en el puerto 3000.

Para iniciar el servidor, se debe llamar al método listen() una vez creado este.

Carpeta para las rutas

Es aconsejable separar el código de las rutas en una carpeta, a la que se le puede llamar routes. En esta carpeta, por el momento, se puede crear un archivo index.ts donde se puede indicar el código de la ruta que se había escrito en para publicar el mensaje.

import { Router } from 'express';

// Configuración del puerto
const PORT: number = Number(process.env.PORT) || 3000;

// Creación de la ruta
const router = Router();

router.get('/', async (_req, res) => {
  res.send({
    message: `Server is running on port ${PORT}`,
  });
});

export default router;

En las próximas entradas explicaremos más cómo trabajar con las rutas.

Carpeta para los middlewares

Al igual que las rutas, los middlewares se pueden guardar en una carpeta a la que se puede llamar middlewares. En este punto del proyecto se pueden incluir tres middlewares bastante populares cuando se trabaja con Express: Morgan, Helmet, y CORS. Middlewares que es necesario instalar ejecutando en la terminal los siguientes comandos

npm install helmet cors morgan
npm install --save-dev @types/cors @types/morgan

La utilidad de estos middlewares es:

• Morgan: crea un log cada vez que se produce alguna llamada a uno de los servicios, es de gran utilidad para la creación de logs. Punto que veremos en más detalle más adelante.
• Helmet: mejora la seguridad de la aplicación mediante la inclusión de cabeceras HTTP.
• CORS: permite la activar de manera sencilla el Intercambio de recursos de origen cruzado (CORS, Cross-origin resource sharing)

import cors from 'cors';
import helmet from 'helmet';
import morgan from 'morgan';

const middleWares = [
  morgan('tiny'),
  helmet(),
  cors(),
];

export default middleWares;

La configuración básica de estos middlewares se puede realizar con el siguiente archivo, el cual se guardará como index.ts en la carpeta middlewares.

En las próximas entradas explicaremos cómo configurar más en detalle estos y otros middlewares.

Refactorización del servicio

Con los cambios introducidos se puede simplificar el código del servicio, el archivo index.ts de la carpeta src, simplemente de la siguiente manera.

import middleWares from './middlewares';
import router from './routes';
import Server from './server';

// Configuración del puerto
const PORT: number = Number(process.env.PORT) || 3000;

// Creación del servicio
const server = new Server({
  port: PORT,
  middleWares: middleWares,
  routes: [router],
});
server.listen();

En este caso lo que se hace es importar los middlewares, las rutas y la clase Server para crear una instancia e iniciar está en pocas líneas de código.

Conclusiones

En esta segunda entrada de la serie se realiza una propuesta para organizar el código del proyecto de cara a que este se pueda mantener fácilmente. Además, se han introducido tres middlewares ampliamente utilizados en Express. La próxima semana se verá cómo conectar el servicio con una base de datos.

El código creado en toda la serie de publicaciones se puede encontrar en la cuenta de GitHub de Analytics Lane.

Imagen de Tayeb MEZAHDIA en Pixabay