Sign inSign up

dheeraj5559/chat-app

By dheeraj5559

Updated about 1 year ago

Real-time chat app with MERN , Redis, socket.io, and monitoring via Grafana & Prometheus

Image
0

256

dheeraj5559/chat-app repository overview

Real-Time Chat App

A full-stack real-time chat application with built-in monitoring.


Project Description

This is a full-stack real-time chat application built with Node.js, Express, Socket.IO, and React.js. It allows users to exchange messages instantly, see online/offline statuses, and manage their conversations with a responsive and modern UI.

The backend supports MongoDB for persistent data storage and Redis for real-time features like session handling and caching. The app is also fully Dockerized, making it easy to deploy and run in any environment.

To ensure observability and performance insights, the app integrates Prometheus, Grafana, Loki, and Promtail for monitoring metrics and logs.


Tech Stack

  • Backend: Node.js + Express + Socket.IO
  • Frontend: React.js + Tailwind CSS + Daisyui
  • Databases & Caching: MongoDB + Redis
  • Monitoring: Prometheus + Grafana + Loki

Quick Start with Docker Compose

To get started quickly, create a docker-compose.yml file

version: "3.8"

services:
  app:
    image: dheeraj5559/chat-app:latest
    container_name: chat-app
    ports:
      - "1080:1080"
    environment:
      - NODE_ENV=development
      - PORT=1080
      - MONGO_DB_URI=mongodb://mongo:27017/chat-app
      - REDIS_HOST=redis
      - REDIS_PORT=6379
      - JWT_SECRET=<add a jwt token>
      - REACT_APP_SOCKET_SERVER_LOCAL=http://localhost:1080
    depends_on:
      - mongo
      - redis
    volumes:
      - ./logs:/app/logs
    networks:
      - app-network

  mongo:
    image: mongo:6
    container_name: mongo
    ports:
      - "27017:27017"
    volumes:
      - mongo-data:/data/db
    networks:
      - app-network
  redis:
    image: redis:7
    container_name: redis
    ports:
      - "6379:6379"
    volumes:
      - redis-data:/data
    networks:
      - app-network

volumes:
  mongo-data:
  redis-data:

networks:
  app-network:
    driver: bridge

Run this command in your terminal to create containers

docker compose up -d

Monitoring Setup


To enable monitoring and observability for your app, you can include the following services in your docker-compose.yml:

  • Prometheus scrapes metrics from the app and other targets.

  • Loki stores logs sent by Promtail.

  • Promtail collects logs from your application container.

  • Grafana visualizes metrics and logs from Prometheus and Loki.


Add the following services to your docker-compose.yml:

  prometheus:
    image: prom/prometheus
    container_name: prometheus
    volumes:
      - ./prometheus-config.yml:/etc/prometheus/prometheus.yml
    ports:
      - "9090:9090"
    networks:
      - app-network

  loki:
    image: grafana/loki:2.9.4
    container_name: loki
    ports:
      - "3100:3100"
    volumes:
      - ./loki-data:/loki
    networks:
      - app-network

  promtail:
    image: grafana/promtail:2.9.4
    container_name: promtail
    volumes:
      - ./logs:/var/log/app
      - ./promtail-config.yml:/etc/promtail/config.yml
    command: -config.file=/etc/promtail/config.yml
    depends_on:
      - loki
    networks:
      - app-network

  grafana:
    image: grafana/grafana-oss
    container_name: grafana
    ports:
      - "3000:3000"
    volumes:
      - grafana-storage:/var/lib/grafana
    networks:
      - app-network

volumes:
  grafana-storage:

Required Configuration Files

Save these config files at the project root:

-prometheus-config.yml File

global:
  scrape_interval: 4s

scrape_configs:
  - job_name: prometheus
    static_configs:
      - targets: ["<ip address>:1080"]

-promtail-config.yml File

server:
  http_listen_port: 9080
  grpc_listen_port: 0

positions:
  filename: /tmp/positions.yaml

clients:
  - url: http://loki:3100/loki/api/v1/push

scrape_configs:
  - job_name: express-logs
    static_configs:
      - targets: ['localhost']
        labels:
          job: chat-app
          __path__: /app/logs/*.log
    pipeline_stages:
      - json:
          expressions:
            level: level
            message: message
            timestamp: timestamp
      - labels:
          level:

Access the App


Grafana Setup (First Time)


  • Default credentials:

    • Username: admin
    • Password: admin
  • Add Loki as a data source:

    • URL: http://<ip address>:3100
  • Add Prometheus as a data source:

    • URL: http://<ip address>:9090
  • Next steps:

    • Create dashboards
    • Or import ready-made ones from Grafana's dashboard library

Note

  • All logs from the Express app (via Winston logger) are saved inside the ./logs directory.
  • These logs are collected by Promtail and forwarded to Loki, where they are visualized in Grafana.
  • Prometheus scrapes metrics from the app (http://localhost:1080/metrics).
  • Make sure the logs/ directory exists at the project root. It will be auto-created by the app if not present.

Tag summary

Content type

Image

Digest

sha256:91c7deaed

Size

73.9 MB

Last updated

about 1 year ago

docker pull dheeraj5559/chat-app