Web Client

The web client is the browser-facing UI served by toboggan-server.

Accessing

Start the server, then open:

http://localhost:8080

What it does

  • Shows the current slide and presentation state in real time.
  • Sends navigation commands back to the server.
  • Works as the main presenter view from any modern browser.

Building the web frontend

The web frontend is optional. The server works without it (shows a placeholder page and all API endpoints still function). To build the full UI:

Prerequisites

  • Rust + wasm32-unknown-unknown target (rustup target add wasm32-unknown-unknown)
  • wasm-pack (install from pre-built binaries — see installation)
  • Node.js 18+

Build steps

Tip: The --release flag makes the WASM build slower (3-5 minutes) but produces smaller, faster files. For quick testing, you can use --dev instead.

# Step 1: Build the WASM crate (Rust → WebAssembly)
cd toboggan-web/toboggan-wasm
wasm-pack build --target web --release

# Step 2: Build the TypeScript frontend (fast, ~1 minute)
cd ..
npm install         # first time only
npm run build       # = tsc && vite build

# Step 3: Rebuild the server to embed the frontend
cd ..
cargo build -p toboggan-server

The server will detect toboggan-web/dist/ at compile time and embed it via rust-embed.

Dev mode (hot reload)

For development, you can run the Vite dev server alongside the Rust server:

# Terminal 1: start the Rust server (TOML file or markdown folder)
cargo run -p toboggan-server -- --host 0.0.0.0 --port 8080 my-talk.toml
cargo run -p toboggan-server -- --host 0.0.0.0 --port 8080 ./slides/

# Terminal 2: start the Vite dev server (auto-reloads on changes)
cd toboggan-web
npm run dev          # runs on http://localhost:8000, proxies /public to :8080

Configuration (.env)

The web frontend reads environment variables at build time from toboggan-web/.env:

VariableDefaultDescription
VITE_API_BASE_URLlocation.originBase URL for REST API calls (e.g. /api/talk). Set this if the frontend is served from a different origin than the server.
VITE_WS_BASE_URLws://{location.host}/api/wsWebSocket URL for real-time updates.
VITE_WS_MAX_RETRIES5Max WebSocket reconnection attempts.
VITE_WS_INITIAL_RETRY_DELAY1000Initial retry delay in ms.
VITE_WS_MAX_RETRY_DELAY30000Max retry delay in ms.

Important: By default VITE_API_BASE_URL and VITE_WS_BASE_URL are not set, so the frontend uses location.origin (the same server the page was loaded from). This is correct for most deployments. Only set them if you need to proxy API calls to a different backend.

Changing the API URL for production

If you serve the web UI from a different host than the server (e.g. via a CDN or reverse proxy), uncomment and edit the relevant lines in toboggan-web/.env:

VITE_API_BASE_URL=http://your-server-ip:8080
VITE_WS_BASE_URL=ws://your-server-ip:8080/api/ws

Then rebuild the frontend:

cd toboggan-web
npm run build
cd ..
cargo build -p toboggan-server

Architecture

toboggan-web/
├── toboggan-wasm/
│   ├── src/lib.rs          ← Rust code compiled to WASM
│   ├── Cargo.toml          ← wasm-pack config
│   └── pkg/                ← generated by wasm-pack
│       ├── toboggan_wasm.js
│       ├── toboggan_wasm_bg.wasm
│       └── toboggan_wasm.d.ts
├── src/
│   └── main.ts             ← imports from ../toboggan-wasm/pkg/
├── dist/                   ← generated by vite build (embedded by server)
├── vite.config.ts
├── tsconfig.json
└── package.json