FraBle/zuckerguss

The icing on top of guglhupf

Photo by Goran Horvat

zuckerguss

zuckerguss (German for "icing") is the frontend for guglhupf — the Raspberry Pi-powered dashcam control station. It's built on top of react and uses the grommet component library. It runs together with guglhupf behind an nginx reverse proxy.

Prerequisites

The following tools should be installed:

Tool	Link	Usage
node	docs	JavaScript runtime
yarn	docs	Package manager
serve	repo	Static file server

Running zuckerguss

The following steps assume that the frontend gets deployed alongside guglhupf on a Raspberry Pi.

1. Check out the zuckerguss repo.

   cd /usr/local/lib/
   git clone git@github.com:FraBle/zuckerguss.git

2. Create a production build.

   cd /usr/local/lib/zuckerguss
   yarn install
   yarn build

3. Start server using serve.

   serve --no-clipboard --single --listen 5000 /usr/local/lib/zuckerguss/build

4. Open your browser and browse to http://<rpi-ip>:5000.

Resources

Registering zuckerguss with systemd

1. Create a systemd entry.

   sudo nano /lib/systemd/system/zuckerguss.service:

   [Unit]
   Description=zuckerguss frontend for guglhupf
   After=network.target
   
   [Service]
   Type=simple
   ExecStart=serve --no-clipboard --single --listen 5000 /usr/local/lib/zuckerguss/build
   Restart=always
   RestartSec=1
   StartLimitInterval=0
   
   [Install]
   WantedBy=multi-user.target

2. Enable and start zuckerguss service in systemd.

   sudo systemctl daemon-reload
   sudo systemctl enable zuckerguss.service
   sudo systemctl start zuckerguss.service

3. Open your browser and browse to http://<rpi-ip>:5000.

Running zuckerguss behind nginx

Check out the guglhupf repo on the nginx setup together with guglhupf.

Creating a desktop shortcut

The following steps assume that chromium-browser is installed.

1. Open your terminal and navigate to your Desktop directory.

2. Create a .desktop file.

   nano guglhupf.desktop:

   [Desktop Entry]
   Version=0.1.0
   Name=guglhupf
   Exec=chromium-browser --start-fullscreen http://localhost/ %U
   Terminal=false
   X-MultipleArgs=false
   Type=Application
   Icon=/usr/local/lib/zuckerguss/public/android-chrome-192x192.png
   Categories=Network;WebBrowser;
   MimeType=text/html;text/xml;application/xhtml_xml;x-scheme-handler/http;x-scheme-handler/https;
   StartupNotify=true
   Actions=NewWindow;Incognito;TempProfile;
   X-AppInstall-Package=chromium-browser

Credits

Favicon made by freepik.com.