First Steps

After logging in, you do not call the GitHub URL of your project directly, but add a prefix (e.g., https://gitpod.io/#<GitHub Project URL> (Figure 1). It is even easier with a browser extension for Chrome or Firefox, which displays a Gitpod button on GitHub pages (Figure 2). Direct links to the add-ons can be found in the online documentation [5]. The extensions can be installed in the browsers in the usual way.

Figure 1: If you want to open a GitHub project with Gitpod, just attach the project URL.

Figure 2: Browser extensions show a Gitpod button on GitHub.

The example in Figure 1 uses an arbitrary public GitHub repository. The user does not have to be the repository owner. Gitpod works with any project to which you have access and that fits your pricing model. When the URL is called, Gitpod creates a workspace and opens the README file, if available.

The setup happens surprisingly fast. The standard workspace automatically supports a variety of common programming languages. Visually, it is divided into three areas: The project's directory structure appears on the left, and the right-hand side shares an editor window at the top and a terminal at the bottom. In addition to the default dark theme, an inverse bright variant is also available.

Workspaces

Workspaces are a central term in the Gitpod world. Technically they are Docker containers that form the working environment for programming and testing. Gitpod automatically creates workspaces and stops them after 30 minutes of inactivity – or five minutes after you quit the browser. Because active workspaces burden your account, this automatism also saves resources. From the avatar at the top right, click the Stop Workspace menu item to trigger this process manually.

In the background, Gitpod automatically saves changes (e.g., code edits or configuration file updates) to the workspace. They do not end up on GitHub without an explicit commit, however, and Gitpod never deletes stopped workspaces. The dashboard, which you can also access from the menu, displays a list of all available workspaces (Figure 3). Old workspaces can be restarted, archived, or explicitly and irreversibly deleted here.

Figure 3: Gitpod lists workspaces on the dashboard, but it only deletes them on request.

Workspaces are based on Docker. In contrast to Docker's philosophy of one Docker image per active application, a workspace includes all the services you need. For example, if a program offers a web interface, Gitpod opens the corresponding port to the Internet, if required. Details can be found in the documentation [5].

Editor

Instead of programming a new editor, the Gitpod makers simply use Theia, which is the web version of Visual Studio Code (VS Code) [6]. If you are reminded of Microsoft's classic integrated development environment (IDE), you're not completely wrong, because the editor, which was developed entirely as open source, originally came from Microsoft. I even prefer VS Code myself, now, despite being a decade-long XEmacs user.

One killer feature in VS Code is the ability to install any of numerous plugins in seconds at the touch of a button, which, however, is not yet possible with Theia, although the Gitpod developers are working hard on the implementation.

Having a web editor and local editor that are similar in look and feel is useful. Theia (or VS Code) offers extensive configuration options. Key mappings in particular can be adapted to suit your preferences.

The editor comes with syntax and style checks for many languages, as well as context-sensitive help for functions (Figure 4). At the touch of a button, Theia completes the code or inserts a code pattern. All in all, this significantly improves the quality of the code as you type.

Figure 4: The editor has context-sensitive help.