DEV Community: Mayank Tamrkar

What is nginx ?

Mayank Tamrkar — Thu, 19 Feb 2026 17:24:13 +0000

NGINX (pronounced "engine-x") is a high-performance, open-source web server, reverse proxy, load balancer, and HTTP cache.

It was built to solve the C10K problem — handling 10,000+ simultaneous connections on a single server. Unlike Apache (which spawns a new thread per connection), NGINX uses an event-driven, non-blocking architecture, so a single worker process can handle thousands of connections at once with minimal memory.

Traditional Server (Apache)          NGINX Event-Driven Model
─────────────────────────────        ─────────────────────────────
Request 1 → Thread 1 (blocked)       Single Worker
Request 2 → Thread 2 (blocked)         ├── Handle Req 1 → async I/O
Request 3 → Thread 3 (blocked)         ├── Handle Req 2 → async I/O
...10,000 req = 10,000 threads         ├── Handle Req 3 → async I/O
RAM exhausted                          └── 10,000 connections ✓

Why Do We Need NGINX?

Running a Node.js or any backend app directly on port 80/443 is not safe or scalable. Here is what NGINX solves:

Problem	Without NGINX	With NGINX
HTTPS/SSL	Complex in app code	NGINX handles it
Multiple apps on one server	Port conflicts	Route by domain/path
Static file serving	Node.js serves every file	NGINX serves directly (10x faster)
Load balancing	Single instance	Distribute across many
Rate limiting	App-level logic	Built into NGINX
Security headers	Manual in app	One place in NGINX config
Crash recovery	App dies, site is down	NGINX buffers while app restarts

Real-world flow:

Browser
  │
  ▼
NGINX :443  ──── serves static files directly
  │
  └──► Node.js :3000  (only handles API / app logic)

Installation on Linux

Ubuntu / Debian

# Update packages
sudo apt update

# Install NGINX
sudo apt install nginx -y

# Start the service
sudo systemctl start nginx

# Enable auto-start on boot
sudo systemctl enable nginx

# Allow HTTP and HTTPS through firewall
sudo ufw allow "Nginx Full"

# Verify — open http://your-server-ip in browser

Amazon Linux 2 (EC2)

sudo yum update -y
sudo amazon-linux-extras install nginx1 -y
sudo systemctl start nginx
sudo systemctl enable nginx

Amazon Linux 2023

sudo dnf install nginx -y
sudo systemctl start nginx
sudo systemctl enable nginx

CentOS / RHEL

sudo yum install epel-release -y
sudo yum install nginx -y
sudo systemctl start nginx
sudo systemctl enable nginx

Essential Commands

# ── Service Control ──────────────────────────────────────
sudo systemctl start nginx        # Start
sudo systemctl stop nginx         # Stop
sudo systemctl restart nginx      # Restart (brief downtime)
sudo systemctl reload nginx       # Reload config (zero downtime) ✓ preferred
sudo systemctl status nginx       # Check if running
sudo systemctl enable nginx       # Auto-start on boot

# ── Config Testing ───────────────────────────────────────
sudo nginx -t                     # Test config for errors (always run before reload)
sudo nginx -T                     # Test + print full resulting config

# ── Safe Reload Pattern (use this every time) ────────────
sudo nginx -t && sudo systemctl reload nginx

# ── Logs ─────────────────────────────────────────────────
sudo tail -f /var/log/nginx/access.log   # Live access log
sudo tail -f /var/log/nginx/error.log    # Live error log

# ── Info ─────────────────────────────────────────────────
nginx -v          # NGINX version
nginx -V          # Version + build flags + modules
ps aux | grep nginx   # See master and worker processes

Rule of thumb: Always run sudo nginx -t before reloading. A config error will crash NGINX if you restart without testing.

File Structure

/etc/nginx/
├── nginx.conf                  ← Main config file (global settings)
├── conf.d/                     ← Drop-in configs (auto-loaded, *.conf)
│   └── default.conf
├── sites-available/            ← All virtual host configs (inactive)
│   ├── myapp.com
│   └── api.myapp.com
├── sites-enabled/              ← Symlinks to active configs
│   └── myapp.com  →  ../sites-available/myapp.com
├── snippets/                   ← Reusable config fragments
│   └── ssl-params.conf
├── mime.types                  ← File extension → Content-Type mapping
├── fastcgi_params              ← FastCGI defaults (PHP)
└── proxy_params                ← Proxy header defaults

/var/log/nginx/
├── access.log                  ← Every request logged here
└── error.log                   ← Errors and warnings

/var/www/html/                  ← Default web root

sites-available vs sites-enabled

# Enable a site (create symlink)
sudo ln -s /etc/nginx/sites-available/myapp.com /etc/nginx/sites-enabled/

# Disable a site (remove symlink — source file stays safe)
sudo rm /etc/nginx/sites-enabled/myapp.com

# Reload to apply
sudo nginx -t && sudo systemctl reload nginx

nginx.conf — Core Structure

user www-data;
worker_processes auto;          # One per CPU core

events {
    worker_connections 1024;    # Max connections per worker
}

http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    sendfile on;
    keepalive_timeout 65;
    gzip on;

    # Load all configs from these directories
    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;
}

Basic Configuration Guide

Every NGINX config is built from two core blocks:

server block

Defines how to handle a domain or IP + port.

server {
    listen 80;                              # Port
    server_name example.com www.example.com;  # Domain(s)

    root /var/www/example;                  # Files directory
    index index.html;

    # ... location blocks go here
}

location block

Matches URL paths and defines what to do.

# Exact match — only /health
location = /health {
    return 200 "OK";
}

# Prefix match — /api and anything starting with /api
location /api/ {
    proxy_pass http://localhost:3000;
}

# Regex match — .jpg .png .css .js files
location ~* \.(jpg|png|css|js|ico|woff2)$ {
    expires 30d;
}

# Catch-all — everything else
location / {
    try_files $uri $uri/ /index.html;
}

Location Priority (highest to lowest)

Priority	Syntax	Behavior
1st	`= /exact`	Exact match, stops immediately
2nd	`^~ /prefix`	Best prefix, skips regex check
3rd	`~ pattern`	Regex (case-sensitive)
3rd	`~* pattern`	Regex (case-insensitive)
4th	`/prefix`	General prefix match

React App Configuration

A React app builds to static HTML/CSS/JS files. NGINX serves them directly — no Node.js needed for the frontend.

# Build your React app first
npm run build
# This creates a /dist or /build folder

# Copy to web root
sudo mkdir -p /var/www/myapp
sudo cp -r dist/* /var/www/myapp/
sudo chown -R www-data:www-data /var/www/myapp

# /etc/nginx/sites-available/myapp.com

server {
    listen 80;
    server_name myapp.com www.myapp.com;

    root /var/www/myapp;
    index index.html;

    # Gzip compression
    gzip on;
    gzip_types text/html text/css application/javascript application/json;

    # React Router — all routes serve index.html (SPA fallback)
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Cache static assets aggressively
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2|woff|ttf)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
    }

    # Never cache the HTML entry point
    location = /index.html {
        add_header Cache-Control "no-cache, no-store, must-revalidate";
    }
}

Why try_files $uri $uri/ /index.html?
React Router handles routing client-side. When someone refreshes /dashboard, the browser asks NGINX for that file — which doesn't exist on disk. The fallback to index.html lets React Router take over.

Node.js App Configuration

Node.js runs on a local port. NGINX sits in front and proxies traffic to it.

# /etc/nginx/sites-available/api.myapp.com

server {
    listen 80;
    server_name api.myapp.com;

    # Increase upload size limit if needed
    client_max_body_size 50M;

    location / {
        proxy_pass http://localhost:3000;    # Your Node.js port

        # Required headers
        proxy_http_version 1.1;
        proxy_set_header Host              $host;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # WebSocket support (Socket.io, ws)
        proxy_set_header Upgrade    $http_upgrade;
        proxy_set_header Connection "upgrade";

        # Timeouts
        proxy_connect_timeout 60s;
        proxy_send_timeout    60s;
        proxy_read_timeout    60s;
    }
}

In your Express.js app, add this so req.ip returns the real client IP:

app.set('trust proxy', 1);

Why These Headers Matter

Header	Value	Purpose
`Host`	`$host`	Backend sees correct domain, not `localhost`
`X-Real-IP`	`$remote_addr`	Backend gets real client IP
`X-Forwarded-For`	`$proxy_add_x_forwarded_for`	Full IP chain through proxies
`X-Forwarded-Proto`	`$scheme`	Backend knows if client used `http` or `https`

SSL / HTTPS Setup

Option 1 — Let's Encrypt (Free, Recommended)

# Install Certbot
sudo apt install certbot python3-certbot-nginx -y

# Get certificate — Certbot auto-edits your NGINX config
sudo certbot --nginx -d myapp.com -d www.myapp.com

# Test auto-renewal
sudo certbot renew --dry-run

Certbot adds SSL to your config automatically. Your site is now on HTTPS.

Option 2 — Manual SSL Configuration

# /etc/nginx/sites-available/myapp.com

# Redirect all HTTP → HTTPS
server {
    listen 80;
    server_name myapp.com www.myapp.com;
    return 301 https://$host$request_uri;
}

# Main HTTPS server
server {
    listen 443 ssl http2;
    server_name myapp.com www.myapp.com;

    # Certificate files
    ssl_certificate     /etc/letsencrypt/live/myapp.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/myapp.com/privkey.pem;

    # Modern TLS only
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers off;

    # SSL session cache (performance)
    ssl_session_cache   shared:SSL:10m;
    ssl_session_timeout 1d;

    # HSTS — tell browsers to always use HTTPS
    add_header Strict-Transport-Security "max-age=63072000; includeSubDomains" always;

    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host              $host;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
    }
}

Use listen 443 ssl http2 — HTTP/2 allows multiplexing (multiple requests over one connection), which noticeably improves performance for sites with many assets.

Reverse Proxy

A reverse proxy sits on the server side. The client sends requests to the proxy, and the proxy decides which backend server handles it. The client has no idea which backend it's talking to.
Client → [NGINX Reverse Proxy] → Backend Server 1
│
└──────────► Backend Server 2
│
└──────────► Backend Server 3

The client only ever talks to NGINX.
It has no idea those backend servers even exist.
The word "reverse" simply means — instead of the proxy being on the client side, it's on the server side.

Client ──► NGINX :443 ──► Node.js :3000
           (public)        (localhost only, never exposed)

server {
    listen 80;
    server_name myapp.com;

    location / {
        proxy_pass http://localhost:3000;

        proxy_http_version 1.1;
        proxy_set_header Host              $host;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # WebSocket support
        proxy_set_header Upgrade    $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    # Serve static files directly — bypass Node.js entirely
    location /static/ {
        alias /var/www/myapp/public/;
        expires 30d;
        access_log off;
    }
}

Proxy to a Different Path

# Request:  GET /api/users
# Backend receives: GET /users  (strips the /api prefix)
location /api/ {
    proxy_pass http://localhost:3000/;   # trailing slash strips /api/
}

# Request:  GET /api/users
# Backend receives: GET /api/users  (full path preserved)
location /api/ {
    proxy_pass http://localhost:3000;    # no trailing slash
}

Upstream & Load Balancing

upstream block

The upstream block defines a named group of backend servers. You reference it in proxy_pass.

upstream my_backend {
    server 127.0.0.1:3000;
    server 127.0.0.1:3001;
    server 127.0.0.1:3002;
}

server {
    listen 80;
    server_name myapp.com;

    location / {
        proxy_pass http://my_backend;   # ← reference by name
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Load Balancing Algorithms

Round Robin (default) — requests distributed evenly in sequence

upstream backend {
    server 10.0.0.1:3000;
    server 10.0.0.2:3000;
    server 10.0.0.3:3000;
}

Weighted Round Robin — one server gets more traffic

upstream backend {
    server 10.0.0.1:3000 weight=3;   # gets 3x more requests
    server 10.0.0.2:3000 weight=1;
}

Least Connections — new request goes to server with fewest active connections

upstream backend {
    least_conn;
    server 10.0.0.1:3000;
    server 10.0.0.2:3000;
}

IP Hash — same client IP always goes to the same server (sticky sessions)

upstream backend {
    ip_hash;
    server 10.0.0.1:3000;
    server 10.0.0.2:3000;
}

Failover Configuration

upstream backend {
    server 10.0.0.1:3000 weight=1 max_fails=3 fail_timeout=30s;
    server 10.0.0.2:3000 weight=1 max_fails=3 fail_timeout=30s;

    # Backup — only used when all primary servers are down
    server 10.0.0.3:3000 backup;

    # Keep connections to backend warm (performance)
    keepalive 32;
}

Parameter	Meaning
`weight=3`	Gets 3× more traffic than `weight=1`
`max_fails=3`	Mark as down after 3 consecutive failures
`fail_timeout=30s`	How long to mark it as down before retrying
`backup`	Only used when all other servers are unavailable
`down`	Permanently offline (for maintenance)

Multiple Apps on the Same Machine

One server, one IP — multiple apps. NGINX routes traffic based on domain name or URL path.

Internet
  │
  ▼
NGINX (port 80 / 443)  — one entry point
  │
  ├──► myapp.com          → React frontend  (/var/www/myapp)
  ├──► api.myapp.com      → Node.js :3000
  └──► admin.myapp.com    → Node.js :4000

Method 1: Subdomain-Based Routing

Each subdomain gets its own server block. DNS must point all subdomains to the same server IP.

# /etc/nginx/sites-available/frontend
server {
    listen 80;
    server_name myapp.com www.myapp.com;

    root /var/www/frontend;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

# /etc/nginx/sites-available/api
server {
    listen 80;
    server_name api.myapp.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

# /etc/nginx/sites-available/admin
server {
    listen 80;
    server_name admin.myapp.com;

    # Restrict to internal IPs only
    allow 10.0.0.0/8;
    allow 192.168.0.0/16;
    deny all;

    location / {
        proxy_pass http://localhost:4000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Enable all three:

sudo ln -s /etc/nginx/sites-available/frontend /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/api      /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/admin    /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx

Method 2: Path-Based Routing (Single Domain)

All traffic comes through one domain, routed by URL path.

# /etc/nginx/sites-available/myapp.com

server {
    listen 80;
    server_name myapp.com;

    # React frontend — serve static files
    location / {
        root /var/www/frontend;
        try_files $uri $uri/ /index.html;
    }

    # Node.js API
    location /api/ {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Admin panel (different app)
    location /admin/ {
        proxy_pass http://localhost:4000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # Static assets
    location /assets/ {
        alias /var/www/static/;
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
    }
}

Full Example: React + Node.js on Same Server with SSL

# Redirect HTTP → HTTPS
server {
    listen 80;
    server_name myapp.com www.myapp.com;
    return 301 https://$host$request_uri;
}

# Main HTTPS server
server {
    listen 443 ssl http2;
    server_name myapp.com www.myapp.com;

    ssl_certificate     /etc/letsencrypt/live/myapp.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/myapp.com/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;

    # Security headers
    add_header Strict-Transport-Security "max-age=63072000" always;
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    server_tokens off;

    # React app (frontend)
    location / {
        root /var/www/frontend;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # Node.js API
    location /api/ {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Host              $host;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header Upgrade           $http_upgrade;
        proxy_set_header Connection        "upgrade";
    }

    # Static assets with aggressive caching
    location ~* \.(js|css|png|jpg|ico|svg|woff2)$ {
        root /var/www/frontend;
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
    }
}

Deploy Node.js App on EC2 Using Docker Image

Mayank Tamrkar — Sun, 28 Dec 2025 16:43:26 +0000

🚀 Deploy Node.js App on EC2 Using Docker, NGINX & Docker Compose

This guide explains how to deploy a Node.js app on an EC2 instance using:

Docker
Docker Hub (PAT token)
NGINX as a reverse proxy
Docker Compose (best practice)

By the end, you will be able to access your app using the EC2 public URL.

✅ Prerequisites

Before starting, make sure:

EC2 instance is running (Amazon Linux)
Ports 22 (SSH) and 80 (HTTP) are open in Security Group
Docker is already installed and running
NGINX Docker image is available
Your app is running on port 3000

🧩 Step 1: Login to Docker Hub using PAT Token (Best Practice)

Generate the pat token in docker hub

Docker Hub no longer recommends password login.
Use a Personal Access Token (PAT).

docker login -u your_user_name

When prompted:

Username → your Docker Hub username
Password → your PAT token

✅ This allows secure image pulling and pushing.

🧩 Step 2: Pull Your Application Image

Pull your Node.js app image from Docker Hub.

docker pull <your_repo_name>/my_node_app:latest

Verify:

docker images

🧩 Step 3: Create NGINX Configuration Directory

Create a clean directory structure:

mkdir -p ~/nginx/conf
cd ~/nginx

🧩 Step 4: Create NGINX Config File

Create the config file:

nano conf/default.conf

Paste this content:

server {
    listen 80;

    location / {
        proxy_pass http://my-node-app:3000;
        proxy_http_version 1.1;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

📌 What this does:

Listens on port 80
Forwards requests to Node app running on port 3000
Uses container name (my-node-app) instead of IP (best practice)

Save and exit (ctl + s then ctl + x).

🧩 Step 5: Install Docker Compose (Required)

Docker Compose is not installed by default on EC2.

Install Docker Compose v2

mkdir -p ~/.docker/cli-plugins

curl -SL https://github.com/docker/compose/releases/download/v2.27.0/docker-compose-linux-x86_64 \
-o ~/.docker/cli-plugins/docker-compose

chmod +x ~/.docker/cli-plugins/docker-compose

Verify installation:

docker compose version

🧩 Step 6: Create Docker Compose File

Create the compose file:

nano docker-compose.yml

Paste this content:

version: "3.8"

services:
  app:
    image: <your_repo_name>/my_node_app:latest
    container_name: my-node-app
    restart: always
    expose:
      - "3000"
    networks:
      - app-network

  nginx:
    image: nginx:latest
    container_name: nginx
    restart: always
    ports:
      - "80:80"
    volumes:
      - ./conf/default.conf:/etc/nginx/conf.d/default.conf:ro
    depends_on:
      - app
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

🧩 Step 7: Start the Application Stack

Note : Before run the compose file make sure nginx image is not running if nginx image is already running then stop using docker stop command

docker stop <image name or image id >

Go inside the nginx folder and run the compose file using this command

docker compose up -d

🧩 Step 8: Verify Everything Is Running

Check running containers:

docker compose ps

Check logs if needed:

docker compose logs nginx
docker compose logs app

🌍 Step 9: Access the Application

Open your browser and hit:

http://<EC2_PUBLIC_IP>

🎉 Your Node.js app should now load via NGINX.

🛑 Stop the Application

docker compose down

🚀 What You Can Do Next

Add HTTPS (Let’s Encrypt)
Add domain name
Add environment variables
Convert this setup to Kubernetes
Use CI/CD pipeline

Launch an AWS EC2 Instance

Mayank Tamrkar — Sun, 28 Dec 2025 12:57:29 +0000

🚀 Launch an AWS EC2 Instance and Serve NGINX Using Docker (Beginner Friendly)

If you are new to AWS and DevOps, setting up an EC2 instance and exposing it to the internet can feel confusing.

In this guide, we will go step by step — from launching an EC2 instance to seeing the NGINX welcome page in your browser using Docker.

No prior DevOps experience required 👍

🧠 What We’ll Build

By the end of this tutorial, you will have:

A running AWS EC2 instance
SSH access configured
Docker installed
NGINX running inside a Docker container
Public access via browser

🛠 Prerequisites

AWS account
Basic terminal knowledge
SSH installed on your local machine
Internet connection

🟢 Step 1: Launch an EC2 Instance

Go to AWS Console → EC2 → Launch Instance
Choose Amazon Linux 2023 AMI
Select instance type: t2.micro (Free tier)
Create a imagekey pair:
- Name: my-ec2-key
- Type: RSA
- Format: .pem
Network settings:
- Auto-assign Public IP: Enabled
Create a Security Group with these inbound rules:

Type	Port	Source
SSH	22	My IP
HTTP	80	0.0.0.0/0

Click Launch Instance

Wait until the instance state becomes Running.

🔐 Step 2: Connect to EC2 Using SSH

Open the folder where this file exists and fix file permissions

chmod 400 my-ec2-key.pem

Click on the Connect instance button using connection setup , just copy the SSH URL in example

sudo ssh -i ~/.ssh/my-ec2-key.pem ec2-user@<PUBLIC_IP>

After login you will see the the screen like this way

🔄 Step 3: Update the System

sudo yum update -y

This ensures your system packages are up to date.

🐳 Step 4: Install Docker

sudo yum install docker -y

Docker will allow us to run NGINX without installing it directly on EC2.

▶️ Step 5: Start Docker Service

sudo systemctl start docker
sudo systemctl enable docker
sudo systemctl status docker

👤 Step 6: Allow Non-Root Docker Access

sudo usermod -aG docker ec2-user
exit

🔁 Log in again for the changes to apply:

ssh -i your_pem_file_name ec2-user@<PUBLIC_IP>

✅ Step 7: Verify Docker Installation

docker --version

If Docker is installed correctly, you’ll see the version output.

🌐 Step 8: Run NGINX Using Docker

docker run -d --name nginx-test -p 80:80 nginx

This command:

Runs NGINX in detached mode
Exposes port 80 publicly

🔍 Step 9: Verify Running Container

docker ps

You should see something like:

0.0.0.0:80->80/tcp

🌍 Step 10: Access NGINX from Browser

Open your browser and navigate to:

http://<PUBLIC_IP>

🎉 You should now see:

Welcome to nginx!

This confirms your EC2 instance is publicly accessible and serving content.

Clipify

Mayank Tamrkar — Wed, 26 Nov 2025 16:59:09 +0000

✨ Introducing Clipify — The Smart Clipboard and Notes App You’ll Actually Use

How many times have you copied something important — a link, a code snippet, or a quick thought — only to lose it moments later?

That frustration is what inspired Clipify — a smart, secure, and beautifully simple space to save everything you copy and keep your notes organized.

💭 The Problem We’re Solving

Our digital lives are full of copy-paste chaos.

We constantly switch between browsers, chats, and apps — copying data, writing reminders, and saving notes everywhere.

But the clipboard forgets, sticky notes pile up, and context gets lost.

Clipify solves that by creating a single, searchable space where your copied content and quick notes live together — always available when you need them.

⚡ Key Features

🧠 Smart Clipboard Manager

Automatically saves everything you copy — text, links, or snippets — in one place.

Never lose copied data again and access your clipboard history anytime.

🗒️ Quick Notes (Keeps)

Write and organize short notes or ideas in seconds.

Perfect for jotting down thoughts, todos, or meeting summaries on the go.

✅ To-Do Management

Plan your day and track tasks effortlessly within your workspace.

🧩 Search & Filter

Find anything instantly with built-in search and filters.

Your clipboard and notes are now fully organized and easy to access.

🔒 Privacy First

Your clipboard data and notes are securely stored and never shared.

Everything stays in your private workspace — 100% under your control.

📱 Progressive Web App (PWA)

Install Clipify directly on your desktop or phone.

It works offline, feels native, and syncs smoothly with your workflow.

🚀 Why Developers and Creators Love Clipify

Developers: Keep reusable code snippets, commands, and links ready to use.
Writers & Creators: Save content ideas, outlines, and quotes in one space.
Students & Professionals: Organize study notes, reminders, and references.
Everyone: Manage clipboard history and notes without clutter or confusion.

Clipify helps you stay focused, organized, and ready — no more lost content or scattered thoughts.

🧭 What’s Coming Next

We’re working on some exciting upcoming features:

Cross-device sync
Tag-based organization
AI-powered smart search and suggestions
Custom themes and dark mode

💬 Final Thoughts

Clipify isn’t just another clipboard or notes app — it’s your personal productivity space.

Whether you’re coding, studying, or brainstorming, Clipify makes it effortless to save, search, and organize everything that matters.

So next time you copy something important, don’t just copy it — Clipify it. ✨

👉 Try Clipify Now and simplify your digital life today.

JWT vs JWS vs JWE: What’s the Difference & When to Use Each

Mayank Tamrkar — Tue, 30 Sep 2025 09:40:07 +0000

JWT, JWS, JWE — a practical mini-guide (with issuer/receiver examples)

How JWT, JWS and JWE Work Together in Token Security

1) Quick definitions

JWT (JSON Web Token): A standard container for claims. A JWT can be signed (JWS) or encrypted (JWE), or both (nested).
JWS (JSON Web Signature): A signed JWT (integrity + authenticity). Header & payload are readable (Base64URL), but protected against tampering.
JWE (JSON Web Encryption): An encrypted JWT (confidentiality + integrity). Claims are hidden from anyone without the decryption key.

Shapes (compact serialization)

JWS: header.payload.signature (3 parts)
JWE: header.encryptedKey.iv.ciphertext.tag (5 parts)

2) Differences at a glance

Aspect	JWS (signed)	JWE (encrypted)
Confidentiality (hides data)	❌ No	✅ Yes
Integrity / authenticity	✅ Yes	✅ Yes
Readability by intermediaries	Readable	Opaque
Common use	Access tokens between trusted services over TLS	Sensitive claims (PII/financial), B2B
Parts	3	5

Who is “more secure”?

For hiding data, JWE wins (it’s encrypted).
For tamper-proofing, both JWS and JWE provide integrity.
If you need both confidentiality and a verifiable issuer, use nested: Sign → Encrypt (JWS inside JWE).

3) When should I use what? (cheat sheet)

Only need to verify the issuer and prevent tampering; claims aren’t sensitive → JWS
Claims are sensitive / must be hidden even in transit or logs → JWE
Both sensitive and must be verifiably from issuer → Nested (JWS → JWE)

Always use HTTPS/TLS regardless.

4) Key concepts you’ll see below

alg: crypto algorithm (e.g., RS256 for JWS, RSA-OAEP-256 or ECDH-ES + A256GCM for JWE)
kid: Key ID in the header, so verifiers can pick the right key
jwks_uri: URL where the issuer publishes public keys (JWKS) so others can verify signatures
Claims to validate: iss, aud, exp, nbf, iat

5) Architecture flow (Mermaid)

Paste these into a Mermaid-friendly renderer.

High-level flow (sign → encrypt → decrypt → verify)

flowchart LR
  subgraph Issuer App (A)
    A1[Build claims<br/>sub, aud, exp, ...]
    A2[Sign claims → JWS<br/>(RS256/ES256)<br/>header has kid]
    A3[Encrypt JWS → JWE<br/>(RSA-OAEP-256/ECDH-ES + A256GCM)<br/>header has kid]
  end

  subgraph Receiver App (B)
    B1[Receive JWE]
    B2[Decrypt with private key<br/>→ inner JWS]
    B3[Read JWS header.kid]
    B4[Fetch/cache JWKS from jwks_uri<br/>pick matching key by kid]
    B5[Verify JWS signature<br/>& validate iss, aud, exp, nbf]
    B6[Use claims]
  end

  A1 --> A2 --> A3 --> B1 --> B2 --> B3 --> B4 --> B5 --> B6

Sequence (with `kid` + `jwks_uri`)

sequenceDiagram
  participant A as Issuer App (A)
  participant K as Key Server (Issuer JWKS)
  participant B as Receiver App (B)

  Note over A: Signing key pair (private kept by A)
  Note over B: Encryption key pair (private kept by B)

  A->>A: Create claims (sub, aud, exp, iat, nbf, iss)
  A->>A: Sign → JWS (header: alg=RS256, kid=<signing kid>)
  A->>A: Encrypt JWS → JWE (header: alg=RSA-OAEP-256, enc=A256GCM, kid=<B enc kid>)
  A-->>B: Send JWE (5 parts)

  B->>B: Decrypt with B's private key → inner JWS
  B->>B: Read JWS.header.kid

  B->>K: GET {jwks_uri} (issuer’s JWKS; cache with ETag/Cache-Control)
  K-->>B: JWKS { keys:[ {kid:..., kty:..., ...}, ... ] }

  B->>B: Select key where kid == JWS.kid
  B->>B: Verify signature; check iss, aud, exp, nbf, iat, alg allow-list
  B->>B: Accept claims → authorize request

6) Examples — Node.js with `jose`

Replace the example JWKs with your real keys (ideally from a KMS/HSM). Algorithms shown are secure defaults.

6.1 Keys (outline)

Issuer app (A) keeps signing private key (RS256/ES256) → publishes the public key in JWKS at jwks_uri, with a unique kid.
Receiver app (B) keeps encryption private key (RSA-OAEP-256 or ECDH-ES). Issuer needs B’s public key to encrypt.

// Shapes only (don’t use these literals in prod)
const signingPrivateJwk = { kty: 'RSA', kid: 'rsa-2025-09-01', alg: 'RS256', /* ... d, n, e ... */ };
const signingPublicJwk  = { kty: 'RSA', kid: 'rsa-2025-09-01', alg: 'RS256', /* ... n, e ... */ };

const encPublicJwkOfB   = { kty: 'RSA', kid: 'enc-2025-06-01', alg: 'RSA-OAEP-256', /* ... n, e ... */ };
const encPrivateJwkOfB  = { kty: 'RSA', kid: 'enc-2025-06-01', alg: 'RSA-OAEP-256', /* ... d, n, e ... */ };

6.2 JWS only (create & verify)

Issuer (A) → create JWS

import { SignJWT, importJWK } from 'jose';

const key = await importJWK(signingPrivateJwk, 'RS256');
const now = Math.floor(Date.now()/1000);

const jws = await new SignJWT({ sub: 'user_123', scope: 'orders:read', iat: now })
  .setProtectedHeader({ alg: 'RS256', typ: 'JWT', kid: signingPrivateJwk.kid })
  .setIssuer('https://issuer.example.com/')
  .setAudience('api://receiver-app')
  .setExpirationTime('15m')
  .sign(key);

// send `jws` to B (3 parts)

Receiver (B) → verify JWS

import { jwtVerify, importJWK } from 'jose';

const verifyKey = await importJWK(signingPublicJwk, 'RS256');

const { payload, protectedHeader } = await jwtVerify(jws, verifyKey, {
  algorithms: ['RS256'],
  issuer: 'https://issuer.example.com/',
  audience: 'api://receiver-app',
  maxTokenAge: '15m',
  clockTolerance: '60s'
});

// use payload

6.3 JWE only (create & decrypt)

Issuer (A) → create JWE

import { compactEncrypt, importJWK } from 'jose';

const pubEncKey = await importJWK(encPublicJwkOfB, 'RSA-OAEP-256');
const plaintext = new TextEncoder().encode(JSON.stringify({ ssn: '***-**-1234' }));

const jwe = await new compactEncrypt(plaintext)
  .setProtectedHeader({ alg: 'RSA-OAEP-256', enc: 'A256GCM', typ: 'JWT', kid: encPublicJwkOfB.kid })
  .encrypt(pubEncKey);

// send `jwe` to B (5 parts)

Receiver (B) → decrypt JWE

import { compactDecrypt, importJWK } from 'jose';

const privEncKey = await importJWK(encPrivateJwkOfB, 'RSA-OAEP-256');

const { plaintext, protectedHeader } = await compactDecrypt(jwe, privEncKey);
const data = JSON.parse(new TextDecoder().decode(plaintext));

// use decrypted `data`

6.4 Nested (recommended when you need both): Sign → Encrypt

Issuer (A): sign JWS, then encrypt that JWS into a JWE

import { SignJWT, compactEncrypt, importJWK } from 'jose';

const signKey = await importJWK(signingPrivateJwk, 'RS256');
const encPub  = await importJWK(encPublicJwkOfB, 'RSA-OAEP-256');

const jws = await new SignJWT({ sub: 'user_123', role: 'admin' })
  .setProtectedHeader({ alg: 'RS256', typ: 'JWT', kid: signingPrivateJwk.kid })
  .setIssuer('https://issuer.example.com/')
  .setAudience('api://receiver-app')
  .setExpirationTime('10m')
  .sign(signKey);

const jwe = await new compactEncrypt(new TextEncoder().encode(jws))
  .setProtectedHeader({ alg: 'RSA-OAEP-256', enc: 'A256GCM', typ: 'JWT', kid: encPublicJwkOfB.kid })
  .encrypt(encPub);

// send `jwe` to B

Receiver (B): decrypt JWE → verify inner JWS

import { compactDecrypt, jwtVerify, importJWK } from 'jose';

const decKey     = await importJWK(encPrivateJwkOfB, 'RSA-OAEP-256');
const verifyKey  = await importJWK(signingPublicJwk, 'RS256');

const { plaintext, protectedHeader: encHdr } = await compactDecrypt(jwe, decKey);
const innerJws = new TextDecoder().decode(plaintext);

const { payload, protectedHeader: sigHdr } = await jwtVerify(innerJws, verifyKey, {
  algorithms: ['RS256'],
  issuer: 'https://issuer.example.com/',
  audience: 'api://receiver-app',
  maxTokenAge: '10m',
  clockTolerance: '60s'
});

// use `payload`

7) Publishing and discovering keys

Add kid to token headers.
Publish the issuer’s JWKS at a stable jwks_uri (e.g., https://issuer.example.com/.well-known/jwks.json).
Receivers fetch & cache JWKS, then pick the key with matching kid to verify.
Rotate keys by:

Publish new key in JWKS.
Start signing with its kid.
Keep old key until old tokens expire.
Remove old key from JWKS.

Minimal JWKS example

{
  "keys": [
    {
      "kty": "RSA",
      "kid": "rsa-2025-09-01",
      "use": "sig",
      "alg": "RS256",
      "n": "<base64url modulus>",
      "e": "AQAB"
    }
  ]
}

8) Best practices (security checklist)

Enforce algorithm allow-lists (e.g., RS256, ES256; for JWE: RSA-OAEP-256/ECDH-ES + A256GCM).
Validate iss, aud, exp, nbf, iat (+ small clock tolerance).
Keep access tokens short-lived (5–15 min). Use rotating refresh tokens.
Prefer HttpOnly+Secure+SameSite cookies in browsers; always use TLS.
Don’t put secrets/PII in a plain JWS; use JWE or keep tokens opaque.
Log failed verifications; monitor unusual reuse or audience/issuer mismatches.

9) FAQ

Is JWT itself encrypted? No. JWT is just the container. Use JWE for encryption.
3 parts vs 5 parts? 3 → JWS (signed). 5 → JWE (encrypted).
Order for nested? Sign → Encrypt (hides claims and signature metadata).

TL;DR

JWS: integrity + authenticity. Fast, readable.
JWE: confidentiality (+ integrity). Opaque.
Nested (JWS→JWE): both. Use for sensitive data that must be verifiably from your issuer.

Simple Push Notification Setup with Firebase in React or Next.js

Mayank Tamrkar — Tue, 30 Sep 2025 07:40:53 +0000

✅ Step 1: Create a Firebase Project

Go to https://console.firebase.google.com
Click Add project
Give it a name and continue
Once created, go to Project settings
Under Your apps, click </> Web and register your app
Copy the Firebase config — we’ll need it soon
Go to Cloud Messaging tab and copy the Public VAPID key

📁 Step 2: Create Firebase Helper

File: src/utils/firebase.ts

import { initializeApp } from 'firebase/app';
import { getMessaging, getToken } from 'firebase/messaging';

// Replace this with your Firebase config
const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_PROJECT_ID.firebaseapp.com',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_PROJECT_ID.appspot.com',
  messagingSenderId: 'YOUR_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

const firebaseApp = initializeApp(firebaseConfig);
const messaging = getMessaging(firebaseApp);

// Get token function
export const requestFcmToken = async (): Promise<string | null> => {
  try {
    const permission = await Notification.requestPermission();
    if (permission !== 'granted') return null;

    const token = await getToken(messaging, {
      vapidKey: 'YOUR_PUBLIC_VAPID_KEY', // from Firebase Cloud Messaging settings
    });

    console.log('✅ FCM Token:', token);
    return token;
  } catch (err) {
    console.error('Error getting FCM token', err);
    return null;
  }
};

📦 Step 3: Create a Custom Hook

File: src/hooks/useFcm.ts

import { useEffect, useState } from 'react';
import { requestFcmToken } from '@/utils/firebase';

const useFcm = () => {
  const [token, setToken] = useState<string | null>(null);

  useEffect(() => {
    const getToken = async () => {
      const fcmToken = await requestFcmToken();
      setToken(fcmToken);
    };

    getToken();
  }, []);

  return token;
};

export default useFcm;

🧩 Step 4: Use the Hook in App

File: src/app/layout.tsx (or _app.tsx in a React app)

'use client';

import useFcm from '@/hooks/useFcm';
import { useEffect } from 'react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const token = useFcm();

  useEffect(() => {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/firebase-messaging-sw.js').then(() => {
        console.log('✅ Service worker registered');
      });
    }
  }, []);

  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

📄 Step 5: Create Service Worker File

File: public/firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/10.8.1/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.8.1/firebase-messaging-compat.js');

firebase.initializeApp({
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_PROJECT_ID.firebaseapp.com',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_PROJECT_ID.appspot.com',
  messagingSenderId: 'YOUR_SENDER_ID',
  appId: 'YOUR_APP_ID',
});

const messaging = firebase.messaging();

self.addEventListener('push', function (event) {
  const data = event.data?.json();
  self.registration.showNotification(data?.notification?.title || 'Notification', {
    body: data?.notification?.body || '',
  });
});

🏁 You're Done!

Now your app will:

Ask for notification permission
Get an FCM token
Register the service worker
Show background notifications

Let me know if you want a version with token refresh or API integration later!

# Mastering Cursor AI: The Ultimate Guide for Developers (2025 Edition)

Mayank Tamrkar — Tue, 22 Apr 2025 19:04:48 +0000

Cursor AI is redefining the way developers write, edit, and manage code. Built on top of the powerful VS Code foundation and supercharged with AI, Cursor makes writing and refactoring code smarter, faster, and safer. Whether you’re a solo developer, a startup engineer, or part of a large team, Cursor AI can act as your AI pair programmer.

🚀 What is Cursor AI?

Cursor is an AI-powered code editor that integrates directly with the coding environment, enabling developers to:

Generate new code
Refactor existing logic
Understand complex codebases
Follow strict coding guidelines and project rules
Collaborate with Git and AI seamlessly

Unlike traditional AI tools that live in the browser or chat, Cursor integrates directly with your local project and understands your entire codebase contextually.

💰 How to Use Cursor AI for Free

Downloading Cursor

You can download Cursor from the official site:
https://cursor.sh

Free Plan Details

Sign-up required initially
Free usage includes access to basic AI features
May be limited in tokens or model choices

Premium Features

Use advanced models (like GPT-4 Turbo or Claude)
Access to longer context windows and better performance

Tip: You can still do a LOT with the free version if you prompt well and use smaller files/modules.

🧩 Cursor AI Features — Deep Dive

1. Git Integration

Built-in diff viewer for every AI suggestion
Git-aware prompts
Safe merging and version control support

Example:
When you refactor a function, Cursor shows a side-by-side diff to compare changes before committing.

2. AI Models

Choose between GPT-3.5, GPT-4, Claude, etc.
Each model has pros/cons (speed, cost, accuracy)

Example:
GPT-4 is great for nuanced refactoring or logic-heavy components. GPT-3.5 is faster for boilerplate.

3. Web Integration

Ask Cursor to summarize documentation from a URL
Auto-fetch answers from StackOverflow, docs, or npm packages

Example:

"Summarize how to use Zustand from the official docs"

4. Context Awareness

Understands your current file and the rest of the project
Knows function usage, variable names, imports

Example:
You can say: "Add a test for this function" and Cursor will find the correct test file and test runner setup.

5. Inline Code Prompting

Hover or select code → right-click → prompt
You get suggestions exactly where you need them

Example:

Select a useEffect hook and ask: “Add error handling here without changing the logic.”

6. Project-wide Refactors

Rename variables everywhere
Move logic to a different layer
Search-and-edit with semantic understanding

Example:

“Convert all class components to functional components using hooks.”

7. Rules System with `.mdc` Files

You can define project-wide rules in a markdown-like format that Cursor follows every time it edits.

📜 Sample `.mdc` File (Cursor Rules)

# Cursor Rules

## Rule: Safe Editing Policy
- DO NOT remove or break any existing code.
- DO NOT modify current logic unless necessary.
- Only extend or add new code with minimal, safe changes.

## Rule: Code Style and Language Preferences
- Always write code in **TypeScript**.
- Always provide **proper type annotations**.
- Do not use `any` unless explicitly allowed.

## Rule: Styling
- Use **Tailwind CSS** for all styling.
- Follow consistent utility-first class conventions.

## Rule: Code Quality
- Always respect and follow **linting rules**.
- Do not introduce new linting errors.
- Format code according to the existing linting and Prettier settings.

## Rule: Formatting
- DO NOT add or remove empty lines unnecessarily.
- DO NOT change existing spacing or indentation unless required by linting rules.
- Avoid any cosmetic-only changes unless explicitly requested.

## Rule: Clarity
- Comment new logic briefly if it's not self-explanatory.
- Keep function names and variable names descriptive and readable.

Store this file in .cursor/rules.mdc at the root of your project.

🧠 How to Prompt Cursor AI Effectively

✅ Good Prompts

“Add TypeScript types to this function. Don’t change logic.”
“Fix the linting error in this block.”
“Add Tailwind styling to this button using existing classes.”

❌ Bad Prompts

“Make this better”
“Fix everything” (too vague)
“Do it for me”

Always be explicit about intent, constraints, and desired outcome.

🛡️ Best Practices When Using Cursor

Always Review the Diff before committing
Use version control — experiment in branches
Prompt in small chunks — don’t overwhelm the AI
Use inline comments to guide edits:

// AI: Add error handling without breaking existing logic

Update .mdc rules as your project evolves
Test your changes – AI can help write tests too!
Create a prompt library for repeated tasks

🔧 Real-World Use Cases

Refactor legacy code safely
Migrate JS to TypeScript project-wide
Enforce team-wide coding rules with .mdc
Learn libraries quickly by asking Cursor to explain code
Speed up onboarding for new developers

🧪 Common Mistakes to Avoid

Editing huge files all at once
Trusting AI changes blindly
Not setting rules
Using vague or lazy prompts
Over-relying on default model choices

🔗 Resources

Official site: https://cursor.sh
GitHub: https://github.com/cursor-dev
Community discussions: GitHub Discussions

🧭 Conclusion

Cursor AI is not just an editor — it's a powerful AI coding assistant that evolves with your workflow. By understanding how to prompt effectively, setting up smart rules, and leveraging its features wisely, you can truly turn Cursor into your supercharged coding partner.

Start coding smarter today — and let Cursor handle the rest.

How to add multiple ssh keys for github

Mayank Tamrkar — Sat, 22 Mar 2025 16:30:40 +0000

🚀 Managing Multiple SSH Keys for GitHub

Managing multiple SSH keys is useful when working with multiple GitHub accounts (e.g., work and personal). This guide will show you how to:

✅ Check existing SSH configuration

✅ Generate multiple SSH keys

✅ Configure SSH for different accounts

✅ Clone repositories and set remotes

✅ Authenticate and troubleshoot issues

Let's get started! 🚀

🔍 Step 1: Check Existing SSH Configuration

Before generating new keys, check if you already have an SSH key:

ls ~/.ssh/

If you see files like id_rsa and id_rsa.pub, that means you already have an SSH key set up. To view your existing SSH config:

cat ~/.ssh/config

If you don’t have an SSH config file yet, don’t worry—we’ll create one! 🎉

🛠 Step 2: Generate a New SSH Key for an Additional GitHub Account

To create a second SSH key (e.g., id_rsa_example):

ssh-keygen -t rsa -b 4096 -C "your-email@example.com" -f ~/.ssh/id_rsa_example

👉 Press Enter for all prompts (unless you want a passphrase for extra security).

After that, add your new SSH key to the SSH agent:

eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_rsa_example

📌 Step 3: Configure SSH for Multiple Accounts

Now, let's configure SSH so Git knows which key to use for different GitHub accounts.

Edit the SSH Config File

Run:

nano ~/.ssh/config

Add the following entries for multiple accounts:

Host github.com
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_rsa  # Default key

Host github.com-example
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_rsa_example

Host github.com-example2
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_rsa_example2

📌 Save and exit: Press CTRL + X, then Y, and hit Enter.

🔑 Step 4: Add the SSH Key to GitHub

Now, add your new SSH key to GitHub.

Copy the SSH key:

   cat ~/.ssh/id_rsa_example.pub

Go to GitHub → Settings → SSH and GPG keys → New SSH Key

🔗 GitHub SSH Key Settings
Paste the key and give it a title (e.g., Example Account).
Click Add SSH Key.

🚀 Step 5: Clone a Repository Using the New SSH Key

When cloning a repository, use the Host alias from your SSH config:

git clone git@github.com-example:your-username/your-repo.git

This tells Git to use id_rsa_example instead of the default id_rsa.

If you already cloned a repository using HTTPS, change the remote to SSH:

cd your-repo

git remote set-url origin git@github.com-example:your-username/your-repo.git

To verify your remote settings:

git remote -v

🔄 Step 6: Check SSH Authentication

To confirm that Git is using the correct SSH key, run:

ssh -T git@github.com-example

✅ Expected output:

Hi your-username! You've successfully authenticated, but GitHub does not provide shell access.

If you see a different username, check your SSH config and re-run:

ssh-add ~/.ssh/id_rsa_example

🔧 Troubleshooting Common Issues

🚫 1. SSH Key Not Working?

Try refreshing SSH authentication:

ssh-add -D  # Remove all SSH keys
ssh-add ~/.ssh/id_rsa_example  # Add the correct key

❌ 2. Wrong GitHub Account Showing?

Run:

ssh -T git@github.com-example

If the wrong account appears, update your ~/.ssh/config file and restart SSH:

ssh-agent -k  # Stop SSH agent
exec ssh-agent bash  # Restart SSH agent
ssh-add ~/.ssh/id_rsa_example

🔁 3. Remove and Re-add a Remote

If your Git remote URL is incorrect or broken, remove and re-add it:

git remote remove origin
git remote add origin git@github.com-example:your-username/your-repo.git
git remote -v  # Verify

🔑 4. Using HTTPS Instead of SSH?

If you're accidentally using HTTPS, update your repository to SSH:

git remote set-url origin git@github.com-example:your-username/your-repo.git

🔄 5. Refresh GitHub Authentication

If you're facing authentication issues, refresh your GitHub token:

gh auth refresh -h github.com -s repo

If that doesn’t work, log out and log in again:

gh auth logout
gh auth login

🎯 Final Verification

After following these steps, run:

git push origin main

✅ If it works, you're all set!

🎉 Conclusion

Now you know how to:

Manage multiple SSH keys
Configure SSH for different GitHub accounts
Clone repositories with specific SSH keys
Troubleshoot common SSH & GitHub issues

🔹 If you found this helpful, star this repo and share it with others! ⭐🚀

How to install android studio in linux/ubantu

Mayank Tamrkar — Fri, 21 Mar 2025 19:34:47 +0000

📌 How to Install and Set Up Android Studio on Ubuntu via Command Line

Android Studio is the official IDE for Android development. In this guide, we'll walk through installing and setting up Android Studio on Ubuntu using the command line.

🚀 1. Install Java Development Kit (JDK)

✅ Check if JDK is Installed

Before installing, check if JDK is already installed:

java -version

If not installed, proceed with the steps below.

🔹 Install OpenJDK 11 (Recommended)

sudo apt update
sudo apt install openjdk-11-jdk -y

🔹 Verify Installation

java -version

Expected output:

openjdk version "11.0.x" 2024-XX-XX

🔹 Set JAVA_HOME Environment Variable

echo 'export JAVA_HOME=/usr/lib/jvm/java-11-openjdk-amd64' >> ~/.bashrc
source ~/.bashrc

🔥 2. Download and Install Android Studio

✅ Download Android Studio

wget -O android-studio.tar.gz "https://redirector.gvt1.com/edgedl/android/studio/ide-zips/2024.1.1.0/android-studio-2024.1.1.0-linux.tar.gz"

🔹 Extract and Move to `/opt/` Directory

tar -xvf android-studio.tar.gz
sudo mv android-studio /opt/

🔹 Run Android Studio Setup

/opt/android-studio/bin/studio.sh

🔧 3. Add Android Studio to PATH

To run studio.sh from anywhere, create a symbolic link:

sudo ln -s /opt/android-studio/bin/studio.sh /usr/local/bin/android-studio

Now, you can start Android Studio by running:

android-studio

📱 4. Set Up Android Emulator (AVD)

✅ Install Required Packages

sudo apt update
sudo apt install qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils -y

🔹 Check KVM Support

egrep -c '(vmx|svm)' /proc/cpuinfo

If the output is 0, your CPU does not support virtualization.

🔹 Grant User Permissions for KVM

sudo usermod -aG kvm $USER
sudo usermod -aG libvirt $USER
newgrp kvm

🔹 Launch Android Virtual Device (AVD) Manager

android-studio

Go to Tools > Device Manager.
Click Create Virtual Device.
Select a device model and download a system image.
Configure the settings and start the emulator.

🎯 Conclusion

Now you have installed Android Studio, set up JDK, and configured the Android Emulator using command-line steps. Happy coding! 🚀

How to download application in ubantu/linux using command line

Mayank Tamrkar — Fri, 21 Mar 2025 19:25:52 +0000

📌 How to Install Applications in Ubuntu Using Commands

Ubuntu provides multiple ways to install applications using the terminal. In this blog, we will cover two efficient methods:

Using Snap Package Manager (Recommended for most users)
Using AppImage with WLGI (For portable applications)

🚀 1. Installing Applications via Snap Package Manager

✅ What is Snap?

Snap is a universal package manager developed by Canonical that allows you to install software across different Linux distributions. It ensures applications are always updated and sandboxed for security.

🔹 Installing Snap (If Not Installed)

Ubuntu comes with Snap pre-installed. If not, install it using:

sudo apt update
sudo apt install snapd -y

🔹 Enable Snap Service

After installation, enable the Snap daemon:

sudo systemctl enable --now snapd.socket

🔹 Install an Application Using Snap

To install an app, use:

sudo snap install <app-name>

For example, to install VS Code:

sudo snap install code --classic

🔹 Launching the Installed Application

Once installed, open the application by running:

<app-name>

For example:

code

🔹 Creating a Desktop Shortcut for Snap Apps

Snap applications automatically create shortcuts, but if missing:

Open terminal and create a .desktop file:

   nano ~/.local/share/applications/code.desktop

Add the following content:

   [Desktop Entry]
   Name=Visual Studio Code
   Exec=/snap/bin/code
   Icon=/snap/code/current/meta/gui/code.png
   Terminal=false
   Type=Application
   Categories=Development;

Save and close (CTRL + X, Y, ENTER).
Make it executable:

   chmod +x ~/.local/share/applications/code.desktop

Find the app in your application menu! 🎉

🔥 2. Installing Applications Using AppImage with WLGI

✅ What is AppImage?

AppImage is a portable package format that allows running applications without installation. To integrate them with the desktop environment, we use WLGI (AppImage Launcher).

🔹 Downloading an AppImage

You can download AppImage files from the official website of the application.
For example, to download Cursor (AI-Powered Code Editor):

wget -O ~/Downloads/cursor.AppImage "https://download.cursor.sh/latest-linux"

🔹 Making the AppImage Executable

Navigate to the directory where the AppImage is downloaded and run:

chmod +x ~/Downloads/cursor.AppImage

🔹 Running the AppImage

Execute the application by running:

~/Downloads/cursor.AppImage

🔹 Setting Up a Desktop Shortcut for AppImage (Using WLGI)

To make AppImages feel like installed applications, install WLGI (AppImage Launcher):

sudo add-apt-repository ppa:appimagelauncher-team/stable -y
sudo apt update
sudo apt install appimagelauncher -y

Once installed, follow these steps:

Move the AppImage to Applications Folder

   mv ~/Downloads/cursor.AppImage ~/Applications/

Launch it via AppImage Launcher (This integrates it with your system.)

   appimagelauncher integrate ~/Applications/cursor.AppImage

Now, Cursor Editor will appear in the application menu!

🔹 Manually Creating a Desktop Shortcut for AppImage

If the app doesn’t show up in your menu, create a .desktop file manually:

Open terminal and create a shortcut file:

   nano ~/.local/share/applications/cursor.desktop

Add the following content:

   [Desktop Entry]
   Name=Cursor Editor
   Exec=/home/$USER/Applications/cursor.AppImage
   Icon=/home/$USER/Applications/cursor.png
   Terminal=false
   Type=Application
   Categories=Development;

Save and exit (CTRL + X, Y, ENTER).
Make it executable:

   chmod +x ~/.local/share/applications/cursor.desktop

You should now see Cursor Editor in the application menu. 🎉

Enjoy your Ubuntu experience with easy app installations! 🚀

npm vs pnpm: Choosing the Best Package Manager for Your Project

Mayank Tamrkar — Sat, 29 Jun 2024 08:01:37 +0000

Introduction

npm (Node Package Manager) and pnpm (Performant NPM) are both essential tools for managing JavaScript dependencies in projects. While they serve the same fundamental purpose, they differ significantly in how they handle package installation, dependency resolution, and disk space management. Understanding these differences can help you choose the right tool for your specific needs.

npm (Node Package Manager)

npm is the default package manager that comes bundled with Node.js. It has been widely adopted across the JavaScript ecosystem for its familiarity and robust feature set.

Installation Method: npm installs packages by placing each dependency in its own node_modules folder within the project's directory structure. This approach can lead to duplicated packages across different projects.
Performance and Disk Usage: npm can be slower and consume more disk space, especially with large projects and complex dependency trees.
Dependency Resolution: npm installs packages with a nested dependency structure, potentially resulting in larger node_modules directories and longer installation times.
Lockfile: npm uses a package-lock.json file to lock the versions of installed dependencies, ensuring consistent installations across different environments.

pnpm (Performant NPM)

pnpm is an alternative package manager designed to address the shortcomings of npm, focusing on efficiency and speed.

Efficiency: pnpm uses a content-addressable storage mechanism to store all package files in a centralized location (~/.pnpm-store). This approach eliminates duplicate packages and reduces disk space usage.
Installation Method: Instead of duplicating packages, pnpm creates symlinks to a shared node_modules directory, pointing to the packages stored in ~/.pnpm-store. This results in faster installation times and efficient disk space utilization.
Dependency Resolution: pnpm installs dependencies in a flat directory structure, similar to Yarn, which helps avoid issues related to deeply nested node_modules structures.
Lockfile: Similar to npm’s package-lock.json, pnpm uses a pnpm-lock.yaml file to lock dependency versions, ensuring consistent installations.

Comparison of Dependency Structures

npm Dependency Structure

Project Root
│
├── node_modules/
│   ├── lodash/
│   │   └── node_modules/
│   │       └── nested-dependency/
│   └── another-package/
│       └── node_modules/
│           └── shared-dependency/
│
└── package.json

pnpm Dependency Structure

Project Root
│
├── node_modules/
│   ├── lodash -> ~/.pnpm-store/lodash@4.17.20 (symlink)
│   └── another-package -> ~/.pnpm-store/another-package@1.2.3 (symlink)
│
└── package.json

~/.pnpm-store/
├── lodash@4.17.20/
└── another-package@1.2.3/

Managing Different Package Versions

In scenarios where different projects require different versions of the same package (e.g., lodash), pnpm efficiently manages versioning:

Centralized Storage: pnpm stores each package version separately in ~/.pnpm-store, ensuring that multiple versions can coexist without duplication.
Symlinks: When a project installs a specific package version, pnpm creates a symlink in the project's node_modules directory, pointing to the correct version in ~/.pnpm-store.

Example Scenario

Centralized Storage (`~/.pnpm-store`)

.pnpm-store/
├── lodash@1.1/
│   └── ... (files for lodash 1.1)
├── lodash@1.2/
│   └── ... (files for lodash 1.2)
└── ... (other packages)

Projects Using Different Versions

Project A (using lodash@1.1):

  Project A Root
  ├── node_modules/
  │   └── lodash -> ~/.pnpm-store/lodash@1.1 (symlink)
  └── package.json

Project B (using lodash@1.2):

  Project B Root
  ├── node_modules/
  │   └── lodash -> ~/.pnpm-store/lodash@1.2 (symlink)
  └── package.json

Where Does pnpm Fetch Packages From?

pnpm fetches packages from the same registry as npm, typically the public npm registry (https://registry.npmjs.org). By default, pnpm uses this registry for package downloads, ensuring compatibility and availability.

Conclusion: Choosing Between npm and pnpm

The choice between npm and pnpm depends on your project’s specific requirements and preferences:

npm

Pros: Widely used, familiar, and compatible with various tools and services.
Cons: Slower installation times, larger disk space usage, and potential for nested dependency issues.

pnpm

Pros: Faster installations, efficient disk space usage, and reduced dependency conflicts.
Cons: Learning curve for teams unfamiliar with its approach, and potential compatibility issues with some tools.

Recommendation

Use npm if your team is already familiar with it, or if compatibility with existing tools and services is crucial.
Use pnpm for new projects or large-scale applications where performance, disk space efficiency, and dependency management are critical.

By understanding these differences, you can make an informed decision on whether npm or pnpm is the best fit for your JavaScript project.

12 React Best Practices Every Developer Should Know

Mayank Tamrkar — Sun, 09 Jun 2024 16:34:05 +0000

Boost Your React Skills with These 12 Best Practices .

1 Use Ternary Operator for Conditional Rendering:

import React from 'react';

const MyComponent = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? <p>Welcome, User!</p> : <p>Please login.</p>}
    </div>
  );
};

export default MyComponent;

2 Use JSX Spread Attributes for Props:

Using spread attributes is generally preferred as it makes the code cleaner and more maintainable, but it's essential to ensure that only necessary props are passed down to avoid unnecessary re-renders or potential bugs.

Example without spread attributes:

import React from 'react';

const MyComponentWithoutSpread = (props) => {
  return <ChildComponent prop1={props.prop1} prop2={props.prop2} />;
};

export default MyComponentWithoutSpread;

Example with spread attributes:

import React from 'react';

const MyComponentWithSpread = (props) => {
  return <ChildComponent {...props} />;
};

export default MyComponentWithSpread;

3 Use Fragment to Return Multiple Elements:

When returning multiple elements, use Fragment or shorthand syntax (<>...</>).

import React from 'react';

const MyComponent = () => {
  return (
    <>
      <h1>Title</h1>
      <p>Content</p>
    </>
  );
};

export default MyComponent;

4 Keep Component State Local:

Keeping component state local ensures that each component manages its own state independently for better encapsulation and easier maintenance.

import React, { useState } from 'react';

const Parent = () => {
  return (
    <div>
      <Child />
      <Child />
    </div>
  );
};

const Child = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Parent;

5 Use Memoization for Performance Optimization:

Memoization optimizes performance by caching expensive function results, reducing unnecessary recalculations and rendering in components for faster applications.

import React, { useMemo } from 'react';

const ExpensiveComponent = ({ num }) => {
  const computedValue = useMemo(() => {
    // Expensive computation
    return num * 2;
  }, [num]);

  return <div>{computedValue}</div>;
};

export default React.memo(ExpensiveComponent);

6 Use Custom Hooks to Encapsulate Logic:

Using custom hooks in React encapsulates and reuses stateful logic across components, improving code reuse, organization, testing, and readability, making it a best practice for maintainable and clean code.

import { useState, useEffect } from 'react';

const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
};

const DataDisplay = ({ url }) => {
  const { data, loading } = useFetchData(url);

  if (loading) return <p>Loading...</p>;

  return <pre>{JSON.stringify(data, null, 2)}</pre>;
};

export default DataDisplay;

7 Avoid Inline Functions in JSX:

Avoid inline functions in JSX because they create new function instances on every render, which can hurt performance. Instead, define functions outside JSX to improve efficiency and prevent unnecessary re-renders.

const Button = ({ onClick }) => (
  <button onClick={onClick}>Click me</button>
);

const App = () => {
  const handleClick = () => {
    console.log('Button clicked');
  };

  return <Button onClick={handleClick} />;
};

export default App;

8 Passing Default Props:

Passing default props ensures that your component has a fallback value if a prop is not provided. This enhances component reliability by preventing errors due to missing props and simplifies the component logic by reducing the need for explicit checks or conditional rendering within the component itself.

function Avatar({ person, size = 100 }) {
 // ...
}

9 Use Component Composition:

Component composition in React means building complex components by combining simpler, reusable components for better maintainability and readability.

const Header = ({ title }) => <h1>{title}</h1>;

const Content = ({ children }) => <div>{children}</div>;

const App = () => (
  <div>
    <Header title="Welcome to My App" />
    <Content>
      <p>This is the content of the app.</p>
    </Content>
  </div>
);

export default App;

10 Use Cleanup Function in useEffect:

Cleanup function in useEffect ensures proper resource cleanup, preventing memory leaks and maintaining component cleanliness.

import React, { useState, useEffect } from 'react';

const Timer = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(count => count + 1);
    }, 1000);

    // Cleanup function
    return () => clearInterval(interval);
  }, []); // Empty dependency array for componentDidMount behavior

  return <div>Timer: {count}</div>;
};

export default Timer;

11 Use Error Boundary:

Using error boundaries helps to catch and handle errors in React components, providing better user experience, preventing crashes, and improving application robustness, making it a best practice for error management.

import React, { useState, useEffect } from 'react';

const ErrorFallback = () => (
  <div>
    <h2>Something went wrong!</h2>
    <p>Please try again later.</p>
  </div>
);

const ErrorBoundary = ({ children }) => {
  const [hasError, setHasError] = useState(false);

  useEffect(() => {
    const handleError = (error, errorInfo) => {
      console.error('Error caught by Error Boundary:', error, errorInfo);
      setHasError(true);
    };

    // Return

12 Lazy Load Components

Lazy loading components helps to improve the performance of your React application by loading components only when they are needed. This can reduce the initial load time of your application.

   import React, { Suspense, lazy } from 'react';

   const LazyComponent = lazy(() => import('./LazyComponent'));

   const App = () => {
     return (
       <div>
         <h1>My App</h1>
         <Suspense fallback={<div>Loading...</div>}>
           <LazyComponent />
         </Suspense>
       </div>
     );
   };

   export default App;