NATS Explorer

A real-time subject hierarchy visualizer for NATS, built with Angular 19+ and TailwindCSS.

Features

• Dynamic Tree View: Automatically builds a subject hierarchy based on incoming messages.
• Heatmap: Visual indicators for message rates (Green/Yellow/Red/Purple).
• Inspector: View payloads and stats for specific subjects.
• Zoneless Angular: Uses the latest Angular signals for high performance.

---

Installation & Running

You can run this application using Docker (Method 1) or Locally (Method 2).

Method 1: Docker (Recommended)

This method builds and runs the Web UI in a container.

Prerequisites: Docker Desktop or Docker Engine.

1. Clone the repository

   git clone https://github.com/majkelx/nats-explorer.git
   cd nats-explorer

2. Start the App

   docker compose up -d --build

3. Open the App

   • Access the UI: http://localhost:4200
   • Click Connect and enter your NATS server URL (e.g., ws://host.docker.internal:9222 if running NATS locally outside Docker).

4. Stop the App

   docker compose down

---

Method 2: Local CLI ("In Place")

Run the application directly on your machine using Node.js.

Prerequisites:

• Node.js v18.19.1+ or v20.11.1+ (Angular 21 requires these versions).

1. Clone the repository

   git clone https://github.com/majkelx/nats-explorer.git
   cd nats-explorer

2. Install Dependencies

   npm install

3. Run Development Server

   npm start

   This command runs ng serve.

4. Open the App

   • Access the UI: http://localhost:4200

---

Configuration & Troubleshooting

Connecting to NATS

The application uses WebSockets to connect to NATS.

• Port: Usually 9222 (if configured manually) or 80/443 (if behind a load balancer).
• Protocol:
  • Use ws:// for localhost or http sites.
  • Use wss:// (Secure) if the app is hosted on HTTPS.

Mixed Content Error

If you deploy this app to an HTTPS domain, browsers will block connections to insecure ws:// addresses.

• Fix 1: Use wss:// (Secure WebSockets).
• Fix 2: For local/internal testing, click the "Lock/Not Secure" icon in your browser URL bar -> Site Settings -> Allow Insecure Content.

Enable WebSockets on NATS Server

Ensure your NATS server has WebSockets enabled in its config:

websocket {
    port: 9222
    no_tls: true # set to false if using certs
}