diff --git a/host_vars/srv02 b/host_vars/srv02
index 37a017f..97c415a 100644
--- a/host_vars/srv02
+++ b/host_vars/srv02
@@ -2,3 +2,5 @@ basics_autoupdate_origins:
   - o=Node Source,n=${distro_codename}
   - o=Prosody,n=${distro_codename}
   - o=TorProject,n=${distro_codename}
+hopglass_frontend_tls_crt: /etc/letsencrypt/live/hopglass.hamburg.freifunk.net/fullchain.pem
+hopglass_frontend_tls_key: /etc/letsencrypt/live/hopglass.hamburg.freifunk.net/privkey.pem
diff --git a/production b/production
index 662ad8d..05513d0 100644
--- a/production
+++ b/production
@@ -7,6 +7,9 @@ srv04 ansible_host=srv04.hamburg.freifunk.net
 [certsync]
 srv03
 
+[hopglass-frontend]
+srv02
+
 [updates]
 srv01
 srv03
diff --git a/roles/hopglass-frontend/defaults/main.yml b/roles/hopglass-frontend/defaults/main.yml
new file mode 100644
index 0000000..775bd1c
--- /dev/null
+++ b/roles/hopglass-frontend/defaults/main.yml
@@ -0,0 +1,3 @@
+---
+hopglass_frontend_path: /opt/hopglass-frontend
+nodejs_version: node_8.x
diff --git a/roles/hopglass-frontend/tasks/install-hopglass.yml b/roles/hopglass-frontend/tasks/install-hopglass.yml
new file mode 100644
index 0000000..3493ac8
--- /dev/null
+++ b/roles/hopglass-frontend/tasks/install-hopglass.yml
@@ -0,0 +1,41 @@
+---
+- name: clone hopglass
+  git:
+    repo: "https://github.com/hopglass/hopglass"
+    dest: "{{ hopglass_frontend_path }}"
+    accept_hostkey: yes
+    update: no
+
+- name: create build directory
+  file:
+    path: "{{ hopglass_frontend_path }}/build"
+    state: directory
+
+- name: template config.json
+  template:
+    src: hopglass-config.j2
+    dest: "{{ hopglass_frontend_path }}/build/config.json"
+
+- name: template nginx site
+  template:
+    src: nginx-site.j2
+    dest: /etc/nginx/conf.d/hopglass.conf
+  register: nginx
+
+- name: reload nginx
+  service:
+    name: nginx
+    state: reloaded
+  when: nginx.changed
+
+- name: template make-hopglass-frontend
+  template:
+    src: make-hopglass-frontend.j2
+    dest: /usr/local/bin/make-hopglass-frontend
+    mode: 0755
+  register: make
+
+- name: show usage information
+  debug:
+    msg: ">>> Because Node.js is terrible, please run make-hopglass-frontend manually. <<<"
+  when: make.changed
diff --git a/roles/hopglass-frontend/tasks/install-nodejs.yml b/roles/hopglass-frontend/tasks/install-nodejs.yml
new file mode 100644
index 0000000..f608748
--- /dev/null
+++ b/roles/hopglass-frontend/tasks/install-nodejs.yml
@@ -0,0 +1,33 @@
+---
+- name: check for npm
+  find:
+    paths: [/bin, /usr/bin, /usr/local/bin]
+    patterns: npm
+    file_type: any
+  register: npm
+
+- name: install APT HTTPS transport
+  apt:
+    name: apt-transport-https
+    cache_valid_time: 86400
+  when: npm.matched == 0
+
+- name: add NodeSource signing key
+  apt_key:
+    url: https://deb.nodesource.com/gpgkey/nodesource.gpg.key
+    id: 9FD3B784BC1C6FC31A8A0A1C1655A0AB68576280
+  when: npm.matched == 0
+
+- name: add NodeSource repository
+  apt_repository:
+    repo: "deb https://deb.nodesource.com/{{ nodejs_version }} {{ ansible_lsb.codename }} main"
+    filename: nodesource
+  when: npm.matched == 0
+
+- name: install Node.js
+  apt:
+    name:
+      - build-essential
+      - nodejs
+    cache_valid_time: 86400
+  when: npm.matched == 0
diff --git a/roles/hopglass-frontend/tasks/main.yml b/roles/hopglass-frontend/tasks/main.yml
new file mode 100644
index 0000000..52c23cb
--- /dev/null
+++ b/roles/hopglass-frontend/tasks/main.yml
@@ -0,0 +1,5 @@
+---
+- include: install-nodejs.yml
+  tags: nodejs
+- include: install-hopglass.yml
+  tags: hopglass-frontend
diff --git a/roles/hopglass-frontend/templates/hopglass-config.j2 b/roles/hopglass-frontend/templates/hopglass-config.j2
new file mode 100644
index 0000000..d9d727d
--- /dev/null
+++ b/roles/hopglass-frontend/templates/hopglass-config.j2
@@ -0,0 +1,49 @@
+{
+    "dataPath": "https://map.hamburg.freifunk.net/hhneu/",
+    "siteName": "Freifunk Hamburg",
+    "mapSigmaScale": 1.1,
+    "showContact": false,
+    "maxAge": 30,
+    "mapLayers": [
+        {
+            "name": "OpenStreetMap",
+            "url": "https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png",
+            "config": {
+                "maxZoom": 18,
+                "attribution": "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>"
+            }
+        },
+        {
+            "name": "Satellitenbild",
+            "url": "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+            "config": {
+                "attribution": "Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
+            }
+        }
+    ],
+    "nodeInfos": [
+        {
+            "name": "Clientstatistik",
+            "href": "https://statistik.hamburg.freifunk.net/dashboard/db/freifunk-knoteninfo-knoten-id?var-region=ffhh&var-knoten={NODE_ID}",
+            "thumbnail": "https://statistik.hamburg.freifunk.net/render/dashboard-solo/db/freifunk-knoteninfo-knoten-id?panelId=1&var-region=ffhh&var-knoten={NODE_ID}&theme=light&width=530&height=332&from=now-3d",
+            "caption": "Verbundene Clients in den letzten 3 Tage an Knoten {NODE_ID}"
+        }
+    ],
+    "globalInfos": [
+        {
+            "name": "Clientstatistik (gesamt)",
+            "href": "https://statistik.hamburg.freifunk.net/dashboard/db/freifunk-ubersicht?var-region=ffhh",
+            "thumbnail": "https://statistik.hamburg.freifunk.net/render/dashboard-solo/db/freifunk-ubersicht?panelId=1&var-region=ffhh&theme=light&width=530&height=332&from=now-3d",
+            "caption": "Verbundene Clients in den letzten 3 Tagen"
+        }
+    ],
+    "linkInfos": [],
+    "siteNames": [
+        { "site": "ffhh", "name": "Hamburg" },
+        { "site": "ffhh-nowe", "name": "Hamburg-NordWest" },
+        { "site": "ffhh-ost", "name": "Hamburg-Ost" },
+        { "site": "ffhh-sued", "name": "Hamburg-Sued" },
+        { "site": "ffhh-west", "name": "Hamburg-West" }
+    ],
+    "hwImg": []
+}
diff --git a/roles/hopglass-frontend/templates/make-hopglass-frontend.j2 b/roles/hopglass-frontend/templates/make-hopglass-frontend.j2
new file mode 100644
index 0000000..259e8f7
--- /dev/null
+++ b/roles/hopglass-frontend/templates/make-hopglass-frontend.j2
@@ -0,0 +1,8 @@
+#!/bin/bash
+
+PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
+
+cd {{ hopglass_frontend_path }}
+npm install
+npm install grunt-cli
+node_modules/.bin/grunt
diff --git a/roles/hopglass-frontend/templates/nginx-site.j2 b/roles/hopglass-frontend/templates/nginx-site.j2
new file mode 100644
index 0000000..b5694c8
--- /dev/null
+++ b/roles/hopglass-frontend/templates/nginx-site.j2
@@ -0,0 +1,35 @@
+{% if hopglass_frontend_tls_crt is defined %}
+server {
+    server_name hopglass.hamburg.freifunk.net;
+
+    listen 443 ssl;
+    listen [::]:443 ssl;
+    ssl_certificate {{ hopglass_frontend_tls_crt }};
+    ssl_certificate_key {{ hopglass_frontend_tls_key }};
+
+    include include/no_logging.conf;
+    include include/ssl_common_headers.conf;
+
+    gzip on;
+    gzip_types application/json;
+    root {{ hopglass_frontend_path }}/build;
+}
+
+{% endif %}
+server {
+    server_name hopglass.hamburg.freifunk.net;
+
+    listen 80;
+    listen [::]:80;
+
+    include include/letsencrypt.conf;
+    include include/no_logging.conf;
+{% if hopglass_frontend_tls_crt is defined %}
+    include include/ssl.rewrite;
+{% else %}
+
+    gzip on;
+    gzip_types application/json;
+    root {{ hopglass_frontend_path }}/build;
+{% endif %}
+}
diff --git a/services.yml b/services.yml
index 4308816..6822986 100644
--- a/services.yml
+++ b/services.yml
@@ -1,4 +1,8 @@
 ---
+- hosts: hopglass-frontend
+  roles:
+    - hopglass-frontend
+
 - hosts: services
   roles:
     - ntp-server