Element (Riot) web for Matrix with Docker and Traefik

So Element ~~Riot~~ is the "glossy" web client for Matrix that I prefer to use, at least when not using the desktop one. I've previously written a guide on how to set up your own homeserver and now I thought I'd share how I deploy my Element instance.

Prerequisites

As always this guide assumes some general knowledge of Linux and also that you have a server available with these services installed:

docker
docker-compose
Traefik
A domain to host your Element on*

⚠️ The domain needs to be different than your homeserver domain. Read more here. Using a subdomain should be fine, ie if your homeserver is at example.com you could use element.example.com.

If you don't want to use Traefik you could use any other reverse proxy to forward the traffic to the docker container. Be sure to add SSL/TLS to that proxy with for example Let's Encrypt!

If you're setting up a new VPS feel free to use my referral link at Digital Ocean to get $10 for your server 😊

Setup

We'll create a directory for Element to live in and some supporting files.

mkdir -p /opt/element 

# If you had to use sudo above, set the permissions to your user to make life easier
sudo chmod -R $USER:$USER -R /opt/element

mkdir /opt/element/config
mkdir /opt/element/versions
touch /opt/element/docker-compose.yml

docker-compose, with Traefik

Let's start with our docker-compose. Scroll down a bit for an example not using Traefik.

nano /opt/element/docker-compose.yml


version: '2'

services:
  web:
    image: nginx:1.12-alpine
    container_name: element
    restart: unless-stopped
    networks:
      - web
    labels:
      - "traefik.enable=true"
      - "traefik.frontend.rule=Host:element.example.com"
      - "traefik.port=80"
      - "traefik.docker.network=web"
    volumes:
      - ./element-web:/usr/share/nginx/html/
      - ./config/config.json:/usr/share/nginx/html/config.json

networks:
  web:
    external: true

☝️ Remember to replace element.example.com in traefik.frontend.rule and change the name of the external network if needed.

No Traefik

Use or modify this if using another reverse proxy.

version: '2'

services:
  web:
    image: nginx:1.12-alpine
    container_name: element
    restart: unless-stopped
    ports:
      - "127.0.0.1:8080:80"
    volumes:
      - ./element-web:/usr/share/nginx/html/
      - ./config/config.json:/usr/share/nginx/html/config.json

Fetch latest Element version

Now we fetch the tarball of the lastest Element release, extract it and put it in the versions folder. Then we create symlink to be able to update the version in an easy way.

wget -qO- https://github.com/vector-im/element-web/releases/download/v0.17.8/riot-v0.17.8.tar.gz | tar xvz -C /opt/element/versions
ln -s /opt/element/versions/riot-v0.17.8 /opt/element/element-web

☝️ Be sure to check the releases page and update the commands above accordingly if there is a newer release!

Config

Copy the sample config and edit it to your needs.

cp element-web/riot-v0.17.8/config.sample.json /opt/element/config/config.json
nano /opt/element/config/config.json

I only changed these values:

{
    "default_hs_url": "https://matrix.example.com",
    "brand": "Custom Brand",
    "roomDirectory": {
        "servers": [
            "matrix.example.com",
            "matrix.org"
        ]
    }
}

Run it!

And we're good to go. Run docker-compose up -d and you should be able to access your domain and login 😃

Updating

To update to a new Element version check the releases page, fetch the new version by modifying these commands. Then link the new release, stop and start your container again.

wget -qO- https://github.com/vector-im/element-web/releases/download/v0.17.8/VERSION.tar.gz | tar xvz -C /opt/element/versions
docker-compose stop
rm element-web
ln -s /opt/element/versions/VERSION /opt/element/element-web
docker-compose up -d

Blog