Tauri on Raspberry Pi

Published:

Back

Tauri is a framework to build applications in Rust with a graphical user interface. The graphical frontend is designed using web technologies like HTML, CSS and Javascript/Typescript. I have some experience using Tauri for the development of a desktop application. For a home automation project I was looking to developing a GUI that can run on a Raspberry Pi 4 with a 7” Touch Display. Perhaps Tauri can be used for this as well?

In this article I will describe my experience setting up the basics for this home automation controller project.

A couple of years ago I started the development of a home automation controller for the Raspberry Pi using Qt with C++ and QML. I got it to work, but designing a nice UI in QML was quite a hassle. I hope that using Tauri it is a better development experience.

Getting started

I started by setting up a new Tauri app. I use VS Code with Rust for the backend and Svelte as framework for the frontend. On my Windows systems this was set up in a couple of minutes, but how do I now get it to run on the Raspberry Pi ? I need some kind of cross crompiler for Linux ARM64, but how do I achieve this on a Windows PC? I decided to experiment with the Development Environment feature in Visual Studio Code. Using this feature you can use a Docker container to compile your code and mount the sourcecode from your development system in this container.

I first installed Docker Desktop and then installed the VS Code plugin for Dev Containers. I then wrote a Dockerfile for the Docker container that I was going to use for the cross compilation of the Tauri app.

After some tweaking I got to this Dockerfile with which I was able to successfully compile the Tauri app . I then copied the binary to my Raspberry Pi (where I still needed to install a few libraries) and then my application was running!

FROM ubuntu:jammy
#add arm64 repo's
COPY sources.list /etc/apt/sources.list
RUN dpkg --add-architecture arm64
RUN apt-get update && apt-get upgrade -y
#add GNU compiler for aarch64 (cross compiler for arm64)
RUN apt-get install gcc-aarch64-linux-gnu binutils-aarch64-linux-gnu build-essential dpkg-dev -y
#configure pkg-config (Linux helper tool to find libraries) so it finds the aarch64 libraries instead those of the host system
ENV PKG_CONFIG_SYSROOT_DIR=/usr/aarch64-linux-gnu/
ENV PKG_CONFIG_PATH=/usr/lib/aarch64-linux-gnu/pkgconfig
#install Node.js for the frontend compilation
RUN apt-get install curl -y
RUN groupadd --gid 1000 node 
  && useradd --uid 1000 --gid node --shell /bin/bash --create-home node
ENV NODE_VERSION 23.5.0
RUN ARCH= && dpkgArch="$(dpkg --print-architecture)" 
  && case "${dpkgArch##*-}" in 
    amd64) ARCH='x64';; 
    ppc64el) ARCH='ppc64le';; 
    s390x) ARCH='s390x';; 
    arm64) ARCH='arm64';; 
    armhf) ARCH='armv7l';; 
    i386) ARCH='x86';; 
    *) echo "unsupported architecture"; exit 1 ;; 
  esac 
  # use pre-existing gpg directory, see https://github.com/nodejs/docker-node/pull/1895#issuecomment-1550389150
  && export GNUPGHOME="$(mktemp -d)" 
  # gpg keys listed at https://github.com/nodejs/node#release-keys
  && set -ex 
  && for key in 
    C0D6248439F1D5604AAFFB4021D900FFDB233756 
    DD792F5973C6DE52C432CBDAC77ABFA00DDBF2B7 
    CC68F5A3106FF448322E48ED27F5E38D5B0A215F 
    8FCCA13FEF1D0C2E91008E09770F7A9A5AE15600 
    890C08DB8579162FEE0DF9DB8BEAB4DFCF555EF4 
    C82FA3AE1CBEDC6BE46B9360C43CEC45C17AB93C 
    108F52B48DB57BB0CC439B2997B01419BD92F80A 
    A363A499291CBBC940DD62E41F10027AF002F8B0 
  ; do 
      gpg --batch --keyserver hkps://keys.openpgp.org --recv-keys "$key" || 
      gpg --batch --keyserver keyserver.ubuntu.com --recv-keys "$key" ; 
  done 
  && curl -fsSLO --compressed "https://nodejs.org/dist/v$NODE_VERSION/node-v$NODE_VERSION-linux-$ARCH.tar.xz" 
  && curl -fsSLO --compressed "https://nodejs.org/dist/v$NODE_VERSION/SHASUMS256.txt.asc" 
  && gpg --batch --decrypt --output SHASUMS256.txt SHASUMS256.txt.asc 
  && gpgconf --kill all 
  && rm -rf "$GNUPGHOME" 
  && grep " node-v$NODE_VERSION-linux-$ARCH.tar.xz$" SHASUMS256.txt | sha256sum -c - 
  && tar -xJf "node-v$NODE_VERSION-linux-$ARCH.tar.xz" -C /usr/local --strip-components=1 --no-same-owner 
  && rm "node-v$NODE_VERSION-linux-$ARCH.tar.xz" SHASUMS256.txt.asc SHASUMS256.txt 
  && ln -s /usr/local/bin/node /usr/local/bin/nodejs 
  && node --version 
  && npm --version
#install rust
RUN curl https://sh.rustup.rs -sSf | bash -s -- -y
ENV PATH="/root/.cargo/bin:${PATH}"
#install Tauri CLI
RUN apt-get install -y liblzma-dev
RUN cargo install tauri-cli
#add Rust target for aarch64 (=arm64)
RUN rustup target add aarch64-unknown-linux-gnu
#install the Tauri dependencies 
RUN apt-get install libwebkit2gtk-4.1-dev:arm64 libgtk-3-dev:arm64 libssl-dev:arm64 -y
#add rsync and ssh to copy the compiled executable to the Raspberry Pi
RUN apt-get install rsync ssh -y

Start on boot

The Raspberry Pi is running Raspberry OS, which is based on Debian Linux. In order to start my app automatically on bootup I used the autostart mechanism: I created a new file: /home/jeroen/.config/autostart/homecontroller.desktop with the following contents

[Desktop Entry]
Type=Application
Name=HomeController
Exec=/home/jeroen/homecontroller

Then I set the Raspberry Pi to automatically log in to my user. After login the homecontroller app will automatically start.

Fullscreen mode

Normally Tauri apps run in a window like a normal desktop application, but for this usecase I would like it to run as a fullscreen application, so I can use all the available screen real estate for my app. There is functionality for full screen mode available in the Javascript Tauri API, so I decided to use this. For now manually using a button, as you can see in the movie.

Future

Currently the GUI only shows the current time, but I hope to control my Sonos music system with this app in the near future. It would also be nice to use a custom Linux image using Yocto/bitbake instead of the standard Raspberry Pi OS to speed up the boot and have a cleaner look, but that is not top priority. Stay tuned!