DEV Community: Obaseki Noruwa

Monitoring for Express.js Applications Using Prometheus and Node Exporter

Obaseki Noruwa — Sun, 08 Jun 2025 00:48:56 +0000

Monitoring isn't just about knowing when things break, it's about understanding how your systems behave under real-world conditions and making data-driven decisions before issues impact users. In this comprehensive guide, I will walk you through building a robust monitoring solution for Express.js applications using the industry standard Prometheus ecosystem.

Why Monitoring Matters More Than You Think

During my journey into DevOps practices, I discovered that monitoring is often treated as an afterthought after CI/CD pipeline deployment. Teams build amazing applications, deploy them to production, and then set up monitoring as a reactive measure. However, I believe that as part of the journey to become a DevOps engineer, after learning containerization, the next critical step should be gaining hands-on experience in setting up monitoring with open-source toolkits for system optimization.

This approach transforms monitoring from a reactive necessity into a proactive strategy that enables better system understanding and performance optimization.

The Monitoring Stack Architecture

I chose the Prometheus ecosystem because it's become the de facto standard for container native monitoring. Here's why this combination works so well:

Prometheus: The Storage for Time-Series Data

Prometheus serves as the storage layer for time-series data, exposing its metrics endpoint at http://localhost:9090/metrics to be scraped by monitoring tools. The time-series database design excels at storing metrics with timestamps, enabling powerful queries and aggregations. When you need to understand how your application performed during last week's traffic spike, Prometheus gives you that historical context.

In your compose.monitoring.yml file, you can configure data retention in the command section by adding --storage.tsdb.retention.time=30d to maintain 30 days of historical data for trend analysis.

Node Exporter: The Metrics Collector

Node Exporter bridges the gap between application metrics and infrastructure health. It collects and exposes hardware statistics—CPU usage, memory consumption, disk I/O, and network activity—in Prometheus format. This integration means you can correlate application slowdowns with system resource constraints, making troubleshooting significantly more effective.

The collector operates by reading system files and translating them into Prometheus-compatible metrics, providing comprehensive visibility into your infrastructure's health.

Grafana: From Data to Insights

Raw metrics are meaningless without proper visualization. Grafana transforms Prometheus data into meaningful dashboards that tell the story of your application's health. The ability to create alerts based on metric thresholds means your monitoring system becomes proactive rather than reactive.

With Grafana's extensive dashboard library, you can leverage pre-built visualizations or create custom dashboards tailored to your specific monitoring needs.

Implementation

1. Repository Setup

# Clone the project repository
git clone https://github.com/noruwa03/express-js-nginx-lb
cd express-js-nginx-lb

2. Application Configuration

# Navigate to application directory
cd app

# Install Node.js dependencies
npm install

3. Environment Configuration

Create a .env file in the app/ directory with the following variables:

# Port
PORT=8080

# Database Configuration for Neon DB or AWS RDS
DB_CONN_LINK=postgresql://username:password@host:port/database

4. Local Development (Optional)

# Start development server with hot reload to test
npm run dev

5. Production Deployment

# Return to project root
cd ..

# Add name to compose.yml
name: monitoring-system

# Change ports of nginx service in compose.yml from 3000:80 to 4000:80, port 3000 will be used by Grafana service
nginx:
   ports:
      - 4000:80
nginx:
   ports:
      - 4000:80

# Add include option for compose.monitoring.yml
include:
  - compose.monitoring.yml

Create `compose.monitoring.yml` file

services:
  node-exporter:
    image: prom/node-exporter
    container_name: node-exporter
    command:
      - --path.procfs=/host/proc
      - --path.rootfs=/rootfs
      - --path.sysfs=/host/sys
      - --collector.filesystem.mount-points-exclude=^/(sys|proc|dev|host|etc|run/user)($|/)
      - --collector.filesystem.fs-types-exclude=^(autofs|binfmt_misc|bpf|cgroup2?|configfs|debugfs|devpts|devtmpfs|fusectl|hugetlbfs|iso9660|mqueue|nsfs|overlay|proc|procfs|pstore|rpc_pipefs|securityfs|selinuxfs|squashfs|sysfs|tracefs)$
    volumes:
      - /proc:/host/proc:ro
      - /sys:/host/sys:ro
      - /:/rootfs:ro
    ports:
      - 9100:9100
    networks:
      - monitoring

  prometheus:
    image: prom/prometheus
    container_name: prometheus
    volumes:
      - ./monitoring/prometheus.yml:/etc/prometheus/prometheus.yml
    ports:
      - 9090:9090
    command:
      - --config.file=/etc/prometheus/prometheus.yml
      # - --storage.tsdb.retention.time=30d
    networks:
      - monitoring
    depends_on:
      - node-exporter

  grafana:
    image: grafana/grafana
    container_name: grafana
    ports: 
      - 3000:3000
    networks:
      - monitoring
    environment:
      - GF_SECURITY_ADMIN_USER=admin
      - GF_SECURITY_ADMIN_PASSWORD=admin
      - GF_SERVER_ROOT_URL=http://localhost:3000/grafana/
      - GF_SERVER_SERVE_FROM_SUB_PATH=true
    volumes:
      - grafana-storage:/var/lib/grafana
    depends_on:
      - prometheus


networks:
  monitoring:
    driver: bridge

volumes:
  grafana-storage:

Add monitoring directory and create monitoring.yml file


global:
  scrape_interval: 15s
  evaluation_interval: 15s

scrape_configs:
  - job_name: node-exporter
    static_configs:
      - targets:
        - node-exporter:9100

  - job_name: prometheus
    static_configs:
      - targets:
        - prometheus:9090

Architecture Overview

Application Structure (Before Monitoring)

express-js-nginx-lb/
├── app/                          # [Unchanged] app source code
├── nginx/                        # [Unchanged] Load balancer config
├── compose.yml                   # [Updated] Core application services
└── README.md

Enhanced Structure (With Monitoring Stack)

express-js-nginx-lb/
├── app/                          # [Updated] .env file added with PORT and DB_CONN_LINK
├── nginx/                        # [Unchanged] Load balancer config
├── monitoring/                   # [New] Monitoring configurations
│   └── prometheus.yml              # Metrics collection rules
├── compose.monitoring.yml        # [New] Monitoring stack services
├── compose.yml                   # [Updated] Core application services
└── README.md

# Launch complete monitoring stack
docker compose up

Accessing Your Monitoring Stack

Once your stack is running, you can access the different components through these endpoints:

Prometheus Query Interface

Access Prometheus at http://localhost:9090/query to explore your metrics and run PromQL queries. The interface allows you to:

Execute queries to retrieve specific metrics
Visualize data trends over time
Monitor the health of your scrape targets

Prometheus Targets Monitoring

Navigate to the targets section at http://localhost:9090/targets to verify that Prometheus is successfully scraping metrics from Node Exporter and other configured endpoints. This view shows the status of each target and helps troubleshoot connectivity issues.

Grafana Dashboard Configuration

Initial Login

Access Grafana at http://localhost:3000 using the default credentials:

Username: admin
Password: admin

These credentials are configured in your Docker Compose file:

environment:
  - GF_SECURITY_ADMIN_USER=admin
  - GF_SECURITY_ADMIN_PASSWORD=admin

Adding Prometheus as a Data Source

Navigate to Configuration → Data Sources
Click "Add data source"
Select Prometheus
Set the URL to http://prometheus:9090 (using Docker service name)
Click "Save & Test" to verify the connection

Importing Pre-built Dashboards

Grafana's community provides excellent pre-built dashboards:

Visit https://grafana.com/grafana/dashboards/
Search for "Node Exporter Full" dashboard
Copy the dashboard ID (1860)
In Grafana, navigate to Dashboards → Import
Paste the ID and click "Load"
Select Prometheus as your data source
Click "Import" to complete the setup

This dashboard provides comprehensive system monitoring including CPU, memory, disk, and network metrics with professional visualizations.

Key Takeaway

The combination of Prometheus, Node Exporter, and Grafana provides a solid foundation that scales from development environments to enterprise production systems. By implementing this stack early in your development process, you build reliability practices into your application lifecycle rather than retrofitting them later.

Future Enhancements

Advanced Monitoring

Implement container-specific monitoring using cAdvisor for granular insights into Docker container resource usage, complementing the current system-level monitoring approach.

Centralized Logging

Integrate OpenTelemetry or Promtail as log collectors, Loki for log aggregation, and enhance Grafana dashboards with log correlation capabilities for comprehensive observability.

Distributed Tracing

Add Jaeger or Zipkin integration to trace request flows through the microservice architecture, Tempo as storage and Grafana for visualization to enable detailed performance analysis and bottleneck identification across service boundaries.

Production Deployment

Implement GitHub Actions CI/CD pipeline for automated testing, building, and deployment to cloud infrastructure (AWS ECS, Google Cloud Run, or Azure Container Instances).

You can find the full project of this article at Github link

Scaling Express.js with Nginx Load Balancing: A Dockerized Approach

Obaseki Noruwa — Fri, 23 May 2025 21:22:01 +0000

Modern web applications need to be scalable, resilient, and maintainable. One of the most effective ways to achieve this is by using Docker to containerize your application and Nginx as a load balancer. In this post, I will walk you through how I built a scalable Express.js backend API, balanced with Nginx and orchestrated using Docker Compose.

Why Load Balancing Matters

Improved performance – by sharing the workload.
Increased availability – through redundancy.
Easier horizontal scaling – as demand grows, you can spin up more containers.

Project Overview

This project demonstrates how to:

Containerize an Express.js API using Docker.
Scale the API across multiple containers.
Use Nginx as a reverse proxy and load balancer more containers.
Implement round-robin request distribution.

Installation

Before you read pass this point please clone the Express.Js project, Or you can develop your own Express.Js backend API and expose the port in the compose.yml file.

Clone the repository:

   git clone https://github.com/noruwa03/express-js-nginx-lb

Navigate to the project directory:

   cd express-js-nginx-lb/app

Install dependencies:

   npm install

Set up environment variables:
Create a .env file inside the app directory with the following variables:

PORT - Port number for the Express.js server
DB_CONN_LINK - PostgreSQL connection string from Neon DB. To create Database and Tables please open the express-test-db.sql file at app/src/db/express-test-db.sql

Start the development server:

   npm run dev

Project Structure

express-js-nginx-lb/
├── app/
│   ├── src/
│   │   ├── controllers/
│   │   │   ├── create-post.ts
│   │   │   ├── delete-post.ts
│   │   │   ├── get-post-by-id.ts
│   │   │   ├── get-posts.ts
│   │   │   └── update-post.ts
│   │   ├── db/
│   │   │   ├── express-test-db.sql
│   │   │   └── index.ts
│   │   ├── middlewares/
│   │   │   └── post-validation.ts
│   │   ├── routes/
│   │   │   └── index.ts
│   │   └── app.ts
│   ├── .dockerignore
│   ├── package-lock.json
│   ├── package.json
│   └── tsconfig.json
├── nginx/
│   └── nginx.conf
├── compose.yml
└── README.md

Key Components

Express.js API

The backend API handles basic CRUD operations for posts, with these endpoints:

GET /post - Retrieve all posts.
GET /post/:id - Get a specific post.
POST /create-post - Create a new post.
PATCH/update-post/:id - Update a post.
DELETE/post/:id - Delete a post.

Docker Configuration: compose.yml

services:
  myapp:
    build: ./app
    deploy:
      replicas: 3
    expose: 
      - 8080
    volumes:
      - ./app/.env:/etc/express_env/.env

  nginx:
    image: nginx:alpine
    ports:
      - 3000:80
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
    depends_on:
      - myapp

If you are developing your own Express.Js backend API, remember to change the port in the expose list

Nginx Configuration: nginx.conf located at nginx directory

events {}

http {
  include mime.types;

  upstream myapp {
    server myapp:8080;
  }

  server {
    listen 80;
    location / {
      proxy_pass http://myapp;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
    }
  }
}

Implementation Details

Docker commands and snapshots is provided below.

docker compose build

docker compose up

docker ps

Container Identification

To verify load balancing was working, I added a /ping endpoint that returns the hostname of the container serving the request:

import os from "os"

app.get("/ping", (_: Request, res: Response): any => {
  return res.status(200).json({
    message: `Served by: ${os.hostname()}`,
  });
});

app.listen(PORT, () => {
  console.log(`Server running at port ${PORT}.....`);
  console.log(`Served by: ${os.hostname()}`);
});

Environment Variable Management

I wanted to securely handle the .env file using secrets and map .env file in a volume to the secrets in the Docker Compose configuration. However, when running docker compose -f compose.yml config for the compose.yml file validation, I encountered an error. I didn't want to copy the .env file directly into the Docker container, so I used Docker volumes to map the app/.env file to the /etc/express_env/.env directory inside the container. This approach keeps sensitive data out of the container image while still making it accessible at runtime.

volumes:
  - ./app/.env:/etc/express_env/.env

Here's how to inspect the environment variables inside a running container:

docker exec -it <container_id> /bin/sh

ls

cd /

cd etc/express_env
ls -a
exit

API Response Snapshot

/api/v1/ - root route

/api/v1/create-post - create post route

/api/v1/post/:id - get post by id

Challenges and Solutions

Environment Variable Security

Challenge: Initially, I wanted to use Docker's secrets but encountered configuration errors.

Solution: Using volumes provided a secure way to inject environment variables at runtime without baking them into the container image.

Load Balancing Verification

Challenge: Confirming that requests were actually being distributed across containers.

Solution: Implementing the /ping endpoint that returns the container hostname provided clear visual confirmation.

Recommendations for Future Improvements

Monitoring and Observability: Implement comprehensive monitoring for the backend API including metrics collection, centralized logging, and distributed tracing
CI/CD Pipeline: Deploy to cloud infrastructure using automated CI/CD pipelines with GitHub Actions
Security Enhancements: Add SSL/TLS termination at the Nginx layer to secure API communications

Networking: The Essential Foundation for DevOps Engineering

Obaseki Noruwa — Wed, 07 May 2025 10:20:30 +0000

Understanding the Networking Basics

Have you ever wondered what truly separates exceptional DevOps engineers from the rest? Networking. Yes, Basic understanding of Networking, it isn't just helpful—it's absolutely essential. In today's interconnected world where microservices, containers, and distributed systems dominate the landscape, a solid understanding of networking principles is required.

Before diving into the technical depths of networking for DevOps, let me share why this knowledge has become non-negotiable in our field, Networking knowledge is crucial in DevOps for several key reasons:

Infrastructure Management: DevOps engineers need to design, deploy, and maintain network architectures that support modern cloud and hybrid applications.
Troubleshooting: When issues arise in complex systems, understanding network connectivity, protocols, and routing is essential for rapid diagnosis and resolution.
Security Implementation: DevOps professionals must implement proper network security controls, including firewalls, VPNs, and proper subnet isolation.
CI/CD Pipeline Configuration: Ensuring your build and deployment pipelines have proper network connectivity and security.

Before diving into DevOps-specific networking, I have found that mastering the fundamentals is crucial. Let me explain the key components and concepts I have come to understand:

Core Hardware Components:

Hubs: Hardware networking devices that transmit data to all devices connected to them, regardless of the intended recipient
Switches: Intelligent networking devices that transmit data to specific devices using MAC addresses, making them more efficient than hubs
Adapters: Used for connecting devices to a network, converting data between the device and the network
Ethernet: The most standard method of wired data transfer in local networks
Media - Cable or WAP: Data transferred through physical cables or wireless medium (Wireless Access Point - a device that allows other devices to connect using WiFi; Wireless Fidelity)

Essential Networking Concepts:

Data: Information transmitted across networks that enables usage by various applications and services
Nodes: End devices in a network, such as computers, servers, printers, etc.
Frames: Data packets that exist on the data link layer of the OSI model, containing addressing and error-checking information
Client: A computer, device, or software that requests resources from a server
Server: A computer or device that provides resources to clients
Peer: A device that acts as either a client or server, sharing resources without a centralized server (common in P2P networks)
IP Addresses: Unique numerical identifiers assigned to devices on a network (explained further below)
MAC Addresses: Hardware-based addresses permanently assigned to network interfaces (detailed later)
Firewalls: Sets of rules that secure and monitor incoming and outgoing traffic on a device or network
Intranet: An internal network where devices within an organization have access to shared resources
Extranet: A controlled network that allows authorized external users to access an organization's internal network

With these fundamentals in mind, I have identified eight key networking concepts that every DevOps Engineer should thoroughly understand:

The Eight Critical Networking Pillars for DevOps

1. Open System Interconnection (OSI) Models

I have learned that the OSI model explains how computers communicate through seven distinct layers:

Physical Layer: Transmits raw bit streams through physical media like hubs, switches, adapters, Ethernet, and cables
Data Link Layer: Manages packet transmission between network devices using frames that contain paths, source/destination information via MAC addresses, payload data, and error-checking information
Network Layer: Determines the optimal path for data to follow
Transport Layer: Handles data transmission using protocols like TCP and UDP
Session Layer: Maintains connections between devices, handling authentication and permissions
Presentation Layer: Prepares data in a format applications can use
Application Layer: Enables data usage by various applications and services

2. Protocols: The Language of Networks

Protocols are essential rule sets that govern network communication. Protocols types below:

TCP (Transmission Control Protocol): Establishes a reliable connection with the destination device before sending data, ensuring everything arrives correctly. This is the foundation for most web applications.

UDP (User Datagram Protocol): This is a connectionless protocol, it follows a "fire and forget" approach. While less reliable than TCP, it offers lower latency—perfect for applications like gaming and streaming services (Netflix, Twitch).

IP (Internet Protocol): Assigns unique addresses to devices, enabling internet connectivity. Understanding both IPv4 (32-bit, four decimal format separated by periods) and IPv6 (128-bit, hexadecimal format separated by colons) has been crucial in my work.

3. Ports: The Doorways for Application Communication

Ports function as communication endpoints that allow devices to send and receive data across various services. If you are reading this article, have you ever wondered why we can spin up multiple ports of frontend, backend, databases all at once? Say we have five React.js frontend projects on our local machine and we run the dev script from package.json 'npm run dev' - the first port will be localhost:3000, second will be localhost:3001, ... to localhost:3004. Here we have ports 3000, 3001, 3002, 3003, 3004 sending and receiving data in our system seamlessly. And then if we want to spin up a backend project with port 3000, it will give an error of 'Port in use' and then probably use a port available will be used or you as a user will assign it an unused port, say 3005.

Some critical standard ports include:

FTP: File Transfer Protocol - 20, SFTP - Secure File Transfer Protocol 21 (for secure file transfers)
SSH: Secure Shell - 22 (for secure remote access)
SMTP: Simple Mail Transfer Protocol - 25 (for email transmission)
DNS: Domain Name Systems - 53 (AWS named their service Route 53 for this reason, i think 😄)
HTTP: Hyper Text Transfer Protocol - 80 (standard web traffic)
HTTPS: Hyper Text Transfer Protocol Secure - 443 (secure web traffic)

4. Routers: The Traffic Directors

Routers connect network devices and manage data transmission between them. They perform routing operations using routing tables—specialized databases stored in the router that contain paths, source/destination information, and optimal data travel routes.

5. Domain Name Systems (DNS): Making the Internet Human-Friendly

DNS translates human-readable domain names (like google.com) into machine-readable IP addresses. As humans, we can't easily remember complex IP formats like 192.168.1.1 (IPv4) or 2001:0db8:85a3:0000:0000:8a2e:0370:7334 (IPv6), making DNS essential for usability.

DNS offers additional benefits like caching (faster response times) and request redirection. A deep understanding of DNS system record types is required for a DevOps Engineer: A, AAAA, CName, DName, NS, MX records:

A Record: Maps a domain name to an IPv4 address
AAAA Record: Maps a domain name to an IPv6 address
CNAME Record: Creates an alias from one domain to another, e.g myweb.com will redirect to web.com.
DNAME Record: Redirects all subdomains of one domain to another domain
NS Record: Specifies the authoritative nameservers for a domain
MX Record: Directs email to the appropriate mail servers

6. Subnetting: Organizing IP Space Efficiently

I have learned that subnetting divides larger IP address blocks into smaller, more manageable segments. This practice improves network organization, security, and performance—all critical aspects of DevOps infrastructure management.

7. Virtual Private Networks (VPNs): Securing Connections

VPNs create secure tunnels for internet connections, encrypting data as it travels through servers. This technology is crucial in DevOps Engineering, for instance a work with teams distribute globally and require secure access to sensitive resources.

8. Essential Networking Tools

The diagnostic tools I rely on daily include:

ipconfig (Windows) and ifconfig (Linux) for viewing network interface configurations
netstat for examining network connections and routing tables
ping for testing basic connectivity
curl for transferring data with URLs
nslookup for querying DNS servers

Putting It All Together

Understanding these networking concepts hasn't just expanded my knowledge—it's transformed how I approach DevOps engineering. Each component interconnects with others to create the foundation upon which our modern cloud infrastructure runs.

My Understanding of DevOps Engineering

Obaseki Noruwa — Fri, 02 May 2025 14:35:15 +0000

What is DevOps?

DevOps, as the name suggests, combines Development and Operations into a unified approach. A DevOps Engineer orchestrates the entire journey of an application: planning, coding, building, testing, releasing, deploying, and monitoring. This comprehensive process ensures applications work seamlessly for end-users and integrate properly with other services.

I see DevOps Engineers as master planners who understand the complete Software Development Life Cycle (SDLC). Success in this role requires both technical expertise and strong communication skills. Communication becomes crucial especially when coordinating across different teams – from developers to stakeholders.

The DevOps Lifecycle

Planning

Planning begins with constructive thinking about the development and production environments where code will be built. For example, imagine a client named Alex who needs a web-based analytical platform for Business Intelligence. The DevOps Engineer would need to carefully consider all technical components.

Drawing on development knowledge, the engineer would select appropriate libraries and services for Alex's project specific needs. This means evaluating both private and open-source packages, and choosing between established cloud platforms like AWS, Azure, GCP, DigitalOcean, Linode, and Oracle.

After this critical thinking phase, development can move forward confidently. For Alex's theoretical project, React.js might be ideal for the frontend (a robust and popular library), FastAPI for the backend (which offers flexibility as an unopinionated framework), along with essential services including storage, databases, compute resources, networking, and Content Delivery Network (CDN) capabilities. This thorough planning establishes the foundation for the entire SDLC.

Coding

During the coding stage, development teams work collaboratively to create the components that form the business logic of the application. This typically involves frontend developers, backend developers, and database administrators working in concert. Additional team members often include project managers, data analysts, and data scientists who provide specialized expertise.

The DevOps Engineer's role during this phase involves ensuring these diverse teams can work efficiently within well-structured environments.

Building, Testing, Releasing, and Deploying

These phases represent the core of the SDLC, where source code is transformed through validation and formatting into a production-ready application that serves end-users. This process, known as the CI/CD Pipeline (Continuous Integration/Continuous Delivery or Deployment), is where significant automation occurs.

By automating the software development workflow, DevOps makes development less stressful and reduces complexity for the entire team. During this process, testing protocols identify potential issues before they reach production, significantly improving code quality.

Various CI/CD tools can be utilized depending on project requirements. These include GitHub Actions, GitLab, BitBucket, Jenkins, CircleCI, and ArgoCD. Major cloud platforms also offer their own solutions like AWS Pipeline and Azure Pipeline. Some platforms, such as GitLab and BitBucket, provide built-in CI/CD capabilities that streamline the process by reducing integration complexity.

The Mechanics of CI/CD

Continuous Integration involves merging all code committed to a shared repository (like GitHub or GitLab). Each time a developer commits or merges code, automated tests verify its quality. This Continuous Testing approach includes four critical testing types:

Unit Testing – Verifies individual code units and methods function as expected. For frontend code, tools like Jest or Mocha test specific components within the source repository.
Integration Testing – Confirms that modules, services, and components work together correctly. This testing ensures different parts of the application communicate and function cohesively.
Regression Testing – When a build test fails (whether unit or integration), regression testing determines if errors from previous builds persist. This prevents old bugs from reappearing.
Code Quality Testing – Evaluates code against established standards. For example, if a junior developer uses 'var' instead of 'const' for a scoped variable, tools like SonarQube or Qodana can automatically flag this issue without requiring senior developers to manually review every line of code, Checkout thectoclub for other code quality tools.

The final stage of the CI/CD Pipeline is Continuous Deployment/Delivery (CD). At this point, successful builds are published to an Artifact registry (Docker Hub, Nexus, AWS ECS - Elastic Container Service), Testing environment, or Production environment. This constitutes the actual application release that users will experience.

During this phase, Infrastructure Provisioning is implemented using tools like Terraform or Pulumi. This creates and configures the precise environment and services needed to run the application efficiently. This infrastructure-as-code (IaC) approach allows for upgrading resources or removing unused services as required.

Monitoring

Continuous monitoring of both the production environment and application is essential to DevOps practice. This vigilance helps detect anomalies and analyze traffic patterns before they impact users.

The consequences of inadequate monitoring can be severe: service downtime, customer loss, and unexpectedly high cloud infrastructure costs. To prevent these issues, specialized tools simplify the monitoring process like CloudWatch service from AWS.

Prometheus collects critical metrics like CPU and memory usage, while Grafana transforms this data into intuitive visualizations. Combining these tools creates a powerful system for tracking application resource usage. For more detailed analysis, the Elastic Logstash Kibana (ELK) stack provides comprehensive metrics with advanced search capabilities. Kibana serves as the visualization layer for this rich data.

The DevOps Impact

Through my understanding of these DevOps practices, I can see how proper planning, automation, and monitoring can transform application development and deployment. This systematic approach not only improves technical operations but also delivers tangible business benefits through faster, more reliable software delivery.

What aspects of DevOps do you find most valuable in your work? I would love to connect with fellow professionals interested in this field!

Animated Hamburger Menu with Tailwindcss

Obaseki Noruwa — Sun, 02 Apr 2023 12:43:30 +0000

Most developer use svg hamburger menu icon when developing hamburger menu for their frontend web project, in this post i will show you how to build hamburger menu with animation in tailwindcss.

We are to create three horizontal line stacked vertically, to resemble an hamburger. Below is a graphical representation of the hamburger menu with animation.

CSS
Create two div tags, one outer and the other inner div. we focus on the inner div tag by giving a width of 4rems w-16, height h-2, background-color bg-black and border-radius rounded-full.

The next step will be to create the div pseudo-elements (&::before, &::after).

To create the div ::before pseudo-element, we write the following tailwindcss utility classes before:content-[‘’], before:absolute, before:w-16, before:h-2, before:bg-black, before:rounded-full, before:-translate-y-4.

For the ::after pseudo element, we copy the code from the ::before pseudo element above, but this time we remove the negative sign from the start of the translate-y-4 tailwindcss utility class: We replace before:-translate-y-4 with after:translate-y-4.

JavaScript
We add an id to our outer div to enable us have a mouseEvent (click) and have a reference to the outer div.

We add the following tailwindcss utility class to be applied to the hamburger-toggle class: [&>div]:h-0 [&>div]:bg-white [&>div::before]:before:translate-y-0 [&>div::before]:before:rotate-45 [&>div::before]:after:translate-y-0 [&>div::before]:after:-rotate-45

Finally, we add some transition properties to the div and div pseudo-elements (&::before, &::after) for smooth animation, transition-all duration-150, before:transition-all before:duration-150, after:transition-all after:duration-150.

I hope this tutorial helped you understand how to create an hamburger menu with tailwindcss. If you do not understand the concept and the utility classes of tailwindcss, please visit tailwindcss website for better understanding and best practices when using the css framework.

Here is the link to the hamburger menu code on stackblitz: click me

Folder Structure for Modern Web Applications

Obaseki Noruwa — Sat, 01 Apr 2023 15:52:01 +0000

It is critical to create a maintainable folder structure while developing web apps, having the right files in the correct folder helps organize your code and makes other developers have an idea of how the architecture of your web application is or will be during development. In this post, I am going to explain some folder names when building your modern web project.

Maintaining a well-organized folder structure is crucial when developing web applications, even though it may not be the first thing that comes to mind when working alone or with few resources. If not, you run the risk of coming across as unprofessional.

Some Tips In Designing Your Folder Structure

Understand the purpose of your web project: In order to figure out how to organize your web project, you will need to establish a good understanding of what you have, depending on how many assets you are trying to organize and the features in your web applications.
Use proper naming convention for your folders and files, they should be descriptive of the purpose in your web application.

Folder Structures and their explanation

Assets
The assets folder contains all images, icons, css files, font files, etc. that will be used in your web application. Custom images, icons, paid fonts are being placed inside this folder.

Context
When using React Js as your preferred frontend ui library, the context folder stores all your react context files that are used across components and multiple pages.

Components
The components folder holds the UI for your application. It contains all our UI components like navbar, footer, buttons, modals, cards, etc.

Composables
In the context of Vue applications, a "composable" is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic.

Data
The data folder is used for storing text data which will be used in different sections and pages as JSON files. Doing this will enable updating of information easier.

Features
This folder contains individual folder feature for each page (authentication, theme, modals). For example each page might have a modal feature.

Hooks
Hooks are functions that let you “hook into” React state and lifecycle features from function components. Also we can create custom hooks whose name starts with 'use' and can be used to call other hooks.

Layouts
When defining the general look and feel of the web page, the Layouts folder comes in handy. It is used to place layout-based components such as the sidebar, navbar, and footer. If your web application has many layouts, this folder is a fantastic place to save them.

Modules
Modules folder handles specific tasks in your application.

Pages
The pages directory contains your web application views. Pages directory in frontend frameworks like Next Js and Nuxt Js reads all files inside the directory and automatically creates the router configuration for you.

Public
The public directory is directly served at the server root and contains public files that won't change e.g favicon.ico.

Routes
The routes folder is just a place in your web application to store the routes path to different screens.

Utility/Utils
This folder is for storing all utility functions, such as auth, theme, handleApiError, etc.

Views
Views folder are like the pages folder, The views are used to represent your pages properly, that users can navigate back and forth.

Conclusion

A good folder structure allows you and other developers to find files faster and manage them more easily. A well-organized folder structure makes you appear professional.

Understanding Errors In JavaScript: Error Objects

Obaseki Noruwa — Wed, 22 Mar 2023 11:13:18 +0000

When executing JavaScript code, different errors can occur, understanding errors in javascript cannot be overstated. Errors can occur due to wrong input, and other unforeseeable things. Error objects are in-built in javascript to enable coders/programmers know and understand their errors for easier debugging where necessary.

What are Error Objects
An error object provides error information when an error occurs. Error object has a collection of properties: name, message, file name, line number. These properties helps us have a better understanding of the problem.

In the image above, SyntaxError is the error name, Invalid or unexpected token is the error description. At the right hand side we have the file name and line number.

Understanding error object properties helps you understand the problem faster for easier debugging. Below are some errors you will likely run into while executing javascript code.

EvalError: This occurs when the eval() inbuilt function is used in a way that is not allowed.

An Error object; EvalError is thrown in the try block. The error is caught in the catch block and its stack trace is logged to the console using our ultimate debugger method (console.log). The output is produced with the name, description, file name and line number.

ReferenceError: This occurs when referencing a variable that does not exist or has not yet been initialized in the current scope.

In the above example, the variable fulname does not exist. Fixing an error like this, is to cross check the spellings and analyze the code.

TypeError: This error occurs when a variable or parameter is not of a valid type or is not of the expected data type.

RangeError: An RangeError is thrown when a numeric variable or parameter is outside its valid range.

URIError: A URIError error object is thrown if you use illegal characters in a URI function, The error occurs due to the use of an invalid character in encoding the url.

Conclusion
When you understand the concepts of error objects, debugging and fixing your error will be simple and this will spare you from spending hours online looking for solutions.