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:
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
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
Publicidad
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.
Publicidad
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.
Publicidad
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.
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.
Publicidad
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.
Deja una respuesta