Search code examples
dockerx11x11-forwardingvscode-devcontainertauri

Tauri Development in VS Code Dev Container

I am trying to setup a VS Code Dev Container environment for Tauri development. I am using X-Forwarding to display the app on the container's host system. When I try to start the app via yarn tauri dev, the host's X11 server displays the app but with a black screen. Withing the container, I am getting the following warnings & error:

(process:3623): Gtk-WARNING **: 20:01:34.585: Locale not supported by C library.
        Using the fallback 'C' locale.
event - compiled client and server successfully in 9.3s (176 modules)

(process:3665): Gtk-WARNING **: 20:01:40.390: Locale not supported by C library.
        Using the fallback 'C' locale.

(WebKitWebProcess:3665): Gdk-ERROR **: 20:01:42.784: The program 'WebKitWebProcess' received an X Window System error.
This probably reflects a bug in the program.
The error was 'GLXBadFBConfig'.
  (Details: serial 173 error_code 163 request_code 149 (GLX) minor_code 21)
  (Note to programmers: normally, X errors are reported asynchronously;
   that is, you will receive the error a while after causing it.
   To debug your program, run it with the GDK_SYNCHRONIZE environment
   variable to change this behavior. You can then get a meaningful
   backtrace from your debugger if you break on the gdk_x_error() function.)

This is the Dockerfile I am using

#FROM debian:bullseye
FROM nvidia/opengl:1.0-glvnd-runtime-ubuntu20.04

ENV DEBIAN_FRONTEND=noninteractive

# install dependencies from package manager
RUN apt update && \
    apt install -y libwebkit2gtk-4.0-dev \
    build-essential \
    curl \
    wget \
    libssl-dev \
    libgtk-3-dev \
    libayatana-appindicator3-dev \
    librsvg2-dev

# install rust
RUN curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh -s -- -y

# install nodejs, npm & yarn
RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash - && apt-get install -y nodejs
RUN npm install -g yarn

# create 'dev' user
RUN mkdir /home/dev
RUN useradd -u 1000 dev && chown -R dev /home/dev

And this is the devcontainer.json

{
    "name": "Tauri Dev Environment",
    "dockerFile": "Dockerfile",
  
    "settings": {
      "terminal.integrated.shell.linux": "/bin/bash"
    },
    "extensions": [
      "esbenp.prettier-vscode",
      "dbaeumer.vscode-eslint",
      "rust-lang.rust",
      "be5invis.toml"
    ],
    
    "remoteEnv": {
        "DISPLAY": "host.docker.internal:0"
    },

    "runArgs": ["--gpus=all"],
  
    "workspaceMount": "source=${localWorkspaceFolder},target=/home/dev/workspace/${localWorkspaceFolderBasename},type=bind",
    "workspaceFolder": "/home/dev/workspace/${localWorkspaceFolderBasename}",
}

As you can see in the Dockerfile, first I tried with a Debian base image. Then, I thought the issue could be fixed by accessing the GPU of my system via a Nvidia image and corresponding configuration. However, both attempts led to the same result. It might be worth noticing that via the "Debian-based" image, I am able to successfully forward browser UI from the container.

Update: The problem only exists when I run the host's X11 server in "Multiple windows" mode. When I run it in "Fullscreen" or "Single Window" mode, the Tauri app is displayed properly. This also works with the simple Debian base image without GPU access. The following image shows the display settings that work and the one that does not. Does anyone know why it does not work in the "Multiple windows" mode? enter image description here

Solution

  • This appears to be a problem with the X11 server. I was using VcXsrv before. When I use Xming, the "Multiple Windows" option is working properly. I want to highlight again, that the Nvidia base image and GPU access is not required.