ProxyHosts

Code

import { ProxyHosts, type ProxyHost } from "@fadymondy/nasaq/web";declare const hosts: ProxyHost[];declare const api: { save(input: unknown, id?: string): Promise<void>; remove(id: string): Promise<void> };export const Proxy = () => (  <ProxyHosts hosts={hosts} onSave={(input, id) => api.save(input, id)} onDelete={(id) => api.remove(id)} />);

Server Tools · beta

Live examples and controls: ProxyHosts in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/proxy-hosts.json

List and edit reverse-proxy hosts. Each row shows the domains it serves (with a "+N" chip when there are many), the upstream URL, the TLS mode (off, automatic, custom, passthrough), whether websockets are on, its status and an enabled switch. Add and edit share one dialog with validation for the domains and the upstream; delete asks first. Passthrough TLS hands the connection over untouched, so websockets are turned off. It has no backend: your callbacks save and you pass the updated hosts back.

When to useCopy Anchor Link

• A hosting panel or self-hosted proxy admin.
• Routing several domains to internal apps.

When not to useCopy Anchor Link

• Load balancing pools or health checks per upstream.
• Editing DNS: use DnsManagement.

ImportCopy Anchor Link

import { ProxyHosts } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { ProxyHosts, type ProxyHost } from "@fadymondy/nasaq/web";

declare const hosts: ProxyHost[];
declare const api: { save(input: unknown, id?: string): Promise<void>; remove(id: string): Promise<void> };

export const Proxy = () => (
  <ProxyHosts hosts={hosts} onSave={(input, id) => api.save(input, id)} onDelete={(id) => api.remove(id)} />
);

AnatomyCopy Anchor Link

ProxyHosts                   data-slot="proxy-hosts"
├─ toolbar                   search, Add proxy host
├─ DataTable                 domains (DomainChips), upstream, TLS Badge, websockets, Status, enabled Switch; row menu: Edit, Delete
├─ host Dialog               domains Textarea, upstream Input, TLS Select, websockets and enabled Switches
└─ AlertDialog               delete confirm

APICopy Anchor Link

ProxyHosts: every div prop except children and onToggle, plus:

Helpers (pure, tested): isValidUpstream (needs http:// or https://), parseHosts, validateProxyHost, tlsModeAllowsWebsockets.

ExamplesCopy Anchor Link

Validate before sending

import { parseHosts, validateProxyHost } from "@fadymondy/nasaq/web";

const errors = validateProxyHost({ hosts: parseHosts("a.example.com, b.example.com"), upstream: "http://10.0.0.5:3000" });
// [] when valid, otherwise ["hosts"] and/or ["upstream"]

AccessibilityCopy Anchor Link

• The enabled switch has a name that includes the host. Status is an icon and a word.
• The dialog traps focus and returns it; invalid fields are described by their message.
• The row menu is also a button in the row.

RTL & i18nCopy Anchor Link

• English and Arabic strings follow the Nasaq locale. Hostnames and upstream URLs stay left to right.

Styling & tokensCopy Anchor Link

• Built on DataTable, Dialog, Switch, Select, Badge and --nq-* tokens. Target [data-slot="proxy-hosts"].

Do / Don'tCopy Anchor Link

• Do validate the upstream on the server too.
• Do show offline hosts clearly: they are the ones people look for.
• Don't enable websockets for passthrough hosts: it is disabled for you.
• Don't delete without the confirm.

RelatedCopy Anchor Link

• domains-manager
• network-rules
• cert-monitor

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-server-tools-proxy-hosts--docs