📘 Docker with TypeScript: Containerization

🎯 Introduction

Welcome to this exciting tutorial on Docker with TypeScript! 🎉 In this guide, we’ll explore how to containerize your TypeScript applications with Docker.

You’ll discover how Docker can transform your TypeScript development experience. Whether you’re building web applications 🌐, server-side code 🖥️, or libraries 📚, understanding containerization is essential for modern deployment and development workflows.

By the end of this tutorial, you’ll feel confident containerizing TypeScript applications in your own projects! Let’s dive in! 🏊‍♂️

📚 Understanding Docker Containerization

🤔 What is Docker Containerization?

Docker containerization is like shipping containers 📦 for your applications! Think of it as a standardized box that packages your TypeScript app with everything it needs to run - runtime, dependencies, and configuration files.

In TypeScript terms, Docker creates isolated environments where your code runs consistently across different machines 🖥️. This means you can:

• ✨ Deploy anywhere with confidence
• 🚀 Scale applications easily
• 🛡️ Isolate dependencies and avoid conflicts

💡 Why Use Docker with TypeScript?

Here’s why developers love Docker for TypeScript apps:

1. Consistency 🔄: Same environment everywhere
2. Isolation 🏠: No dependency conflicts
3. Scalability 📈: Easy horizontal scaling
4. Deployment 🚀: Simple production deployments

Real-world example: Imagine deploying a TypeScript API 🛒. With Docker, you package everything once and it runs identically on development, staging, and production!

🔧 Basic Syntax and Usage

📝 Simple Dockerfile Example

Let’s start with a friendly Dockerfile for TypeScript:

# 👋 Hello, Docker!
FROM node:18-alpine

# 🎨 Set working directory
WORKDIR /app

# 📦 Copy package files first (for better caching)
COPY package*.json ./

# ⚡ Install dependencies
RUN npm ci --only=production

# 📝 Copy source code
COPY . .

# 🏗️ Build TypeScript
RUN npm run build

# 🚀 Expose port
EXPOSE 3000

# 🎯 Start the application
CMD ["npm", "start"]

💡 Explanation: This Dockerfile creates a lightweight Alpine Linux container with Node.js, installs dependencies, builds your TypeScript code, and starts the app!

🎯 TypeScript Project Structure

Here’s how to organize your TypeScript project for Docker:

// 📁 Project structure
my-typescript-app/
├── src/
│   ├── index.ts          // 🎯 Entry point
│   ├── routes/           // 🛣️ API routes
│   └── services/         // 🔧 Business logic
├── dist/                 // 🏗️ Compiled JavaScript
├── Dockerfile            // 🐳 Docker configuration
├── .dockerignore         // 🚫 Ignore unnecessary files
├── package.json          // 📦 Dependencies
└── tsconfig.json         // ⚙️ TypeScript config

💡 Practical Examples

🛒 Example 1: Express.js API Container

Let’s containerize a TypeScript Express API:

// 🎯 src/index.ts - Simple Express API
import express from 'express';

interface Product {
  id: string;
  name: string;
  price: number;
  emoji: string;
}

const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.json());

// 🛍️ Sample products
const products: Product[] = [
  { id: '1', name: 'TypeScript Book', price: 29.99, emoji: '📘' },
  { id: '2', name: 'Docker Guide', price: 24.99, emoji: '🐳' },
  { id: '3', name: 'Coffee', price: 4.99, emoji: '☕' }
];

// 🎯 Get all products
app.get('/api/products', (req, res) => {
  res.json({ products, total: products.length });
});

// 🔍 Get product by ID
app.get('/api/products/:id', (req, res) => {
  const product = products.find(p => p.id === req.params.id);
  if (!product) {
    return res.status(404).json({ error: 'Product not found 😕' });
  }
  res.json(product);
});

// 🏥 Health check
app.get('/health', (req, res) => {
  res.json({ status: 'healthy', timestamp: new Date().toISOString() });
});

app.listen(PORT, () => {
  console.log(`🚀 Server running on port ${PORT}`);
  console.log(`🐳 Containerized TypeScript API is ready!`);
});

# 🐳 Optimized Dockerfile for TypeScript API
FROM node:18-alpine AS builder

# 🎯 Set working directory
WORKDIR /app

# 📦 Copy package files
COPY package*.json ./
COPY tsconfig.json ./

# ⚡ Install all dependencies (including dev)
RUN npm ci

# 📝 Copy source code
COPY src/ ./src/

# 🏗️ Build TypeScript
RUN npm run build

# 🚀 Production stage
FROM node:18-alpine AS production

WORKDIR /app

# 📦 Copy package files
COPY package*.json ./

# ⚡ Install only production dependencies
RUN npm ci --only=production && npm cache clean --force

# 📝 Copy built application
COPY --from=builder /app/dist ./dist

# 🔒 Create non-root user
RUN addgroup -g 1001 -S nodejs
RUN adduser -S nodejs -u 1001

# 🛡️ Change ownership
USER nodejs

# 🚀 Expose port
EXPOSE 3000

# 🎯 Health check
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
  CMD curl -f http://localhost:3000/health || exit 1

# 🎮 Start the application
CMD ["node", "dist/index.js"]

🎯 Try it yourself: Add environment variables for database connection and API keys!

🎮 Example 2: Multi-Stage Build with Testing

Let’s create a robust Docker setup with testing:

// 🧪 src/services/calculator.ts
export class Calculator {
  // ➕ Add numbers
  add(a: number, b: number): number {
    return a + b;
  }
  
  // ➖ Subtract numbers
  subtract(a: number, b: number): number {
    return a - b;
  }
  
  // ✖️ Multiply numbers
  multiply(a: number, b: number): number {
    return a * b;
  }
  
  // ➗ Divide numbers
  divide(a: number, b: number): number {
    if (b === 0) {
      throw new Error('Division by zero! 😱');
    }
    return a / b;
  }
}

// 🧪 src/__tests__/calculator.test.ts
import { Calculator } from '../services/calculator';

describe('Calculator', () => {
  let calc: Calculator;
  
  beforeEach(() => {
    calc = new Calculator();
  });
  
  test('➕ should add numbers correctly', () => {
    expect(calc.add(2, 3)).toBe(5);
    expect(calc.add(-1, 1)).toBe(0);
  });
  
  test('➗ should throw error for division by zero', () => {
    expect(() => calc.divide(10, 0)).toThrow('Division by zero! 😱');
  });
});

# 🐳 Multi-stage Dockerfile with testing
FROM node:18-alpine AS base
WORKDIR /app
COPY package*.json ./
RUN npm ci

# 🧪 Testing stage
FROM base AS testing
COPY . .
RUN npm run test
RUN npm run lint

# 🏗️ Build stage
FROM base AS builder
COPY . .
RUN npm run build

# 🚀 Production stage
FROM node:18-alpine AS production
WORKDIR /app

# 📦 Copy package files and install production deps
COPY package*.json ./
RUN npm ci --only=production

# 📝 Copy built application
COPY --from=builder /app/dist ./dist

# 🔒 Security: non-root user
RUN addgroup -g 1001 -S nodejs && \
    adduser -S nodejs -u 1001
USER nodejs

EXPOSE 3000
CMD ["node", "dist/index.js"]

🚀 Advanced Concepts

🧙‍♂️ Advanced Topic 1: Docker Compose for TypeScript Services

When you’re ready to level up, try orchestrating multiple services:

# 🎯 docker-compose.yml
version: '3.8'

services:
  # 🌐 TypeScript API service
  api:
    build:
      context: .
      dockerfile: Dockerfile
      target: production
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - DATABASE_URL=postgresql://user:pass@db:5432/myapp
      - REDIS_URL=redis://redis:6379
    depends_on:
      - db
      - redis
    volumes:
      - ./logs:/app/logs
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:3000/health"]
      interval: 30s
      timeout: 10s
      retries: 3

  # 🗄️ PostgreSQL database
  db:
    image: postgres:15-alpine
    environment:
      POSTGRES_DB: myapp
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
    volumes:
      - postgres_data:/var/lib/postgresql/data
    ports:
      - "5432:5432"

  # 🔄 Redis cache
  redis:
    image: redis:7-alpine
    command: redis-server --appendonly yes
    volumes:
      - redis_data:/data
    ports:
      - "6379:6379"

volumes:
  postgres_data:
  redis_data:

🏗️ Advanced Topic 2: Development vs Production Configurations

For the brave developers:

# 🎯 Dockerfile.dev - Development version
FROM node:18-alpine

WORKDIR /app

# 📦 Copy package files
COPY package*.json ./
RUN npm ci

# 📝 Copy source code
COPY . .

# 🔄 Install nodemon for hot reloading
RUN npm install -g nodemon ts-node

# 🚀 Expose port
EXPOSE 3000

# 🎮 Start with hot reload
CMD ["npm", "run", "dev"]

# 🎯 docker-compose.dev.yml - Development compose
version: '3.8'

services:
  api:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development
      - DEBUG=true
    command: npm run dev

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Large Image Sizes

# ❌ Wrong way - huge image!
FROM node:18
WORKDIR /app
COPY . .
RUN npm install
CMD ["npm", "start"]

# ✅ Correct way - optimized image!
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build

FROM node:18-alpine
WORKDIR /app
COPY --from=builder /app/dist ./dist
COPY --from=builder /app/node_modules ./node_modules
CMD ["node", "dist/index.js"]

🤯 Pitfall 2: Ignoring .dockerignore

# ❌ Without .dockerignore - copies everything!
COPY . .

# ✅ With proper .dockerignore file
# .dockerignore
node_modules
npm-debug.log
Dockerfile
.dockerignore
.git
.gitignore
README.md
.env
coverage/
.nyc_output

🛠️ Best Practices

1. 🎯 Use Multi-Stage Builds: Separate build and runtime environments
2. 📝 Optimize Layer Caching: Copy package.json first, then source code
3. 🛡️ Security First: Use non-root users and scan for vulnerabilities
4. 🎨 Keep Images Small: Use Alpine Linux and remove unnecessary files
5. ✨ Health Checks: Always include health check endpoints

🧪 Hands-On Exercise

🎯 Challenge: Containerize a TypeScript Chat API

Create a containerized real-time chat application:

📋 Requirements:

• ✅ Express.js API with WebSocket support
• 🏷️ TypeScript with proper types
• 👤 User authentication
• 📅 Message persistence with MongoDB
• 🎨 Docker Compose with Redis for sessions

🚀 Bonus Points:

• Add nginx reverse proxy
• Implement horizontal scaling
• Create CI/CD pipeline with Docker

💡 Solution

// 🎯 src/types/chat.ts
export interface User {
  id: string;
  username: string;
  emoji: string;
  isOnline: boolean;
}

export interface Message {
  id: string;
  userId: string;
  username: string;
  content: string;
  timestamp: Date;
  emoji: string;
}

export interface Room {
  id: string;
  name: string;
  users: User[];
  messages: Message[];
}

// 🎯 src/server.ts
import express from 'express';
import { createServer } from 'http';
import { Server } from 'socket.io';
import { User, Message, Room } from './types/chat';

const app = express();
const server = createServer(app);
const io = new Server(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});

const PORT = process.env.PORT || 3000;

// 🏠 In-memory storage (use Redis in production)
const rooms = new Map<string, Room>();
const users = new Map<string, User>();

app.use(express.json());

// 🏥 Health check
app.get('/health', (req, res) => {
  res.json({ 
    status: 'healthy', 
    timestamp: new Date().toISOString(),
    rooms: rooms.size,
    users: users.size
  });
});

// 🌐 WebSocket connection handling
io.on('connection', (socket) => {
  console.log(`🔌 User connected: ${socket.id}`);
  
  // 👋 User joins a room
  socket.on('join-room', (data: { roomId: string; user: User }) => {
    const { roomId, user } = data;
    
    // 🏠 Create room if it doesn't exist
    if (!rooms.has(roomId)) {
      rooms.set(roomId, {
        id: roomId,
        name: `Room ${roomId}`,
        users: [],
        messages: []
      });
    }
    
    const room = rooms.get(roomId)!;
    
    // 👤 Add user to room
    users.set(socket.id, user);
    room.users.push(user);
    
    socket.join(roomId);
    
    // 📢 Broadcast user joined
    socket.to(roomId).emit('user-joined', {
      user,
      message: `${user.emoji} ${user.username} joined the chat! 🎉`
    });
    
    // 📋 Send room info to user
    socket.emit('room-info', room);
  });
  
  // 💬 Handle new messages
  socket.on('send-message', (data: { roomId: string; content: string }) => {
    const user = users.get(socket.id);
    if (!user) return;
    
    const message: Message = {
      id: Date.now().toString(),
      userId: user.id,
      username: user.username,
      content: data.content,
      timestamp: new Date(),
      emoji: user.emoji
    };
    
    const room = rooms.get(data.roomId);
    if (room) {
      room.messages.push(message);
      
      // 📤 Broadcast message to room
      io.to(data.roomId).emit('new-message', message);
    }
  });
  
  // 👋 Handle disconnect
  socket.on('disconnect', () => {
    const user = users.get(socket.id);
    if (user) {
      // 🗑️ Remove user from all rooms
      rooms.forEach((room, roomId) => {
        room.users = room.users.filter(u => u.id !== user.id);
        socket.to(roomId).emit('user-left', {
          user,
          message: `${user.emoji} ${user.username} left the chat 👋`
        });
      });
      
      users.delete(socket.id);
    }
    console.log(`🔌 User disconnected: ${socket.id}`);
  });
});

server.listen(PORT, () => {
  console.log(`🚀 Chat server running on port ${PORT}`);
  console.log(`🐳 Containerized chat API is ready! 💬`);
});

# 🐳 Production Dockerfile
FROM node:18-alpine AS builder

WORKDIR /app

# 📦 Copy package files
COPY package*.json ./
COPY tsconfig.json ./

# ⚡ Install dependencies
RUN npm ci

# 📝 Copy source code
COPY src/ ./src/

# 🏗️ Build TypeScript
RUN npm run build

# 🚀 Production stage
FROM node:18-alpine AS production

WORKDIR /app

# 📦 Install production dependencies
COPY package*.json ./
RUN npm ci --only=production && npm cache clean --force

# 📝 Copy built app
COPY --from=builder /app/dist ./dist

# 🔒 Security: non-root user
RUN addgroup -g 1001 -S nodejs && \
    adduser -S nodejs -u 1001

# 🛡️ Change ownership
RUN chown -R nodejs:nodejs /app
USER nodejs

# 🚀 Expose port
EXPOSE 3000

# 🏥 Health check
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
  CMD wget --no-verbose --tries=1 --spider http://localhost:3000/health || exit 1

# 🎮 Start the application
CMD ["node", "dist/server.js"]

# 🎯 docker-compose.yml
version: '3.8'

services:
  chat-api:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - REDIS_URL=redis://redis:6379
      - MONGODB_URL=mongodb://mongo:27017/chatapp
    depends_on:
      - redis
      - mongo
    restart: unless-stopped

  redis:
    image: redis:7-alpine
    command: redis-server --appendonly yes
    volumes:
      - redis_data:/data
    restart: unless-stopped

  mongo:
    image: mongo:6
    environment:
      MONGO_INITDB_DATABASE: chatapp
    volumes:
      - mongo_data:/data/db
    restart: unless-stopped

  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
    depends_on:
      - chat-api
    restart: unless-stopped

volumes:
  redis_data:
  mongo_data:

🎓 Key Takeaways

You’ve learned so much! Here’s what you can now do:

• ✅ Create Docker containers for TypeScript apps with confidence 💪
• ✅ Avoid common mistakes that trip up beginners 🛡️
• ✅ Apply best practices in real projects 🎯
• ✅ Debug containerization issues like a pro 🐛
• ✅ Build production-ready Docker setups! 🚀

Remember: Docker is your deployment superpower! It ensures your TypeScript apps run consistently everywhere. 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered Docker containerization with TypeScript!

Here’s what to do next:

1. 💻 Practice with the chat API exercise above
2. 🏗️ Build a microservices architecture with Docker Compose
3. 📚 Move on to our next tutorial: Kubernetes Container Orchestration
4. 🌟 Share your containerized apps with the community!

Remember: Every DevOps expert was once a beginner. Keep coding, keep containerizing, and most importantly, have fun! 🚀

Happy containerizing! 🎉🐳✨