docs: set up live data for client-only Angular CLI apps

[erkamyaman]

What and why

A client-only ng new app has no Express server or Vite plugin to mount the devtools in, so the docs sent it to the standalone CLI, which only shows the source scan. It turns out an ng serve proxy is enough: forward /__pangular (with websockets) to pangular dev, and the overlay and popup find the CLI on the app's own origin. No package code change was needed.

{
  "/__pangular": {
    "target": "http://localhost:9999",
    "pathRewrite": {"^/__pangular": ""},
    "ws": true
  }
}

• installation.md: a "Client-only Angular CLI" tab and section (start pangular dev --port 9999, add the proxy, point ng serve at it, load the overlay, enter the one-time code on the app's origin).
• introduction.md: "Does it work without SSR?" is now "Yes", linking there. cli.md links there too, and no longer says the port is always random (it's 9999 unless taken).
• proxy-setup.test.ts: reads the proxy sample from the docs and checks the real overlay and popup reach the CLI through it, so the docs can't drift.

Closes #120

How it was verified

• pnpm commit:check, pnpm format:check, pnpm typecheck, pnpm skills:check
• pnpm test:devtools and pnpm test:panel
• pnpm docs:build, pnpm test:axe
• End to end with Playwright on a fresh ng new --ssr=false app (Angular 22.2.1) using the packed package: the overlay connected, the popup loaded through the proxy, and after the code step the panel went Live with the right project and components. ws: true is required (without it the socket gets no frames).

Notes for reviewers

Follow-ups, not done here: a cross-origin option (one server URL plus CORS) overlaps #21; and the one-time code link the CLI prints points at :9999, while behind a proxy it has to be opened on the app's origin, which could be smoother.

Summary by CodeRabbit

• Documentation
  • Added setup instructions for using the devtools server with a client-only Angular CLI app, including proxy configuration for HTTP and WebSocket traffic.
  • Clarified that the server defaults to port 9999 and selects a free port only if that port is unavailable.
  • Clarified which Angular CLI and Analog setups require a browser component, and how to access the panel through the proxy.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: d209acb3-46ef-429b-8a52-acf8806a4973

📥 Commits

Reviewing files that changed from the base of the PR and between 3255b06 and e8ae2c0.

📒 Files selected for processing (4)

• apps/docs/src/content/getting-started/cli.md
• apps/docs/src/content/getting-started/installation.md
• apps/docs/src/content/getting-started/introduction.md
• packages/devtools/src/__tests__/proxy-setup.test.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 6 remain after this review.

---

📝 Walkthrough

Walkthrough

The documentation adds a proxy setup for client-only Angular CLI apps to connect to the standalone devtools server. Tests read the documented proxy configuration and check its settings, overlay connection and WebSocket URLs, and popup iframe URL.

Changes

Client-only Angular CLI proxy

Layer / File(s)	Summary
Document and verify the proxy setup apps/docs/src/content/getting-started/cli.md, apps/docs/src/content/getting-started/installation.md, apps/docs/src/content/getting-started/introduction.md, packages/devtools/src/__tests__/proxy-setup.test.ts	The documentation describes forwarding /__pangular to the standalone devtools server on port 9999, including WebSocket forwarding and overlay setup. It clarifies the server’s default port behavior. Tests load the documented proxy configuration and check its settings, overlay URLs, and popup iframe URL.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Other · Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to e8ae2

This change documents a proxy setup for client-only Angular CLI apps and adds a test for it. No runtime behavior changes, and no merge-blocking risk was identified.

Security Architecture Review

Security architecture risk: 🔵 Low · up to e8ae2

The setup remains development-oriented, requires a one-time code, and introduces no runtime code changes. No authorization bypass was established, but preservation of authentication across the proxy remains unverified.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

• inferred — When adopted, the proxy makes the standalone devtools routes reachable through the Angular development server. Transport reachability therefore depends on that server's exposure, while the CLI operates against the selected local workspace. The localhost backend target alone does not establish that every frontend caller is local or authorized.

Trust Boundaries and Controls

• observed — The proxy test proves URL routing but returns connection metadata through an authorization-free mock. Together with the CLI's delegation to an external server adapter, this leaves attacker-origin rejection and authorization preservation across HTTP and WebSocket unresolved; it does not demonstrate a bypass.

Hardening Proposals

• proposed — Keep the development proxy loopback-only unless remote access is deliberately secured. Validate the actual standalone server through the proxy with unauthorized HTTP/WebSocket requests, foreign origins, code replay or expiry, competing clients, and interrupted reconnects before extending the guide to tunnels or shared development hosts.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 1 files. (3 skipped: 3…	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: documenting live-data setup for client-only Angular CLI apps.
Linked Issues check	✅ Passed	Issue #120 requests a client-only Angular CLI setup and an updated SSR FAQ. installation.md adds the client-only setup, documents pangular dev, the /__pangular HTTP and WebSocket proxy, overlay …
Out of Scope Changes check	✅ Passed	The reviewed changes support issue #120. The CLI and installation guidance about the default port support the documented proxy setup. The proxy test verifies that setup against the overlay and popup. …

Full details: Docstring Coverage

Explanation

Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 1 files. (3 skipped: 3 unsupported.)

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

_{Comment @coderabbitai help to get the list of available commands.}