Crea un servidor web con Node.js y Typescript

Hace unas semanas estuve trabajando en crear un servidor web, y hacía tiempo que no creaba un proyecto desde cero como este así que me pareció interesante traerlo a un post y contarte qué es un servidor web, qué herramientas podemos elegir y cuáles suelo utilizar desarrollar mis side-project.

¿Qué es un servidor web?

Un servidor web es un programa que se encarga de enviar los datos de una página o aplicación web. Puede enviar ficheros estáticos, como podría ser un blog renderizado estáticamente (Static Site Generation o SSG), pero también puede ser una aplicación web que renderiza una página web la cual ejecuta lógica de negocio en nuestro backend, y envía información la navegador del usuario, mediante el protocolo HTTP(s) en formato HTML.

La comunicación entre un usuario y nuestro servidor puede parecer muy simple desde el punto de vista del cliente, ya que normalmente lo único que hace es introducir un enlace (URL) en el navegador y mágicamente el navegador renderiza el contenido de la web.

Aquí hay diferentes protocolos que intervienen, como lo es la resolución de nombres de dominio o DNS, el protocolo HTTP(s), las capas de caché y el funcionamiento interno de nuestro backend que puede ser desde un servidor web en un VPS hasta una compleja malla de servicios desplegada en un proveedor cloud. Esto son temas que trataré en futuros posts (y vídeos), y te invito a que te suscribas para apoyar la creación del contenido.

Eligiendo un framework

Ahora que ya sabemos lo que es un servidor web, podemos proceder a crear esta aplicación que nos permitirá ejecutar nuestra propia lógica de negocio en un servidor backend.

Luego habrá que desplegar este programa en un servidor (ya sea físico como una Raspberry Pi o una máquina virtual en cualquier VPS/Cloud). Esta es la parte que más me gusta y que podemos verlo en algún otro post, aunque podemos resumirlo en:

• Si es hacer un frontend tenemos herramientas como Next.js con React o Hugo (Go) para generar estáticos.
• Nginx para servir fichero estáticos en un VPS o usar proveedores como Cloudflare Pages, Vercel...
• Utilizar algún framework con nuestro lenguaje favorito para el backend y renderizar el HTML.

En nuestro caso vamos a proceder con la tercera opción: vamos a desarrollar un backend con Node.js y Typescript, que posteriormente ampliaremos a "backend for frontend" para renderizar HTML dinámicamente.

Hoy en día existen muchos frameworks que, según el lenguaje, te ofrecerán múltiples opciones como Django en Python, Ruby on Rails...

En este caso quiero crear un proyecto de cero, donde tengamos acceso a ciertas partes de la lógica de la aplicación que, en mi caso, necesito poder tener control sobre ciertos procesos y en ocasiones es más fácil si puedes modificar su funcionamiento. En tu caso la mejor elección dependerá de las necesidades, de tus preferencias o si simplemente quieres experimentar y aprender (que desde luego es una buena opción).

Yo suelo trabajar principalmente con: Python para scripting o prototipos, node.js con typescript suele ser mi default por la comunidad y la facilidad de uso / rendimiento, Go cuando quiero mayor rendimiento y facilidad de desarrollo y Rust para temas de más bajo nivel u optimización (o simplemente por diversión).

Node.js y Typescript

Si trabajas en node el web framework más famoso es express.js, que llevaba sin actualizarse varios años hasta hace unos días que han sacado la versión 5 y la verdad, me crea algo de hype probar esta nueva versión para conocer las mejoras.

En cualquier caso te recomiendo utilizar fastify, que es la que yo he elegido porque tiene buen soporte, una comunidad grande y buen rendimiento.

En la siguiente sección crearemos un proyecto con el contenido de nuestro proyecto.

Respecto a Typescript: me gusta tener tipado en el código ya que en mi caso me ayuda a tener mayor control sobre la estructura de los tipos y las variables. En mi opinión no me gusta tender a utilizar tipados complejos que, en muchas ocasiones incrementan la complejidad y suelen ser una pérdida de tiempo. En el equilibrio está la virtud.

Tutorial: desarrolla un servidor web con node y typescript

Ahora sí pasamos a la acción y el primer paso es crear una carpeta para nuestro proyecto mkdir fasi y crear un repositorio vacío con control de versiones usando git init.

Para utilizar node.js neceistas tenerlo instalado. En mi caso utilizo nvm para gestionar el las versiones e instalar la última. En este post te explico cómo utilizarlo.

Inicializamos nuestro proyecto de node con el comando npm inite introducimos algunos de los parámetros que nos solicite.

Vale ya tenemos una base sobre la que podemos trabajar y debemos instalar las tres dependencias más importantes que son:

• Typescript: gestión y configuración del tipado.
• Fastify: Servidor web.
• tsx: transpila nuestros ficheros de typescript a javascript de forma dinámica durante el desarrollo.

Puedes instalar las dependencias utilizando los siguientes comandos:

npm i -D @types/node typescript tsx
npm i fastify

Una vez tenemos typescript, debemos inicializar el fichero de configuración que podremos personalizar, utilizando typescript --init.

Para que funcione correctamente el proyecto, debes modificar los siguientes parámetros, de forma que node utilice el sistema de módulos ES modules, que nos ayudará a la hora de estructurar los ficheros durante el desarrollo.

"module": "node16",
"moduleResolution": "node16",
"outDir": "./build",

En el package json debes configurar algunos scripts que nos faciliten el uso del proyecto, por ejemplo:

• "dev": "tsx --watch ./src/main.ts",
• "build": "tsc",
• "start": "node ./build/main.js",

Estos scripts son muy interesantes porque te permiten hacer el build / ejecución de la aplicación en modo "producción" y el comando dev, el más interesante de todos lo que hace es transpilar en tiempo de ejecución los ficheros de typescript a javascript, además no comprueba los tipos por lo que es más rápido, y utiliza la opción --watch de node para detectar cambios en nuestro código y automáticamente reinicair el servidor. En este post te explico por qué es interesante utilizar la herramienta tsx frente a ts-node.

Ahora ya lo tenemos todo preparado para añadir un fichero src/main.ts que tendrá un caso de uso base para nuestro proyecto. Recuerda que puedes consultar el código en este repositorio de Github.

En los siguientes posts iré mejorando este proyecto para añadir diferentes capas: testing, almacenamiento e incluso renderizar algún HTML.