This project gives you a clean setup for an Express.js server using TypeScript and Docker, with hot-reloading and easy debugging. It ensures everything runs consistently across different environments and platforms.

Requirements

• Install the latest version of Node.js from here.

• Verify the installation with:

  node --version

• Install the latest version of Docker from here.

• Open Docker Desktop and verify that it's running.

• Verify that Docker is ready with:

docker info

• Install the lastest version of Visual studio code from here

---

1. Initialize the Project

Create a project directory:

mkdir myapp && cd myapp

Initialize Node.js:

npm init -y

---

2. Install Dependencies

Install Express:

npm install express

Install Dev Dependencies:

npm install -D @types/express typescript nodemon ts-node rimraf

---

3. Configure TypeScript

Initialize TypeScript configuration:

npx tsc --init

Update tsconfig.json:

{
  "include": [
    "./src/**/*.ts",
    "./src/**/*.js"
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build",
    "rootDir": "src",
    "target": "es6",
    "module": "commonjs",
    "lib": ["es6"],
    "allowJs": false,
    "strict": true,
    "noImplicitAny": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "removeComments": true,
    "resolveJsonModule": true,
    "forceConsistentCasingInFileNames": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "exclude": [
    "node_modules/*"
  ]
}

---

4. Setup Express

Create the project structure:

mkdir src

Create a basic Express server:

• Inside the src directory create an index.ts file and add the following code.

  import express, { Request, Response } from 'express';
  
  const app = express();
  const PORT = process.env.PORT || 3000;
  
  app.get('/', (req: Request, res: Response) => {
    res.send('Hello from Express and TypeScript!').end();
  });
  
  app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
  });

---

5. Set Up Development Environment

Create the development directory:

mkdir development

5.1 Nodemon Configuration

Create nodemon.json: Create a file nodemon.json inside the development folder and add the following code:

{
  "verbose": true,
  "restartable": "rs",
  "legacyWatch": true,
  "ignore": [".git", "node_modules", "build", "development"],
  "watch": ["src"],
  "execMap": {
    "ts": "node -r ts-node/register"
  },
  "ext": "ts,js"
}

5.2 TypeScript Development Config

Create dev.tsconfig.json: Create a file dev.tsconfig.json inside the development folder and add the following code:

{
  "extends": "../tsconfig",
  "compileOnSave": true,
  "compilerOptions": {
    "sourceMap": true,
    "strictNullChecks": true
  }
}

5.3 Environment Variables

Create .env: Create a file .env inside the development folder and add the following code:

# General envs
APP_NAME=Example
PORT=80
PRODUCTION=0
APP_VERSION=1.0.0

---

6. Docker Setup

Create the Dockerfile for development: Create a file dev.Dockerfile inside the development folder and add the following code:

# Stage 1: Build
FROM node:23

WORKDIR /home/src/app

COPY package*.json .

RUN npm install

COPY tsconfig.json .
COPY development/nodemon.json ./development/nodemon.json
COPY development/dev.tsconfig.json ./development/dev.tsconfig.json

Create Docker Compose for development: Create a file dev.docker-compose.yml inside the development folder and add the following code:

services:
  server:
    build:
      context: ../
      dockerfile: development/dev.Dockerfile
    container_name: "${APP_NAME}-${APP_VERSION}"
    volumes:
      - ../src:/home/src/app/src
    restart: always
    environment:
      PORT: "80"
    ports:
      - "9229:9229" # Debugger port
      - "${PORT}:80"
    command: npm run startDockerDev

---

7. Update Scripts in package.json

Replace default scripts:

{
  "buildDev": "rimraf build && tsc -p development/dev.tsconfig.json",
  "startDev": "rimraf build && tsc -p development/dev.tsconfig.json && nodemon --config development/nodemon.json --inspect src/index.ts",
  "buildAndStartDev": "npm run buildDev && npm run startDev",
  "buildProd": "rimraf build && tsc -p .",
  "startProd": "node build/index.js",
  "buildAndStartProd": "npm run buildProd && npm run startProd",
  "startDockerDev": "nodemon --config development/nodemon.json --inspect=0.0.0.0:9229 src/index.ts"
}

---

8. Debugging Setup

• Create a new directory: .vscode in the root directory

Configure VS Code Debugging: Create a file launch.json inside the .vscode folder and add the following code:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug DOCKER server",
      "type": "node",
      "restart": true,
      "request": "attach",
      "port": 9229,
      "address": "127.0.0.1",
      "remoteRoot": "/home/src/app/src",
      "localRoot": "${workspaceFolder}/src"
    }
  ]
}

---

9. Visual Studio Code Tasks

Create VS Code tasks: Create a file tasks.json inside the .vscode folder and add the following code:

  {
    "version": "2.0.0",
    "tasks": [
      {
        "label": "Start DOCKER Development server",
        "type": "shell",
        "command": "docker-compose -f ${workspaceFolder}/development/dev.docker-compose.yml up -d"
      },
      {
        "label": "Stop DOCKER Development server",
        "type": "shell",
        "command": "docker-compose -f ${workspaceFolder}/development/dev.docker-compose.yml down"
      },
      {
        "label": "Build DOCKER Development server",
        "type": "shell",
        "command": "docker-compose -f ${workspaceFolder}/development/dev.docker-compose.yml build"
      },
      {
        "label": "Build DOCKER Development server and start",
        "type": "shell",
        "command": "docker-compose -f ${workspaceFolder}/development/dev.docker-compose.yml up --build -d"
      },
      {
        "label": "DELETE DOCKER CACHE",
        "type": "shell",
        "command": "docker system prune -a -f"
      },
      {
        "label": "Re-build and start DOCKER Development server",
        "type": "shell",
        "command": "docker-compose -f ${workspaceFolder}/development/dev.docker-compose.yml down; docker-compose -f ${workspaceFolder}/development/dev.docker-compose.yml up --build -d"
    }
	]
}

---

10. Running the Project

If you made it this far then your project is successfully configured and ready to be tested.

Build and Start:

• In Visual Studio Code, open terminal/tasks and run the task named: Build DOCKER Development server and start
• Wait for the docker-compose image to finish building.
• Visit the server at: http://localhost

11. Repository

• Clone this repo

git clone https://github.com/JerryUrena/Setup-Express-JS-with-Docker-TypeScript-Hot-Reload-and-Debug

• Found an error? Edit this Repository on GitHub