Element (Riot) web for Matrix with Docker and Traefik
Tags: matrix, element, docker, traefik
Published: 2019-01-17 08:16:23

---
title: Element (Riot) web for Matrix  with Docker and Traefik
published: true
tags: matrix,element,docker,traefik
canonical_url: https://jonnev.se/element-web-for-matrix-with-docker-and-traefik/
---

 ![Element web for Matrix with Docker and Traefik](https://jonnev.se/content/images/2019/01/Screenshot-2019-01-12-at-19.08.52.png)

So [Element](https://element.io/) ~~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](https://dev.to/joenas/matrix-homeserver-with-docker-5dfn) 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](https://docs.docker.com/engine/installation/linux/docker-ce/ubuntu/)
- [docker-compose](https://docs.docker.com/compose/install/)
- [Traefik](https://dev.to/joenas/traefik-with-docker-and-lets-encrypt-35if)
- A **domain** to host your Element on\*

⚠️ The domain needs to be **different than your homeserver domain**. Read more [here](https://github.com/vector-im/element-web/blob/17e84bf81574a76c7d5522275585786b115a5e11/README.md#important-security-note). 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](https://m.do.co/c/37d221e6802a) 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](https://github.com/vector-im/element-web/releases) page and update the commands above accordingly if there is a newer release!

## Config

Copy the [sample config](https://github.com/vector-im/element-web/blob/master/config.sample.json) 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

```