A visual explorer for the biological Tree of Life

A visual explorer for the biological Tree of Life


A visual explorer for the biological Tree of Life

A visual explorer for the biological Tree of Life.
Available online.

Project Overview

The UI is largely coded in Typescript, using the Vue
framework, with Vite as the build tool. Much of
the styling is done using Tailwind. Packages
are managed using npm and Node.js.

On the server side, tree data is served and generated using Python, with
packages managed using Pip. Tree data is
stored using Sqlite.


Project Level

  • package.json: Contains npm project information, such as package dependencies.
  • package-lock.json: Auto-generated by npm. Used for replicable installations.
  • LICENCE.txt: This project’s license (MIT).

Client & Server

  • src: Contains most of the client-side code.
  • index.html: Holds code for the main page, into which code from ‘src’ will be included.
  • public: Contains files to be copied unchanged in the production-build of the UI.
  • backend: Contains code for the server, and for generating tree-of-life data.


  • vite.config.js: For configuring Vite.
  • tailwind.config.js: For configuring Tailwind.
  • postcss.config.js: For configuring Tailwind.
  • tsconfig.json: For configuring Typescript.


  • .gitignore: Lists files to be ignored if using Git.
  • DEPLOY.md: Instructions for deployment on an Apache server on Ubuntu.
  • prebuild.sh: Bash script for automating some steps of deployment.

Setup Instructions

Note: Running your own version of the client and server should be straightforward,
but generating the database that they use takes a long time. More details are
in backend/tolData/README.md.

Client Side

  1. If you don’t have npm or Node.js installed, you can download a Node installer from
    https://nodejs.org/en/download, which includes npm. This project was coded using version 16.
  2. In this directory, run the command npm install, which install packages listed in
    package.json, creating a node_modules directory to hold them.
  3. Running npm run dev starts the dev server.

Server Side

  1. If you don’t have Python 3 installed, see https://www.python.org/downloads.
    The package manager Pip is included.

  2. The database used by the server is generated using scripts in backend/data/.
    See it’s README for instructions. You’ll likely need to install a few
    packages using Pip.

  3. The dev server is started by running ./server.py in the backend/ directory.
    To run it, you’ll need to install jsonpickle. This can be done using
    python -m pip install jsonpickle.

    If you want to keep the installed package separate from your system’s packages,
    it’s common practice to use venv.

Running Tilo

  1. In backend/, run ./server.py, which starts a basic HTTP server that provides
    tree-of-life data on port 8000.
  2. In this directory, or somewhere in src/, run npm run dev. This starts a dev server that
    provides Tilo’s user interface on port 3000.
  3. Open a web browser, and navigate to http://localhost:3000.

Deploying the Website

This is significantly dependent on the server platform. DEPLOY.md contains
instructions for deployment on an Apache server on an Ubuntu system.


Tilo is licensed under the MIT Licence.


View Github

Leave a Reply

Your email address will not be published.