GitPod: Web IDE for GitHub

Recently I stumbled upon GitPod, a Web based IDE for GitHub projects. GitPod is based on Theia, an extensible, VS Code-powered IDE for browser and desktop. While playing around with GitPod, I got the feeling: This is awesome! For me there are several use cases, but the most important one was: Could I use GitPod as tool for giving workshops with lots of coding exercises. As an example I tried out my Web App Tutorial that I regularly give at conferences. Usually I prepare a VM using Vagrant, containing all the labs, the tooling, etc., but those VMs are around 6 GB of data and need a decent notebook so that everything runs smoothly. And in every training there are notebook configurations having trouble running these VMs. What if I just could say: Bring your favorite Web browser, we will do all labs and running all tests in the browser? That’s what I wanted to try out with GitPod. Here is my setup: During the workshop we develop a small microservice with an Angular 7 based frontend and a Spring Boot 2.0.6 based backend. How easy would it be to compile and start the backend in GitPod, start the frontend, see the result, making a change to the frontend Typescript code and immediately see the result in a browser window? Additionally I wanted to run Headless-Chrome based tests on the frontend code. This was actually pretty easy with GitPod. I only had to create a GitPod configuration file in my Git repo:

The first statement tells GitPod to run npm install which is needed to install all Node.js modules. To run the tests in Chrome I had to set the CHROME_BIN environment variable to point to Chromium. The last thing was to expose the ports 8080 for the backend, to browse the REST API and 4200 for the frontend development server to have fast turnarounds during frontend development. The picture shows how this looks in GitPod:

Now the new frontend should immediately re-compile and you should see the change in the UI

All in all, I see great potential to run labs with coding exercises completely in the browser using GitPod. Once the debugging server protocols are in place I hope that I could both debug the frontend as well the backend also directly in GitPod.

1 Comment

Hallvard Trætteberg10-27-2018

I’m planning to use gitpod in my class on object-oriented programming, in cases where Eclipse isn’t suitable, like sharing examples in interactive lectures. Another use case is digital exams, gitpod will allow us to test real programming skills using a real(istic) tool, as opposed to the current syntax-aware but stupid web editors.