Demo setup

This page describes how to set things up for a demo.

We assume you‘ve followed the contributor instructions to install prerequisites and fetch the Vanadium repositories, and installed the Syncbase and Node.js profiles using v23 profile install syncbase nodejs. We also assume that you’ve installed the Vanadium Chrome extension.

The commands below assume that the current working directory is $JIRI_ROOT/release/projects/todos.

For detailed explanations of the app setup steps, see README.md.

Single-machine setup

This setup involves a single machine running two instances of Syncbase+Webapp, one for Alice and one for Bob. You'll probably want to open the two Webapp windows side-by-side.

Run these commands once:

DEBUG=1 make build
make creds

Run these commands (each from its own terminal) on each reset:

rm -rf tmp && PORT=5000 ./tools/start_services.sh
PORT=5100 ./tools/start_services.sh

DEBUG=1 PORT=5000 make serve
DEBUG=1 PORT=5100 make serve

Open these urls:

http://<hostname>:5000/?d=syncbase // Alice
http://<hostname>:5100/?d=syncbase // Bob

Two-machine setup

This setup involves two machines, one for Alice and the other for Bob. Each machine runs one instance of Syncbase+Webapp.

Have Alice and Bob do the following on their respective machines.

Run these commands once:

DEBUG=1 make build
make creds

Run these commands (each from its own terminal) on each reset:

rm -rf tmp && PORT=5000 ./tools/start_services.sh

DEBUG=1 PORT=5000 make serve

Open this url:

http://<hostname>:5000/?d=syncbase

Syncing a list

  1. In Alice's window, create list “Groceries”.
  2. Add todo items and tags (as desired).
  3. Click the status button, then type in Bob's email address.
  4. Copy the /share/... part of the url. The hex suffix encodes the syncgroup name, which includes Alice's mount table name.
  5. In Bob's window, replace everything after <hostname>:5000 with the copied /share/... path.
  6. After a second, Bob should see the synced “Groceries” list.
  7. Add, edit, and remove todos and tags to your heart's content and watch sync do its magic.

Note, it's important to use <hostname> urls rather than localhost urls because the web app parses the url from which it was loaded and adds 1 to the port number to determine the local mount table name, which it uses as a prefix for all syncgroup names that it creates. If the host is localhost:5000, the app will use /localhost:5001 as the mount table name, and remote peers will not be able to contact the syncgroup. If we switch to a “predefined, global mount table” model, this will no longer be an issue.