DEV Community: Er. Ankit Parashar

How to Expose Azure Cosmos DB Emulator to the Internet using ngrok & Docker

Er. Ankit Parashar — Fri, 30 Jan 2026 17:03:23 +0000

Testing cloud-native apps locally is great, but things get tricky when you need to access your local database from a mobile device, a webhook, or a remote colleague's machine.

In this guide, we’ll containerize the Azure Cosmos DB Emulator and use ngrok to create a secure tunnel to the public internet.

The Architecture

Docker: Runs the Cosmos DB Linux Emulator.
ngrok: Creates a secure HTTPS tunnel to your local port.
Node.js App: Connects to the ngrok URL using specific configurations to bypass local certificate and discovery hurdles.

1. Start the Cosmos DB Emulator

Run the following command in your terminal.

Important: Replace 192.168.1.17 with your machine's actual Local IP address (find this via ipconfig on Windows or ifconfig on Mac/Linux).
docker run
--publish 8081:8081 --publish 1234:1234
--name cosmos-emulator --env AZURE_COSMOS_EMULATOR_GATEWAY_ADVERTISE_HOST=192.168.1.17
--env AZURE_COSMOS_EMULATOR_IP_ADDRESS_OVERRIDE=192.168.1.17
mcr.microsoft.com/cosmosdb/linux/azure-cosmos-emulator:vnext-preview

Fire up the ngrok Tunnel Once the container is healthy, expose port 8081. We must use the --host-header rewrite flag because the Cosmos Emulator is picky about the hostnames it accepts.

ngrok http 8081 --host-header=rewrite

Copy the generated https://...ngrok-free.app URL. You'll need it for your connection string.

The Node.js Client Setup Connecting to a tunneled emulator requires two specific "hacks" in your client configuration:

Disable Endpoint Discovery: This prevents the SDK from trying to find the "real" local IP and sticking to the ngrok URL instead.

Ignore Self-Signed Certs: Since the emulator uses a local dev cert, we need to tell the HTTPS agent to allow it.

The Code (index.js)

const { CosmosClient } = require("@azure/cosmos");
const https = require("https");

const client = new CosmosClient({
  endpoint: "https://YOUR_NEW_NGROK_URL.ngrok-free.app", 
  key: "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==",
  connectionPolicy: {
    enableEndpointDiscovery: false // Keeps the traffic flowing through ngrok
  },
  agent: new https.Agent({
    rejectUnauthorized: false // Bypasses self-signed certificate errors
  })
});

async function testConnection() {
  try {
    await client.databases.readAll().fetchAll();
    console.log("Success! You are connected via ngrok.");
  } catch (err) {
    console.error("Error:", err.message);
  }
}

testConnection();

Key Takeaways
Port 8081: This is the Gateway port. Ensure it's open and mapped correctly.

Discovery Off: If enableEndpointDiscovery is true, your app will try to connect to 127.0.0.1 after the first request, breaking the remote tunnel connection.

Security: Never use rejectUnauthorized: false in a production environment. This is strictly for local emulator testing!

Troubleshooting
If you get a connection timeout:

Ensure your Docker container has finished starting up (it can take 60+ seconds).

Verify that your local firewall isn't blocking port 8081.

Check that the AZURE_COSMOS_EMULATOR_GATEWAY_ADVERTISE_HOST matches your current local IP.

🦴 Create Smooth Skeleton Loaders in React with `skeleton-loader-ap`

Er. Ankit Parashar — Wed, 16 Jul 2025 09:48:06 +0000

Skeleton loaders are one of the most effective ways to improve perceived performance in a React app. Instead of showing a blank screen or a generic spinner, you simulate the layout of your content while it's loading.

With skeleton-loader-ap, adding responsive, customizable loading placeholders is super simple.

📦 skeleton-loader-ap

✅ Why Use Skeleton Loaders?

🧩 They hint at content layout before it's loaded
🚀 Improve perceived speed and UX
🧠 More context than loading spinners
📱 Great for images, avatars, text, cards, and more

📦 Installation

Install with npm:


bash
npm install skeleton-loader-ap
Or with Yarn:

bash
Copy
Edit
yarn add skeleton-loader-ap

🔧 Components Overview

1. <Skeleton /> – Base Skeleton Block

<Skeleton width="100%" height="1rem" borderRadius="6px" />
Props:

width (string | number)

height (string | number)

circle (boolean)

borderRadius (string | number)

placeholder (boolean | string) – true or custom image path

opacity (number | string)

2. <SkeletonImage /> – Image Loader


<SkeletonImage size={80} circle placeholder />
Extra Props:

size – square size for both width/height

circle – inferred if size is passed

3. <SkeletonParagraph /> – Multi-line Loader
<SkeletonParagraph
  rows={3}
  widths={['90%', '100%', '80%']}
  spacing="0.75rem"
  placeholder
/>
Props:

rows – number of lines (default 3)

widths – array of individual line widths

lineHeight – default '1rem'

spacing – default '0.5rem'

placeholder, opacity, borderRadius

4. <SkeletonClientWrapper /> – Auto Loader Wrapper
<SkeletonClientWrapper
  type="Image"
  size={100}
  circle
  placeholder
  loadertime={3000}
/>


<SkeletonClientWrapper
  type="Paragraph"
  rows={4}
  widths={['90%', '100%', '80%', '70%']}
  placeholder
/>
Props:

type: 'Image' or 'Paragraph'

loadertime: how long (in ms) to show skeleton

All props passed to respective component

🪄 useSkeleton Hook
Manually control loading:

const loading = useSkeleton(3000); // `true` for 3 seconds
Use this to conditionally show skeletons or actual content.

🖼 Placeholder Images
Built-in default image:


<Skeleton placeholder />
Custom image from /public/Images/your-loader.gif:

<Skeleton placeholder="/Images/custom-spinner.gif" />

🧪 Full Example

import {
  SkeletonClientWrapper,
  SkeletonImage,
  SkeletonParagraph,
} from 'skeleton-loader-ap';

function ProfileLoader() {
  return (
    <div className="flex gap-4">
      <SkeletonClientWrapper
        type="Image"
        size={80}
        circle
        placeholder
        loadertime={3000}
      />
      <SkeletonClientWrapper
        type="Paragraph"
        rows={3}
        widths={['80%', '90%', '70%']}
        placeholder
        spacing="1rem"
      />
    </div>
  );
}
🌟 Features Recap
🛠 Highly customizable

🧩 Modular components (Image, Text, Block)

⏳ Client-side wrapper for simulated loading

🪄 Hook for manual control

🖼 Built-in + custom image placeholders

📦 Lightweight with no external dependencies

🔗 Links(https://github.com/ankitparashar700/npm-skeleton-loader-ap/)
🔗 View on NPM

🔧 GitHub Repository

If this helped you, give the package a ⭐ on GitHub and share it with your dev team!

Happy loading! 🦴

Dockerizing a Next.js App with PostgreSQL and pgAdmin: A Step-by-Step Guide

Er. Ankit Parashar — Wed, 16 Jul 2025 07:56:13 +0000

Containerization simplifies full-stack development by packaging your application with its dependencies in an isolated environment. In this guide, we’ll walk through how to containerize a Next.js app, link it with a PostgreSQL database, and add pgAdmin for database management—all using Docker.

👉 Source Code: GitHub – next-docker-template

Why Use Docker for a Full-Stack Setup?

Uniform Development Environments: Works the same on every machine
Separation of Concerns: App, DB, and tooling run independently
Ease of Onboarding: New team members can start instantly
Scalability: Ready for CI/CD pipelines and production deployment

Project Structure Overview

The entire project resides in the next-app directory, following this layout:

next-app/
├── app/                    # Core Next.js app code
├── public/                 # Static files
├── nginx/                  # Optional: reverse proxy setup
├── Dockerfile              # Docker build instructions
├── docker-compose.yml      # Multi-service orchestration
├── .env                    # Environment config
├── generate-docker-files.js # Script to generate Docker files

🛠 For complete project files and folder structure, refer to the GitHub repository linked above.

Dockerfile: Building the Next.js Application

The Dockerfile defines how the container image is built. We use a minimal Node.js base image, install dependencies, copy in the code, and expose the necessary port.

To keep this post clean, you can explore the file here:

🔗 Dockerfile on GitHub

docker-compose.yml: Service Orchestration

docker-compose.yml handles the setup of three services:

web: The main Next.js development server
db: A PostgreSQL database (version 16)
pgadmin: A web interface to manage PostgreSQL visually

All services run in their own containers but are connected via Docker’s internal network.

📄 Explore the full config file:

🔗 docker-compose.yml

PostgreSQL + pgAdmin: Local Database Setup

PostgreSQL is configured with default credentials (postgres for both user and password). pgAdmin is served at http://localhost:5050 and provides a GUI for managing the database.

Connecting pgAdmin to PostgreSQL

Open pgAdmin in your browser (localhost:5050)
Log in using:
- Email: admin@admin.com
- Password: admin
Add a new server:
- Name: anything you like
- Host: db (the Docker service name)
- Username/Password: postgres / postgres

.dockerignore: Optimizing the Build

The .dockerignore file ensures certain files and directories are excluded from your Docker image to keep it lean and secure. Example entries include:

node_modules
.next
npm-debug.log
.env
.DS_Store

Bonus: Auto-Generate Docker Setup Files

To speed up your setup, a helper script generate-docker-files.js is included. Run it once to auto-generate your Dockerfile, docker-compose.yml, and .dockerignore.

✏️ Script source:

generate-docker-files.js

Running Everything

With all configuration files in place, start your app using:

docker-compose up --build

Then access the following:

Next.js App: http://localhost:3000
pgAdmin: http://localhost:5050
PostgreSQL: available locally on port 5432

Wrap-Up

You now have a fully dockerized Next.js development environment with PostgreSQL and pgAdmin. This stack provides a solid base for full-stack development, CI/CD pipelines, and scalable deployment.

⭐ Clone and explore the full project:

https://github.com/ankitparashar700/next-docker-template

Want to contribute or suggest improvements? Open an issue or fork the repo on GitHub.

Happy coding!

Lets understand working of Internet(S1:E1)

Er. Ankit Parashar — Wed, 30 Aug 2023 19:31:17 +0000

As a Frontend Developer, it's important to have a solid understanding of what the internet is and how it works. It's the foundation upon which utmost ultramodern software operations are erected. In order to make effective, secure, and scalable operations and services, you need to have a solid understanding of how the internet works and how to work its power and connectivity.

In this composition we will cover the basics of internet including

What it's how it works
Some introductory generalities
Language and some common protocols that are used to make
operations and services on the internet
Preface to the Internet How the Internet Works An Overview
Basic generalities and Terminology
The Role of Protocols in Internet Understanding IP Addresses
Domain Names preface to HTTP and HTTPS structure operations
with TCP/ IP Securing Internet Communication with SSL/ TLS
Conclusion

Let's Begin

Introduction to the Internet

Before we learn what the Internet is, we need to understand what a Network is. A network is a group of computers or other devices which are connected to each other.

For illustration, you at your home might have a network of computers and devices. Your friend living coming door might have a analogous network of devices. Their neighbour might have a analogous network of devices. All these networks when connected together form the internet.

The internet was developed in the late 1960s by the United States Department of Defense as a means of creating a decentralised communication network that could repel a nuclear attack. Over the times, it has evolved into a complex and sophisticated network that spans the globe. Moment, the internet is an essential part of ultramodern life, used by billions of people around the world to search information, communicate with friends and family, conduct business, and much further. As a developer, it's essential to have a solid understanding of how the internet works and the latest technologies and protocols that supports it.

How the Internet Works: An Overview

At a high position, the internet works by connecting devices and computer systems together using a set of standardised protocols. These protocols define how information is changed between devices and insure that data is transmitted reliably and securely. The core of the internet is a global network of connected routers, which are responsible for directing business between different devices and systems.
When you shoot data over the internet, it's broken up into small packets that are transferred from your device to a router. The router examines the packet and forwards it to the coming router in the path towards its destination. This process continues until the packet reaches its final destination.

To insure that packets are transferred and entered rightly, the internet uses a variety of protocols, including the Internet Protocol( IP) and the Transmission Control Protocol( TCP). IP is responsible for routing packets to their correct destination, while TCP ensures that packets are transmitted reliably and in the correct order. In addition to these core protocols, there are a wide range of other technologies and protocols that are used to enable communication and data exchange over the internet, including the Domain Name System( DNS), the Hypertext Transfer Protocol( HTTP), and the Secure Sockets Layer/ Transport Layer Security( SSL/ TLS) protocol.

As a developer, it's important to have a solid understanding of how these different technologies and protocols work together to enable communication and data exchange over the internet.

Basic Concepts and Terminology

To understand the internet, it's important to be familiar with some basic concepts and terminology. Here are some key terms and concepts to be aware of:

Packet: A small unit of data that is transmitted over the internet.
Router: A device that directs packets of data between different networks.
IP Address: A unique identifier assigned to each device on a network, used to route data to the correct destination.
Domain Name: A human-readable name that is used to identify a website, such as google.com.

DNS: The Domain Name System is responsible for translating domain names into IP addresses.
HTTP: The Hypertext Transfer Protocol is used to transfer data between a client (such as a web browser) and a server (such as a website).
HTTPS: An encrypted version of HTTP that is used to provide secure communication between a client and server.

The part of Protocols in Internet

Protocols play a critical part in enabling communication and data exchange over the internet. A protocol is a set of rules and norms that define how information is changed between devices and systems.

There are numerous different protocols used in internet communication, including the Internet Protocol( IP), the Transmission Control Protocol( TCP), the User Datagram Protocol( UDP), the Domain Name System( DNS), and numerous others.

IP is responsible for routing packets of data to their correct destination, while TCP and UDP insure that packets are transmitted reliably and efficiently. DNS is used to domain names into IP addresses, and HTTP is used to transfer data between clients and servers.

One of the crucial benefits of using standardised protocols is that they allow devices and systems from different manufacturers and merchandisers to communicate with each other seamlessly. For illustration, a web browser developed by one company can communicate with a web browser developed by another company, as long as they both accepts HTTP protocol.

As a developer, it's important to understand different protocols used in internet communication and how they work together to enable the transfer of data and information over the internet.

Understanding IP Addresses and Domain Names

IP addresses and domain names are both important generalities to understand when working with the internet.

An IP address is a unique identifier assigned to each device on a network. It's used to route data to the correct destination, Guarantee that information is transferred to the intended recipient. IP addresses are generally represented as a series of four figures separated by ages, similar as"192.168.1.1".

Domain names, on the other hand, are human-readable names used to identify websites and other internet resources. They are generally composed of two or more parts, separated by periods. For illustration,"google.com" is a domain name. Domain names are translated into IP addresses using the Domain Name System( DNS).

DNS is a critical part of the internet structure, responsible for rephrasing domain names into IP addresses. When you enter a domain name into your web browser, your computer sends a DNS query to a DNS server, which returns the corresponding IP address. Your computer also uses that IP address to connect to the website or other resource you've requested.

Understanding to HTTP and HTTPS

HTTP( Hypertext Transfer Protocol) and HTTPS( HTTP Secure) are two of the most generally used protocols in internet- grounded operations and services.

HTTP is the protocol used to transfer data between a customer( similar as a web browser) and a server( similar as a website). When you visit a website, your web browser sends an HTTP request to the server, asking for the webpage or other resource you've requested. The server also sends an HTTP response back to the customer, containing the requested data.

HTTPS is a more secure interpretation of HTTP, which encrypts the data being transmitted between the customer and server using SSL/ TLS( Secure Sockets Subcaste/ Transport Layer Security) encryption. This provides an additional layer of security, helping to cover sensitive information similar as login credentials, payment information, and other particular data.

When you visit a website that uses HTTPS, your web browser will display a padlock icon in the address bar, indicating that the connection is secure. You may also see the letters" https" at the beginning of the website address, rather than" http".

Create Connections with TCP/ IP

TCP/ IP( Transmission Control Protocol/ Internet Protocol) is the underlying communication protocol used by utmost internet- grounded operations and services. It provides a dependable, ordered, and error- checked delivery of data between operations running on different devices.

When structure operations with TCP/ IP, there are a many crucial generalities to understand

Ports: Ports are used to identify the operation or service running on a device. Each operation or service is assigned a unique port number, allowing data to be transferred to the correct destination.
Sockets: A socket is a combination of an IP address and a port number, representing a specific endpoint for communication. Sockets are used to establish connections between devices and transfer data between operations.
Connections: A connection is established between two sockets when two devices want to communicate with each other. During the connection establishment process, the device negotiate different parameters similar as the maximum member size and window size, which determine how data will be transmitted over the connection.
Data transfer: Once a connection is established, data can be transferred between the applications running on each device. Data is generally transmitted in parts, with each member containing a sequence number and other metadata to insure dependable delivery.
When structure operations with TCP/ IP, you will need to insure that your application is designed to work with the appropriate ports, sockets, and connections. You will also need to be familiar with the different protocols and norms that are generally used with TCP/ IP, similar as HTTP, FTP( train Transfer Protocol), and SMTP( Simple Correspondence Transfer Protocol). Understanding these generalities and protocols is essential for erecting effective, scalable, and secure internet- grounded operations and services.

Securing Internet Communication with SSL/ TLS

As we discussed before, SSL/ TLS is a protocol used to encrypt/cipher data being transmitted over the internet. It's generally used to give secure connections for operations similar as web browser, email clients, and file transfer programs.

When using SSL/ TLS to secure internet communication, there are a many crucial generalities to understand

Certificates: SSL/ TLS certificates are used to establish trust between the client and server. They contain information about the identity of the server and are signed by a trusted third party( a Certificate Authority) to verify their authenticity.

Handshake: During the SSL/ TLS handshake process, the client and server exchange information to negotiate the encryption algorithm and other parameters for the secure connection.

Encryption: Once the secure connection is established, data is translated using the agreed- upon algorithm and can be transmitted securely between the client and server.

When cleating internet- based operations and services, it's important to understand how SSL/ TLS works and to insure that your application is designed to use SSL/ TLS when transmitting sensitive data similar as login credentials, payment information, and other particular data. You will also need to insure that you obtain and maintain valid SSL/ TLS certificates for your servers, and that you follow best practices for configuring and securing your SSL/ TLS connections. By doing so, you can help cover your user's data and insure the integrity and confidentiality of your operation's communication over the internet.

Conclusion

And that brings us to the end of this session. We have covered a lot of ground, so let's take a moment to review what we have learned

The internet is a global network of connected computers that
uses a standard set of communication protocols to change
data.
The internet works by connecting devices and computer
systems together using standardised protocols, similar as IP
and TCP.
The core of the internet is a global network of connected
routers that direct traffic between different devices and systems.
Basic concepts and terminology that you need to familiarize
yourself with include packets, routers, IP addresses, domain
names, DNS, HTTP, HTTPS, and SSL/ TLS.
Protocols play a critical part in enabling communication and
data exchange over the internet, allowing devices and
systems from different manufacturers and merchandisers to
communicate seamlessly.
I hope you set up this content useful.If you have any questions or comments, please feel free to leave them below. Thanks for reading!