Configurando un Backend con Express, MongoDB, Typescript y Docker.

Hola amigo este tutorial es para que puedas aprender a configurar tu backend con las tecnologias del STACK MERN.

En mi caso siempre prefiero usar Typescript como lenguaje de Backend y javascript como lenguaje de Frontend y hoy estoy emocionado de mostrarte, como configuro mi backend a la hora de desarrollar, asi que empecemos.

INGRDIENTES:

Docker DesktopTable Plus O Mongo DB Compass

Inicio.
Primero que todo debemos generar nuestro archivo package.json e inicializar el proyecto para eso abriremos la terminal y escriremos el siguiente comando.


yarn init -y

Scripts de arranque.
Ahora agregaremos los siquientes scripts para configurar nuestro archivo package.json, esto sirve para desarrollar y compilar nuestro backend


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

Instalando Express y Mongoose...
Ahora vamos a instalar las libreias y paquetes necesarios para desarrollar cualquier api de node basica o avanzada, al hacer esto tambien se nos instalaran los modulos de node.


yarn add express cors dotenv mongoose morgan bcryptjs jsonwebtoken helmet

Ahora vamos a instalar las devDependencies y los@types. A su vez, instalaremos los modulos de ts-node-dev y typescript.


yarn add @types/express @types/cors @types/morgan @types/bcryptjs @types/jsonwebtoken @types/helmet ts-node-dev typescript -D

Por ultimo vamos a instalar el archivo de tsconfig.json. Existen dos formas. Una es usando npx en caso de no tener tsc instalado y la otra es usar el comando de la siguiente manera.


tsc --init

O tambien, en caso de no tener instalado el comando usaremos npx.


npx tsc --init

Hasta ahora algo asi debe de quedarnos nusestro proyecto con los archivos y configuraciones necesarias.

Configurando tsconfig.json.
Ahora vamos a configurar y descomentar las siguientes propiedades de nuestro archivo tsconfig.json.


"rootDir": "./src",
"resolveJsonModule": true,
"outDir": "./dist",

Configurando Directorios
Crearemos una carpeta 'src' y dentro crearemos dos archivos 'app.ts' y 'index.ts'. Algo asi se debe ver nuestro explorador de archivos.

En el archivo 'app.ts' vamos a poner el siguient codigo, estas configuraciones son necesarias para hacer un proyecto mediano o grande, si no comprendes del todo el codigo no te preocupes, confia en mi, ya que en el futuro lo comprenderas.


import express, { Request, Response } from 'express'
import cors from 'cors'
import morgan from 'morgan'
import helmet from 'helmet'
import pkg from '../package.json'

import * as dotenv from 'dotenv';

dotenv.config()

const app = express()

app.use(cors())
app.use(express.json())//Ver los datos en consola como JSON
app.use(morgan('dev'))//Ver las peticiones en consola
app.use(helmet())//Seguridad en la peticiones

app.set('pkg', pkg)

app.get('/', (req: Request, res: Response) => {
    res.json({
        author: app.get('pkg').author,
        name: app.get('pkg').name,
        description: app.get('pkg').description,
    })
})

export default app

En el archivo 'index.ts' vamos a poner el siguient codigo.


import app from "./app"

app.listen(process.env.PORT || 4000, () => console.log('Hola EXPRESS corriendo en el puerto: 4000' ))

Ahora arrancamos el proyecto con el siguiente codigo. Y si todo sale bien habras levantado tu servidor en Express.


yarn dev

Configruracion de docker-compose y MongoDB.

Crearemos un archivo en la raiz llamadodocker-compose.yamleste archivo creara nuetra basa de datos en docker. Asi que una vez creado pondremos el siguiente codigo.


version: '3.8'

services:

  db:
    image: mongo:6
    restart: always
    ports:
      - 27017:27017
    environment:
      MONGODB_DATABASE: mongo
    volumes:
      - ./mongo:/data/db

Ahora para construir la base de datos usaremos el siguiente comando.


docker compose up -d

Y para dejar corriendo la base de datos usaremos el comando.


docker compose up

Ultimo paso conectar Express con MongoDB.
En este ultimo paso modificaremos el archivo 'index.ts' y lo dejaremos de esta forma.


import app from "./app"
import mongoose from 'mongoose'

mongoose.set('strictQuery', false)

app.listen(process.env.PORT || 4000, () => console.log('Hola EXPRESS corriendo en el puerto: 4000' ))
mongoose.connect('mongodb://localhost:27017/mongo')
.then(() => console.log('Conexion a MONGO establecida'))
.catch(() => console.log('Error en la conexion a MONGO'))

Por ultimo usaremos Table Plus para tener un entorno grafico de nuestros datos. Solo basta con poner lo mismos datos que la imagen en el campo de la url para conectarnos con Table Plus. mongodb://localhost:27017/mongo

Huitzitzili Domingo Leon NievesProgramador

MERN STACK Developer