Crea un Entorno Backend con Node.js, Express y TypeScript

Eres nuevo en el desarrollo backend? O deseas integrar typescript a tu backend? No te preocupes, Hoy aprenderas como integrar typescript a tu proyecto backend de manera facil y sencilla en solamente 4 pasos.

Herramientas que necesitaras

1. Asegurate de tener instalado la version mas reciente de nodejs.org, Para esta ocasion se utiliza la version v18.18.0

2. Utiliza el editor de codigo de preferencia. En esta ocasion se utiliza VSCode

3. (Opcional) Esta guia utiliza el manejador de paquetes PNPM para gestionar los paquetes, El cual es opcional. Puedes utilizar otro como desees.

Paso 1: Inicializacion del proyecto

Crea una carpeta nueva por ejemplo : (MyBackend), Y debes ejecutar en tu consola el siguiente comando, El cual creara un archivo package.json para inicializar tu proyecto.

pnpm init

El archivo package.json te permite organizar tus dependencias y scripts para tu aplicacion.

Paso 2: Instalacion de dependencias

Debes abrir la consola de comandos donde se encuentre tu archivo package.json e instala las siguientes dependencias.

pnpm install cors dotenv express

Y luego debes instalar las dependencias de desarrollo o (DevDependencies)

pnpm install @types/cors @types/express nodemon typescript ts-node -D

Paso 3: Configuracion de Typescript y Scripts

Es necesario configurar de manera eficaz el archivo tsconfig.json la cual es importante para el desarrollo de nuestra aplicacion. Ejecuta el siguiente comando para crear un archivo tsconfig por defecto.

npx tsc --init

Y pega esta configuracion, La cual esta indicando que los archivos que tengas dentro de rootDir, seran archivos de typescript. y outDir sera el destino donde tus archivos fueron convertidos a javascript listos para produccion.

Agregando configuraciones extra como el strict mode el cual permite que typescript sea mas estricto al momento de utilizar archivos typescript.

{
  "allowJs": true,
  "compilerOptions": {
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "outDir": "./build", //Sera la salida para produccion.
    "rootDir": "./src", //Este sera el punto de entrada de typescript.
    "strict": true,
    "target": "ESNext"
  },
  "emitDecoratorMetadata": true,
  "esModuleInterop": true,
  "exclude": ["node_modules"],
  "experimentalDecorators": true,
  "forceConsistentCasingInFileNames": true,
  "include": ["index.d.ts", "src/**/*.ts"],
  "incremental": true,
  "isolatedModules": true,
  "module": "esnext",
  "moduleResolution": "node",
  "noEmit": true,
  "resolveJsonModule": true,
  "skipLibCheck": true,
  "strict": true
}

Y por ultimo debes agregar estos scripts en tu package.json. Cada comando tiene una funcion diferente.

1. Dev

Te permite crear el servidor de desarrollo para trabajar en tu entorno local. Utilizando nodemon para tener un desarrollo facil y rapido.

1. Start

Este comando esta enfocado en el entorno de produccion al momento de llevar tu aplicacion a la nube.

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

Paso 4: Configuracion de Express

Debes crear un archivo index.ts en la siguiente ruta. El cual sera el punto de entrada que fue definido en tu archivo tsconfig.json.

src/index.ts

De manera sencilla. Definimos esta estructura para comenzar nuestro desarrollo backend.

Es importante mencionar los modulos de cors y dotenv. Los cuales permiten que nuestro backend no tenga problemas al ser deployado a produccion y leer archivos .env sin ningun problema.

import cors from "cors";
import dotenv from "dotenv";
import express from "express";
dotenv.config();
const app = express();

const port = process.env.PORT ?? 3000;

app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(cors());


app.get("/", (req, res) =>
  res.status(200).json({
    message: "Hello World",
  })
);

app.listen(port, () => {
  console.log(`⚡️[server]: Server is running at http://localhost:${port}`);
});

Asi de sencillo es configurar typescript para tu entorno backend con nodejs. Esta configuracion es base y puedes expandirlo aun mas.

¡Si te gustó esta guía, suscríbete para recibir actualizaciones y comparte con amigos y colegas! Tu apoyo significa mucho y ayuda a que más personas descubran mi contenido. ¡Gracias!