# Demo — Inspecting HTTP Traffic

This demo runs a minimal Express server that echoes incoming requests (method, URL, headers, body) and exposes several small pages and endpoints you can use to explore HTTP behavior from both the browser and command line.

## Quick setup

Install dependencies and start the dev server:

```bash
npm install
npm run dev
```

The server listens on http://localhost:3000.

## What this demo provides

- A root page that shows the server's view of a GET request.
- A simple HTML form at `/form` that submits a POST and shows the server-echoed body.
- Endpoints and pages demonstrating status codes, delayed responses, and cookie handling (`/status`, `/status-code`, `/delay`, `/set-cookie`, `/show-cookie`).
- Example static pages and client scripts in `src/` and HTML partials in `src/partials` used to demonstrate injection and client behavior.
- The server implementation in `server.ts` that logs each request and returns an echo response.

## Walkthrough — what to try

1. Open http://localhost:3000 in the browser. In DevTools → Network inspect the GET request, then look at the server terminal to see the same information echoed.

2. Visit http://localhost:3000/form, fill it out, and submit. Observe the POST body in DevTools and the server log.

3. Compare browser requests with curl. Example commands:

```bash
# Basic GET
curl -v http://localhost:3000

# POST with urlencoded body
curl -v -X POST http://localhost:3000/login \
  -H "Content-Type: application/x-www-form-urlencoded" \
  -d "username=user&password=1234"

# POST with JSON body
curl -v -X POST http://localhost:3000/api/json \
  -H "Content-Type: application/json" \
  -d '{"name":"alice"}'

# See only response headers
curl -I http://localhost:3000
```

4. Visit `/set-cookie` to see the server send a `Set-Cookie` header, then visit `/show-cookie` (or reload a page) to see the cookie sent back to the server.

5. Try `/delay` and watch how the browser and curl behave while the server delays its response. Use this to observe timeouts and loading indicators.

6. Open `/status` and `/status-code` endpoints to see different HTTP response codes and how clients report them.

## Files of interest

- `server.ts` — the Express server and request-echo logic.
- `src/form.html` and `src/form.ts` — the example form and client script.
- `src/status.html` and `src/status.ts` — status-code examples.
- `src/partials/` — HTML partials injected into pages by the demo plugin.