Setup Remote Development With VS Code in Your Browser

In this guide, I will be walking through VSCode Server setup with DigitalOcean, as well as tweaks I have used to create a clean, simple workflow. 

Code Server runs Visual Studio Code on a remote server, that is accessible through the browser.

I have found the following setup very useful, in terms of flexibility, productivity and cost-efficiency. For work at college, with Github's Student Pack, I can use my DigitalOcean credit to start up my custom development environment, at a click of a button, which is really cool.

I use this setup to develop the SmartGlove dashboard at college. Here is the GitHub repository with more information and steps for testing the web app. This is still work in progress.

Why do I need this? 

• Consistent environment: With such a setup, you can code on your Chromebook, tablet, and laptop with a consistent development environment, with a feel at home setup.
• Multi-Platform: You will have the power and flexibility of VSCode, accessible from any browser, including tablets.
• Server-powered: You can take advantage of large cloud servers to speed up tests, compilations, downloads, and more. With this DigitalOcean setup, servers can be scaled up to any size.
• Battery Life: You will preserve battery life when you’re on the go since all intensive computation runs on your server.

The Setup

Here's the plan:

1️⃣ Create Droplet from pre-built image. (possibly, from mobile)

2️⃣ Pull from Github for latest update. (startup)

3️⃣ Provide VSCode in browser, with code-server. (startup)

4️⃣ Do stuff.

5️⃣ Push to Github.

6️⃣ Destroy Droplet.

Droplet Creation

For the guide, I have opted to use DigitalOcean due to their simple and intuitive setup process —  however other platforms will also work. 

Sign Up

To get started, get $100 in free credit with my referral link, if you don’t already have an account on DigitalOcean.

Create Droplet

Now it’s time to create our droplet — the virtual server in which VSCode Server will run, as well as your project.

• Image → Ubuntu 18.04 (default)
• Plan → $15/mo with 2 GB/2 CPU (most ideal)
• Region → New York (default)
• Options → (Not required for the tutorial)
• Authentication→ Create a new SSH Key and upload it to the dashboard.

Now hit that create button!

Connect with SSH

Personally, I use Termius, however any SSH client works → here’s a neat guide by DigitalOcean. 

Code-Server Installation

It’s time to setup Code-Server. Head over to the latest releases page and copy the link to the latest release for Linux.

Execute the following commands in the console:

# Download latest release from Github (insert copied link)
wget https://github.com/cdr/code-server/releases/download/{version}/code-server{version}-linux-x64.tar.gz

# Unpack tarball
tar -xvzf code-server{version}-linux-x64.tar.gz

# Run Code Server  
cd code-server{version}-linux-x64  
./code-server

Retrieve you’re droplet’s public IP address from the DigitalOcean Control Panel and point your browser to http://{PUBLIC IP ADDRESS}:8080/ .

Copy the generated password from the console output, and log in to Code-Server.

You should now have full VSCode functionality, directly from you browser — how cool is that? 

Customisation

Authentication

By default password authentication is enabled, with a randomly generated password. You can set the PASSWORD environment variable to use your own:

sudo nano /etc/environment

# and append the following:

PASSWORD= “Your Password”

sudo reboot

Extensions

As the official VSCode Marketplace cannot be used, Coder has created a custom marketplace, which manages open-source extensions. 

Fonts

All fonts work as normal, provided you have it installed on your local machine, as it is your browser which renders the text. For example, Fira Code: 

Building Image

Start on Boot

For the setup, I added the following cron jobs, in order to have the latest code pulled from Github on boot, and available in Code Server from the get go.

crontab -e

# And add the following (just an example):  

@reboot cd /root/AwesomeProject && git pull  
@reboot /root/code-server\[$VERSION\]-linux-x86\_64/code-server

Take a Snapshot

DigitalOcean provides an easy way to create to perfect images of servers, from which identical Droplets can be built in the future. Rename and take a snapshot. Once finished, you can destroy your current droplet.

Rebuild

During the droplet creation process, click Snapshots and select your newly created image.

Note → Region and base plan settings are restricted to the droplet, from which the snapshot was created.

After creating your droplet, you should be able to access Code Server as before, and carry on where you left off.

Going Further

To conclude, now you can start up and access your favourite development setup at a click of a button, regardless of network or computer, with minimal costs accrued.

Personally, I would love to be able to access my DigitalOcean control panel, on the go from my phone. There are unofficial apps available which use their API, although with limited functionality. [ Android or iOS ] 

From testing the Android client, it works well enough for just creating droplets.

Possible Upgrades

• Auto-terminate Droplet using the API after 24 hours, after running git push, in order to avoid costs from forgetting to destroy running droplets.
• Use Block Storage for programs and development, to preserve exact state since last access, dynamically mounting to new droplets on creation, in order to avoid constant pushing to Github.

Thanks for reading - it would be great to hear thoughts below!

Comments

[Lisa Tagliaferri]

Hi there, thank you for sharing your knowledge with the Community! Please follow me back so I can DM you so that we can send you a token of appreciation from DigitalOcean :)

[Sanjeet]

Done:)