In this guide, I will be walking through setup with , as well as tweaks I have used to create a clean, simple workflow. VS Code-Server DigitalOcean Code Server runs on a remote server, which is accessible through the browser. Visual Studio Code Why Do I Need This? With such a setup, you can code on your Chromebook, tablet, and laptop with a consistent development environment, with a feel-at-home setup. Consistent environment: You will have the power and flexibility of VS Code, accessible from any browser, including tablets. Multi-platform: 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. Server-powered: You will preserve battery life when you’re on the go since all intensive computation runs on your server. Battery life: The Setup I have found the following setup very useful, in terms of flexibility, productivity, and cost-efficiency. Create Droplet from pre-built image, from mobile. Pull from GitHub for latest update. (startup) Provide VS Code in browser, with Code-Server. Do stuff. Push to GitHub. 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, 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. Ubuntu 18.04 (default). Image: $15/mo with 2 GB/2 CPU (most ideal). Plan: New York (default). Region: (Not required for the tutorial). Options: and . Authentication: Create a new SSH Key upload it to the dashboard Now hit that button! create Connect with SSH Personally, I use , however any SSH client works. Here’s . Termius a neat guide by DigitalOcean Code-Server Installation It’s time to set up Code-Server. Head over to the and copy the link to the latest release for Linux. latest releases page Execute the following commands in the console: # Download latest Github ( copied link)
wget https://github.com/cdr/code- /releases/download/{ }/code- { }-linux-x64.tar.gz

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

# Run Code cd code- { }-linux-x64
./code- release from insert server version server version server version Server server version 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/environment # and append the following: PASSWORD “Your Password” sudo reboot Extensions As the official VS Code Marketplace cannot be used, Coder has created a that manages open-source extensions. custom marketplace 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. -e cd /root/AwesomeProject && git pull /root/code-server[ ]-linux-x86_64/code-server crontab # And add the following (just an example): @reboot @reboot $VERSION 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 and select your newly created image. Snapshots 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. ( or .) Android 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 your thoughts and suggestions below.

Check out my latest project →

Read My Stories

Too Long; Didn't Read

Developers: Build Less. Deliver More. [Learn how]	

How You Can Set Up Remote Development Workflow With VS Code in Your Browser

Too Long; Didn't Read

Sanjeet Chatterjee

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How You Can Set Up Remote Development Workflow With VS Code in Your Browser

Too Long; Didn't Read

Sanjeet Chatterjee

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES