Online VS Code for frontend and backend development

A guide about setting up a remote programming environment with all the pros of VS Code and multi-user support. Works on Chromebooks!

In this article, I’ll cover how to set up a remote coding environment using code-server. If you want the tutorial, skip to Requirements.

Background

I’m teaching a beginners class on programming based on my introduction to programming. The students all work on Chromebooks, a sad part of reality I had to work my way around. I recalled hearing about some project enabling VS Code in the cloud, which sounded perfect! After a bit of searching, I found this video from Fireship.

So, the restraints for this project was

• Something usable by multiple users at the same time (multi-tenancy), using minimal server resources
• A beginner friendly UI for accessing ones VS Code directory and it’s files in the browser
• Some basic security (blocking access to the local network and to the server certificates), since all users will have shell access
• A simple project which at maximum takes a few hours to set up from scratch.

After realizing these goals, I set out to a quest to use the newly implemented reverse-proxy in Kvarn as a HTTPS relay for code-server. Kvarn also hosts the user-friendly homepage.

Requirements

This is designed to be a light-weight and performant package. I’ll use this for Rust development with Kvarn, with about 20 concurrent users, so I’m using a virtual machine with 6 threads (probably overkill) and 2 GB memory.

• A descent machine without any files you care about (please use a VM!)
• My proxy
• Rust on the host machine to build the proxy from source
• code-server. I’ll show how to install and configure it later.
• Port forward access to open port 100 for your host machine
• A certificate (see Let’s Encrypt) and a domain (else service workers won’t work; code-server wont work)
• A doas flavour. I recommend OpenDoas (Arch package) for Linux.

I also greatly recommend installing the Fish shell (Arch package) if you intend for any beginners to access the shell, since Fish’s autocompletion and ergonomics are very friendly (and also a very nice shell to work with compared to Bash).

User management

I had two options for Linux user management.