Setup Remote Development With VS Code in Your Browser
Tags: digitalocean, students, tutorial, vscode
Published: 2019-12-18 19:26:40


![](https://cdn-images-1.medium.com/max/800/1*aAx4p0ZEF2pU60Vc8VIsFw.png)

In this guide, I will be walking through [**VSCode Server**](https://github.com/cdr/code-server) setup with [DigitalOcean](https://www.digitalocean.com/), 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](https://www.digitalocean.com/) 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](https://thesmartglove.herokuapp.com/demo) dashboard at college. Here is the [GitHub repository](https://github.com/thesanjeetc/The-SmartGlove-2.0) 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](https://www.digitalocean.com/) 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**](https://m.do.co/c/aa2a5d78f490)**,** if you don’t already have an account on DigitalOcean.

![](https://cdn-images-1.medium.com/max/800/1*HXywQykE3iqsKxcKknRyRQ.png)

#### Create Droplet

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

![](https://cdn-images-1.medium.com/max/800/1*kVIO1K6_4oDSvUa0uSF4rw.png)

*   **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](https://www.digitalocean.com/docs/droplets/how-to/add-ssh-keys/create-with-putty/) and [upload it to the dashboard](https://www.digitalocean.com/docs/droplets/how-to/add-ssh-keys/to-account/).

Now hit that create button!

#### Connect with SSH

Personally, I use [Termius](https://termius.com/), however any SSH client works → here’s [a neat guide by DigitalOcean](https://www.digitalocean.com/docs/droplets/how-to/connect-with-ssh/putty/). 

### Code-Server Installation

It’s time to setup Code-Server. Head over to the [latest releases page](https://github.com/cdr/code-server/releases/latest) and copy the link to the latest release for Linux.

![](https://cdn-images-1.medium.com/max/800/1*xAN2fDVGnqth8bcdv0NxUw.png)

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? 

![](https://cdn-images-1.medium.com/max/800/1*biQs6Oag_rJ3jtRmPqQ4kQ.png)

### 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](https://github.com/cdr/code-server#extensions), which manages open-source extensions. 

![](https://cdn-images-1.medium.com/max/800/1*zR4J4iEaLM9tucxONT2uhA.png)

#### 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](https://github.com/tonsky/FiraCode): 

![](https://cdn-images-1.medium.com/max/800/1*3SbPjz07hXoXf_eKAcZr_w.png)

### 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.

![](https://cdn-images-1.medium.com/max/800/1*MUYYVZx_pRBkP6dR2NB8jA.png)

#### Rebuild

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

![](https://cdn-images-1.medium.com/max/800/1*FGhQMcW8Jt3lQl4WSzoTPQ.png)

**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**](https://play.google.com/store/apps/details?id=com.yassirh.digitalocean&hl=en_GB)  or  [**iOS**](https://apps.apple.com/us/app/manager-for-digital-ocean/id1037626977)  \] 

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!