Skip to main content

WBO - Online Whiteborad with Live Sync and Collaborative Drawing

As we moved from office work to remote work as a more regular part of life, I found that the lack of idea creation via something like a whiteboard in a cubicle, conference room, or office was palpable. It was definitely something I used on a day to day basis to brain-storm, understand, and think through problems and solutions.

I have missed it greatly, and while there were some educational software options that had some functionality, and some fairly expensive paid options, I just didn't really see much in the Open Source space at the time.  I've recently come across several, and found WBO to be very simple to use, adn simple to get running as a self-hosted application.

You can find the GitHub repo here: https://github.com/lovasoa/whitebophir

Today, I want to help you setup WBO in Docker using Docker-Compose.  In my video, I also show you how to set it up for public internet use using a reverse proxy, and LetsEncrypt.

What You'll Need

  • Docker and Docker-Compose
  • (optional) NGinX Proxy Manager (or a reverse proxy of your liking).
  • about 10 minutes of your time.

Installation

Installing Docker-CE and Docker-Compose

If you already have Docker and Docker-Compose installed, feel free to skip down to the next section.

You may want to install some pre-requisite softwre as well:

Debian / Ubuntu

sudo apt install git curl wget

Fedora / Redhat

dnf install git curl wget

Arch

sudo pacman -Sy git curl wget

You can easily install Docker-CE, Docker-Compose, Portainer-CE, and NGinX Proxy manager by using this quick install script I created and maintain on Github.  Just use the command:

wget https://gitlab.com/bmcgonag/docker_installs/-/raw/main/install_docker_nproxyman.sh

To download the script to your desired host.

Change the permissios to make the script executable:

chmod +x ./install_docker_nproxyman.sh

and then run the script with the command:

./install_docker_nproxyman.sh

When run, the script will prompt you to select your host operating system, then will ask you which bits of software you want to install.

Simply enter 'y' for each thing you want to install.

For instance, you may want to answer 'y' to NGinX Proxy Manager, and Portainer-CE if you don't already use these in your system.

At some point, you'll be asked for your super user (sudo) password as well.

Allow the script to complete installation.

At this point, you might want to log out and back in, as this will allow you to use the docker and docker-compose commands without the need of sudo in front of them.

Installing WBO

With Docker and Docker-Compose installed, we can turn our attention to installing WBO.  First, let's create a folder for our docker install of WBO.

mkdir -p docker/wbo

Now, move indo that folder:

cd docker/wbo

Next, we need to create 2 things.  In my video I made a mistake by not creating a folder used in the mapping, and then setting permissions before the folder was created by docker.  So, instead, here we'll create that folder now.

mkdir wbo-boards

Now, we''ll chnage the permissions on the wbo folder to what's needed for the application to run properly.

cd ..

sudo chown -R 1000:1000 wbo

Now, we move back into the wbo folder, and create a file called "docker-compose.yml"

cd wbo

nano docker-compose.yml

Next, copy the yaml code block below, and paste it into your "docker-compose.yml" file.

version: '3.3'
services:
    wbo:
        ports:
            - '5001:80'
        volumes:
            - './wbo-boards:/opt/app/server-data'
        image: 'lovasoa/wbo:latest'

In the above file, feel free to change the host port of 5001 to any port that is open on your host machine.   If 5001 isn't taken by another application, then just leave it as is.

Save the file with CTRL + O, press Enter to confirm, and then exit the nano text editor with CTRL + X.

Now we can run our commands to 1) bring up our application, and keep it running int he background - docker-compose up -d, and 2) look at the logs after the application is up and running to make sure we don't see any unexpected errors - docker-compose logs -f.

docker-compose up -d && docker-compose logs -f

Once the application is done pulling down, and appears to be up and running, open your favorite browser, and go to your host machine's IP address at port 5001 (unless you changed the port in the docker-compose file, in which case you'll use that port instead).

I went to http://192.168.10.42:5001 since this was the IP of my host machine on my local network.

If all went well, you should see the wbo start page.  You can now type a simple shared page name in the blank, and click 'Go'.  Once on your drawing page, copy the URL from the URL bar in the browser, and open an incognito browser window.  Paste the URL there, and you should be able to draw in one browser window, and see the changes in the other window, and vice-versa.

If you only need WBO on your local network, you're done. Just share the URLs you make with anyone on your local network, and you can now work collaboratively.

If you need to have / provide access outside your local network, then you'll want to continue by setting up:

  • A domain name you own
  • an A-Record for that domain name pointint to your public IP address.

I use an A record which points "*" to my public IP address (*.routemehome.org).  This way I can create sub-domains on-the-fly and just put them in my NGinX Proxy Manger and get them to resolve.

  • NGinX Proxy Manager (or a proxy software you prefer).
  • Ports forwarded through your firewall from the WAN (internet) to your LAN (Local Network) for ports 80 and 443.  Forward those ports to the host machine inside your network where you run your proxy software.

Finally, for help with setting up NGinX Proxy Manager, check out the video at the top of the page.  I have time markers for the video already in place.

Support my Channel and Content

Support my Channel and ongoing efforts through Patreon:
https://www.patreon.com/bePatron?u=234177

Back to top