HTMX Indicator Example

This project demonstrates htmx request indicators and a small Deno HTTP server.

Prerequisites

• Deno installed (any recent version that supports Deno.serve).

Quick start (recommended)

Run a single process that serves both the HTML page and the API:

# Start a server on http://localhost:8000
# Only network access is needed
 deno run --allow-net index.ts

Then open http://localhost:8000 in your browser and click “Fetch Data”. The spinner (with class htmx-indicator) shows while the request to /api/slow-endpoint is in flight.

Tip: for auto-reload during development, add --watch:

 deno run --allow-net --watch index.ts

Alternative: API-only server (server.ts)

server.ts exposes only the /api/slow-endpoint route. To run it:

 deno run --allow-net server.ts

This starts the API on http://localhost:8000.

To use it with the static index.html page, you must also serve that file with a static file server and ensure the browser’s origin matches or that CORS is configured. The simplest path for this demo is to use the "Quick start" above (index.ts), which serves both the page and the API on the same origin.

If you still want to serve the HTML separately with Deno’s standard file server, you can run (on a different port):

# Serve the current directory (including index.html) on http://localhost:8080
 deno run --allow-net --allow-read https://deno.land/std@0.224.0/http/file_server.ts --port 8080 .

Note: Because the frontend (8080) and API (8000) are on different origins, browser requests will require CORS headers from the API. The provided server.ts does not set CORS headers, so cross-origin requests from the static server will be blocked by the browser. Use index.ts for a seamless local demo.

What’s the difference between index.ts and server.ts?

• index.ts: A self-contained demo server. It serves the HTML page at / and handles the /api/slow-endpoint route. Best for local testing with a single command.
• server.ts: An API-only server. It provides the slow endpoint but does not serve the HTML page. Use this when the frontend is hosted separately (you would typically add CORS and static file hosting or a reverse proxy in a real app).

Test the endpoint from the terminal

# After starting either index.ts or server.ts
 curl http://localhost:8000/api/slow-endpoint