P2B-WEB-2026_2025/block-01/week-01-the_web_under_the_hood/demo/README.md

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:

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:

# 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.