Skip to content
Klutch.sh Docs

Deploying WBO

Introduction

WBO (Whiteboard Online) is a lightweight, open-source collaborative whiteboard application that enables real-time drawing and brainstorming sessions. Built with Node.js and WebSockets, WBO provides a simple yet effective platform for teams to collaborate visually without the need for account registration or complex setup.

Key highlights of WBO:

  • Real-Time Collaboration: Multiple users can draw simultaneously with instant synchronization
  • No Registration Required: Create and share boards instantly without accounts
  • Drawing Tools: Pencil, lines, rectangles, circles, and text tools
  • Color Palette: Wide range of colors and brush sizes
  • Persistent Boards: Boards are saved automatically and persist between sessions
  • Export Options: Download boards as SVG or PNG images
  • Mobile Friendly: Works on tablets and touch devices
  • Lightweight: Minimal server resources required
  • Self-Hosted: Full control over your collaboration data

This guide walks through deploying WBO on Klutch.sh using Docker, configuring the whiteboard application, and setting up for team collaboration.

Why Deploy WBO on Klutch.sh

Deploying WBO on Klutch.sh provides several advantages for collaborative whiteboards:

Simplified Deployment: Klutch.sh automatically detects your Dockerfile and builds WBO without complex orchestration. Push to GitHub, and your whiteboard deploys automatically.

Persistent Storage: Attach persistent volumes for your whiteboard data. Your boards survive container restarts without data loss.

HTTPS by Default: Klutch.sh provides automatic SSL certificates, ensuring secure WebSocket connections for real-time collaboration.

GitHub Integration: Connect your configuration repository directly from GitHub. Updates trigger automatic redeployments.

Always Available: Your whiteboards are accessible 24/7 for asynchronous collaboration.

Prerequisites

Before deploying WBO on Klutch.sh, ensure you have:

Preparing Your Repository

Create a GitHub repository containing your Dockerfile for WBO deployment.

Repository Structure

wbo-deploy/
├── Dockerfile
└── .dockerignore

Creating the Dockerfile

FROM lovasoa/wbo:latest


# Set environment variables
ENV WBO_PORT=${WBO_PORT:-80}
ENV WBO_SAVE_INTERVAL=${WBO_SAVE_INTERVAL:-5000}
ENV WBO_MAX_EMIT_COUNT=${WBO_MAX_EMIT_COUNT:-10}
ENV WBO_MAX_EMIT_WINDOW=${WBO_MAX_EMIT_WINDOW:-1000}


# Create data directory for board persistence
RUN mkdir -p /opt/app/server-data


# Expose the web interface port
EXPOSE 80


# Volume for persistent board data
VOLUME ["/opt/app/server-data"]


# Health check
HEALTHCHECK --interval=30s --timeout=10s --start-period=10s --retries=3 \
  CMD wget --no-verbose --tries=1 --spider http://localhost:80/ || exit 1

Environment Variables Reference

VariableRequiredDefaultDescription
WBO_PORTNo80HTTP server port
WBO_SAVE_INTERVALNo5000Board save interval in milliseconds
WBO_MAX_EMIT_COUNTNo10Maximum events per window (rate limiting)
WBO_MAX_EMIT_WINDOWNo1000Rate limit window in milliseconds

Deploying WBO on Klutch.sh

    Push Your Repository to GitHub

    Initialize your repository and push to GitHub with your Dockerfile.

    Create a New Project on Klutch.sh

    Navigate to the Klutch.sh dashboard and create a new project. Give it a descriptive name like “wbo” or “whiteboard”.

    Create a New App

    Within your project, create a new app. Connect your GitHub account if you haven’t already, then select the repository containing your WBO Dockerfile.

    Configure HTTP Traffic

    In the deployment settings:

    • Select HTTP as the traffic type
    • Set the internal port to 80

    Set Environment Variables (Optional)

    Add environment variables to customize behavior:

    VariableValue
    WBO_SAVE_INTERVAL5000
    WBO_MAX_EMIT_COUNT10

    Attach Persistent Volumes

    Add the following volume:

    Mount PathRecommended SizePurpose
    /opt/app/server-data5 GBWhiteboard data persistence

    Deploy Your Application

    Click Deploy to start the build process. Klutch.sh will build the container, attach volumes, and provision an HTTPS certificate.

    Access WBO

    Once deployment completes, access your WBO instance at https://your-app-name.klutch.sh.

Using WBO

Creating a Board

  1. Navigate to your WBO instance
  2. You’ll be redirected to a new board with a unique URL
  3. Share this URL with collaborators
  4. Anyone with the link can join and draw

Creating Named Boards

Access specific board names via URL:

  • https://your-wbo.klutch.sh/boards/meeting-2024-01-15
  • https://your-wbo.klutch.sh/boards/project-brainstorm
  • https://your-wbo.klutch.sh/boards/team-retrospective

Drawing Tools

WBO provides several drawing tools:

  • Pencil: Freehand drawing
  • Line: Straight lines
  • Rectangle: Rectangle shapes
  • Ellipse: Circles and ellipses
  • Text: Add text annotations
  • Eraser: Remove drawings

Tool Options

  • Colors: Select from the color palette
  • Brush Size: Adjust line thickness
  • Opacity: Control transparency

Exporting Boards

  1. Click the export button
  2. Choose format:
    • SVG: Vector format for editing
    • PNG: Raster image for sharing
  3. Download the file

Collaboration Tips

Organizing Boards

Use descriptive board names:

  • /boards/weekly-standup-2024-01-15
  • /boards/feature-design-login
  • /boards/interview-whiteboard-candidate-name

Real-Time Features

  • All changes sync instantly to all participants
  • Cursor positions are shared
  • Multiple people can draw simultaneously

Best Practices

  • Share board links via secure channels
  • Create separate boards for different topics
  • Export important boards for archival
  • Use clear naming conventions

Security Considerations

Board Privacy

  • Anyone with the board URL can view and edit
  • Use complex board names for sensitive content
  • Consider implementing a reverse proxy with authentication for private instances

Rate Limiting

Configure rate limiting to prevent abuse:

ENV WBO_MAX_EMIT_COUNT=5
ENV WBO_MAX_EMIT_WINDOW=2000

Troubleshooting

Drawing Not Syncing

  • Check WebSocket connection in browser dev tools
  • Verify HTTPS is working correctly
  • Clear browser cache and reload

Boards Not Persisting

  • Verify the persistent volume is mounted
  • Check disk space availability
  • Review container logs for save errors

Performance Issues

  • Reduce WBO_SAVE_INTERVAL for more frequent saves
  • Adjust rate limiting for high-traffic boards
  • Consider clearing old boards periodically

Additional Resources

Conclusion

Deploying WBO on Klutch.sh gives you a simple, effective collaborative whiteboard for team brainstorming and visual communication. The combination of WBO’s lightweight design and Klutch.sh’s deployment simplicity means you can quickly set up a self-hosted alternative to commercial whiteboard tools, keeping your collaboration data private and under your control.