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-unknowntarget (rustup target add wasm32-unknown-unknown) - wasm-pack (install from pre-built binaries — see installation)
- Node.js 18+
Build steps
Tip: The
--releaseflag makes the WASM build slower (3-5 minutes) but produces smaller, faster files. For quick testing, you can use--devinstead.
# 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:
| Variable | Default | Description |
|---|---|---|
VITE_API_BASE_URL | location.origin | Base 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_URL | ws://{location.host}/api/ws | WebSocket URL for real-time updates. |
VITE_WS_MAX_RETRIES | 5 | Max WebSocket reconnection attempts. |
VITE_WS_INITIAL_RETRY_DELAY | 1000 | Initial retry delay in ms. |
VITE_WS_MAX_RETRY_DELAY | 30000 | Max retry delay in ms. |
Important: By default
VITE_API_BASE_URLandVITE_WS_BASE_URLare not set, so the frontend useslocation.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