Developing native UI applications in Gitpod

Oct 4, 2018

Developing native UI applications in Gitpod

Avatar of Christian Weichel Christian Weichel

Gitpod is a web-based IDE. As such one would think it only works for web-based projects or anything else that does not require a native UI. However, there’s still a plethora of native UI applications around and many of them are here to stay. In this article we’ll go through how to use Gitpod for developing native desktop UI applications.

VSCode in Gitpod

A few days ago Gero introduced Docker builds to Gitpod with which you can bring your own Dockerfile (instead of a pre-built image), and Gitpod will build the image for you. We’ll use that feature to setup a cloud-based development environment for native UI applications.

Hello World

Let’s use Gitpod to write a simple desktop-native application in Go using libui. First, we create a GitHub repo and a little bit of configuration: we need a Dockerfile to install libui’s dependencies (see below), and we need to tell Gitpod to use that Dockerfile.

FROM gitpod/workspace-full-vnc RUN sudo apt-get update && \ sudo apt-get install -y libgtk-3-dev && \ sudo rm -rf /var/lib/apt/lists/*

This Dockerfile uses the gitpod/workspace-full-vnc image which supports the setup necessary to run X11 and VNC in Gitpod. It runs a web-based VNC viewer on port 6080 — during startup, Gitpod will ask you if you want to open this page.

The Hello World UI example running in GitpodThe Hello World UI example running in Gitpod

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 sudo apt-get update && \ sudo apt-get install -y libx11-dev libxkbfile-dev libsecret-1-dev libgconf2–4 libnss3 && \ sudo rm -rf /var/lib/apt/lists/*

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:

How to open noVNC 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. :)

More recent articles

Blog post: Next Chapter for Gitpod

Next Chapter for Gitpod

Our focus has always been to remove friction from the developer experience. Today we announce a new funding round, our new brand, several product milestones, and DevX Conf.

Avatar of Sven Efftinge Avatar of Johannes Landgraf Apr 8, 2021

Blog post: Moving software development to the cloud ☁️

Moving software development to the cloud ☁️

Fully automated development environments will be the standard for professional developers in 5-10 years.

Avatar of Sven Efftinge Avatar of Johannes Landgraf Avatar of Christian Weichel Dec 9, 2020

Blog post: Root, Docker and VS Code

Root, Docker and VS Code

The team has been focussing on shipping some major new features, which mark important milestones on our goal to eliminate all friction.

Avatar of Sven Efftinge Dec 7, 2020