Native UI in Gitpod = X11 + VNC

Gitpod runs on Linux, so we need an X11 server that our UI application can connect to. As we do not have a physical display attached, we’ll use a framebuffer based X server, namely Xvfb. Using x11vnc, we can serve the virtual screen of the X server to a VNC client. There are a few VNC clients that run in the browser out there, but we’ll go with one that’s battle tested: novnc. The combination of Xvfb, x11vnc and novnc is a proven one, and it happens to be the same that e.g. Janitor relies on.

To make this setup work in Gitpod, we first create a Docker image that has the required tools installed, and a small bash script to tie things together. I went ahead and prepared those things in the workspace images repo. Any Gitpod workspace started using the workspace-full-vnc image, has a DISPLAY environment variable set in the .bashrc and comes with a running X11 server. No need for any manual setup.

Let’s go big: running Visual Studio Code in Gitpod

Using this setup, we can build and run Visual Studio Code in Gitpod. VS Code needs a few more libraries than the bare-bones X11 setup we’ve built so far. But again those libraries are easy enough to install in a Dockerfile:

FROM gitpod/workspace-full-vnc RUN apt-get update \

&& apt-get install -y libx11-dev libxkbfile-dev libsecret-1-dev libgconf2–4 libnss3

I added this setup to definitely-gp, so that when you open the VS code repository in Gitpod, it will build the application, and start it. To see and interact with the application, open the noVNC session that’s served on port 6080:

Conclusion

By plugging together a handful of tools we can develop native UI applications in Gitpod, and stay in the browser altogether. Naturally, this comes with a few limitations, e.g. at the moment this is Linux only, so testing on different platforms is not feasible. Also, noVNC disconnects from the VNC server every now and then; reloading noVNC brings it back.

Surprisingly, frame-rate is not one of those limitations: you could open a browser inside a Gitpod and watch YouTube videos; it’s best you pick one without sound, though. :)