Crear un servidor de Nodejs con Express, Typescript y desplegarlo

Introducción

A veces puede resultar complicado crear un servidor en Node.js utilizando Express y Typescript, especialmente debido a la configuración de Typescript y los paquetes necesarios que contienen los archivos de definición.

En este artículo, te enseñaré todo lo que necesitas saber para crear un proyecto de este tipo en cuestión de minutos, incluyendo un extra que te mostrará cómo desplegar el servidor de forma totalmente gratuita.

Instalaciones y configuraciones necesarias

Para empezar, es necesario inicializar un proyecto de Node.js ejecutando el siguiente comando dentro de una carpeta:

npm init --y

Ahora que tenemos un proyecto de Node.js, necesitaremos instalar todos los paquetes necesarios para crear nuestro servidor. Algunos de los paquetes que necesitaremos son: express, @types/express, typescript, ts-node-dev, dotenv, cors, y @types/cors.

Que los instalaremos con los siguientes comandos:

npm i express dotenv cors

npm i -D @types/express typescript ts-node-dev @types/cors

Después de haber instalado todos los paquetes necesarios, debemos inicializar TypeScript en nuestro proyecto. Para hacerlo, utilizaremos el siguiente comando:

tsc --init

Al ejecutar el comando anterior, se generará un archivo llamado tsconfig.json. Este archivo debe ser abierto y debe agregarse la configuración "outDir": "build". Esta configuración indica el nombre de la carpeta donde se ubicará el código transpilado de TypeScript a JavaScript.

tsconfig.json

"compilerOptions": {
  ...
  "outDir": "build"
}

Por último, necesitamos configurar los scripts en nuestro archivo package.json. Los scripts deben quedar de la siguiente forma:

package.json

"scripts": {
  "dev": "ts-node-dev index.ts",
  "build": "tsc",
  "start": "node build/index.js"
},

Creando una sencilla API

Vamos a crear una API que simule una calculadora sencilla. Esta API contará con endpoints para realizar operaciones de suma, resta, división y multiplicación, y cada uno de estos endpoints recibirá dos números como entrada.

Archivo index.ts

index.ts

import express from "express";
import dotenv from "dotenv";
import cors from "cors";

import calculadoraRoute from "./routes/calculadora.routes";

dotenv.config();

const app = express();

//* middleware *//
app.use(express.json());
app.use(cors({ origin: "*" }));

//* routes *//
app.use("/calculadora", calculadoraRoute);

app.listen(process.env.PORT, () => {
  console.log(`Server iniciado en el puerto ${process.env.PORT}`);
});

Este código configura un servidor web utilizando Express, define una ruta /calculadora y utiliza middleware para analizar las solicitudes JSON y habilitar el intercambio de recursos entre dominios. El servidor se inicia y comienza a escuchar en el puerto especificado en la variable de entorno PORT.

Archivo routes/calculadora.routes.ts

calculadora.routes.ts

import { Router } from "express";

const router = Router();

router.post("/sumar", (req, res) => {
  const { n1, n2 } = req.body;

  res.status(200).json({
    result: n1 + n2,
  });
});

router.post("/restar", (req, res) => {
  const { n1, n2 } = req.body;

  res.status(200).json({
    result: n1 - n2,
  });
});

router.post("/multiplicar", (req, res) => {
  const { n1, n2 } = req.body;

  res.status(200).json({
    result: n1 * n2,
  });
});

router.post("/dividir", (req, res) => {
  const { n1, n2 } = req.body;

  res.status(200).json({
    result: n1 / n2,
  });
});

export default router;

Este código define un enrutador que maneja las rutas relacionadas con operaciones matemáticas básicas. Cada ruta recibe dos números en el cuerpo de la solicitud y realiza la operación correspondiente (suma, resta, multiplicación o división) para luego enviar el resultado en una respuesta JSON.

Archivo .env

En este archivo, configuraremos las variables de entorno necesarias para nuestro proyecto. En este caso, solo estableceremos el puerto.

.env

port=4000

Estructura final de nuestro proyecto

Tras todo lo anterior, la estructura de nuestro proyecto quedaría así:

├─ 📁 node_modules
├─ 📂 routes
|  ├─ 🖇️ calculadora.routes.ts
├─ 🖇️ .env
├─ 🖇️ index.ts
├─ 🖇️ package-lock.json
├─ 🖇️ package.json
├─ 🖇️ tsconfig.json

Iniciar y utilizar nuestra aplicación

Ahora que disponemos de todo lo necesario para que nuestra aplicación funcione, es necesario iniciarla. Para ello, en la consola, debemos escribir el siguiente comando:

npm run dev

El siguiente paso es utilizar un programa como Postman o similar, que nos permita realizar peticiones HTTP hacia nuestra aplicación. En Postman o en el programa de tu elección, debemos escribir la URL donde se aloja nuestra aplicación, seguida del endpoint que queramos utilizar y en este caso, debemos utilizar el método POST.

En el body de la petición, debemos incluir las dos propiedades que todos nuestros endpoints esperan recibir para realizar la correspondiente operación. En Postman, para hacer esto, debemos seleccionar la pestaña 'Body', luego seleccionar 'raw' y escribir allí el objeto JSON.

Para enviar la petición, debemos presionar el botón 'Send' y recibiremos la respuesta que retorna nuestro servidor. En este caso, como ejemplo, la suma de 40 + 60 devuelve un resultado de 100.

Desplegar nuestro servidor

Para desplegar nuestra aplicación, utilizaremos el servicio Render. Para acceder al servicio, podemos crear una cuenta o utilizar nuestra cuenta de GitHub o Google.

Una vez dentro, debemos dirigirnos al botón 'New' y seleccionar la opción de 'Web Service'.

En esa sección, debemos conectar nuestra cuenta de Render con nuestra cuenta en GitHub o GitLab donde se aloja el repositorio con nuestro proyecto. Esto permitirá que Render pueda ubicar nuestros repositorios.

Debemos seleccionar el repositorio donde se encuentra nuestro proyecto.

Cuando hayamos seleccionado él repositorio, deberemos colocar un nombre a nuestro proyecto.

Además, debemos indicarle a Render los comandos que debe ejecutar para desplegar nuestro proyecto. En el apartado 'Build Command', colocaremos npm install && npm run build, y en el apartado 'Start Command', colocaremos npm start.

Por último, bajamos hacia el fondo de la página y pulsamos el botón 'Create Web Service' para iniciar el proceso de deploy. Una vez finalizado, tendremos una pantalla similar a la siguiente que indica que el deploy ha sido exitoso:

Conclusiones

En este artículo, hemos aprendido cómo crear un servidor de Node.js utilizando Express y Typescript en muy pocos minutos. A través de ejemplos de código y explicaciones detalladas, hemos explorado los pasos necesarios para configurar el proyecto, instalar los paquetes requeridos y desarrollar una sencilla API.

Crear un servidor de Node.js con Express y Typescript puede ser un desafío, especialmente para aquellos que están comenzando en el desarrollo web. Sin embargo, con la guía adecuada y un enfoque paso a paso, es posible lograrlo de manera rápida y efectiva.