Developing native UI applications in Gitpod

Oct 4, 2018

Developing native UI applications in Gitpod

Avatar of csweichel 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


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 articles

Blog post: DevX Conf wrap & distributing $10k of open-source funding

DevX Conf wrap & distributing $10k of open-source funding

As part of Gitpod’s Open-Source Sustainability Fund initiative attendees of DevX Conf were able to decide where $10,000 USD of funds (the profits from DevX Conf plus an additional donation by Gitpod) were to be distributed. Here's the breakdown how the fund was split and our retrospective on running our first-ever conference.

Avatar of christinfrohne Avatar of ghuntley Jun 3, 2021

Blog post: Journey to Site Reliability Engineering at Gitpod

Journey to Site Reliability Engineering at Gitpod

The SRE team at Gitpod is making the first moves to implement Site Reliability Engineering best practices. We document our approach to implement our very first Service Level Objective.

Avatar of arthursens May 23, 2021

Blog post: From Gatsby to Svelte in 3 weeks

From Gatsby to Svelte in 3 weeks

A very tight deadline, a small team and a complete redesign - insights into why we use Svelte.

Avatar of mikenikles May 8, 2021