Set Up Remote Development With VS Code in Your Browser

Remotely start up your favorite development setup, with a click of a button

Sanjeet Chatterjee
Dec 18, 2019 · 5 min read

In this guide, I will be walking through VS Code-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, which is accessible through the browser.


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.

The Setup

I have found the following setup very useful, in terms of flexibility, productivity, and cost-efficiency.

  1. Create Droplet from pre-built image, from mobile.

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, create an account on DigitalOcean, if you don’t already have one.

Create Droplet

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

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 set up 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 your 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 VS Code functionality, directly from your browser — how cool is that?


Customization

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/environmentand append the following:
PASSWORD= “Your Password”
sudo reboot

Extensions

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

Fonts

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


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 -eAnd 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 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 like before, and carry on where you left off.


Going Further

To conclude, now you can start up and access your favorite 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 that 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.

Resources

Thanks for reading! It would be great to hear your thoughts and suggestions below.

Better Programming

Advice for programmers.

Sanjeet Chatterjee

Written by

Member of the Homo Sapien species.

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade