Spin VS Code for the Web in the Digital Ocean

Online web editors are a great productivity tool for web developers, tech content creators, testers, and more. Whether for debugging or to make quick changes or to run some tests. We do have vscode.dev for free, so why do we need to spin up another instance in Digital Ocean?It’s convenience. In this blog post, let us learn how to spin VS Code for the Web in the Digital Ocean.

VS Code

VS Code is one of the famous editors among developers, testers, system admins and more. After Microsoft procured the code.dev domain back in 2019, they redirected vscode.dev to code.visualstudio.com. But today vscode.dev opens a lightweight VS Code in the browser with no install.

VS Code for the Web
VS Code for the Web

Using VS Code for the web, we can do development, take notes, review the code, and more. You can use your Chromebook or iPad too.

Coder

To deploy VS Code in the Digital Ocean, we are going to leverage Coder. Coder helps to deploy the development workspace to the cloud or your own infrastructure. Coder has a community flavor which is free, open source, and supports GitHub login and OpenID.

VS Code in the Digital Ocean

To deploy VS Code in the Digital Ocean cloud, all you need is a Digital Ocean account which is free to create. Sign up using this link to receive $100 DO credits valid for 60 days.

After login to your DO account, navigate to the Droplets page, then click Create > Droplets.

Choose the latest version of Ubuntu.

Select the Basic plan.

Select the Regular with SSD option for the CPU.

Select the affordable plan which is $4 per month which gives you 512 MB, 1 CPU, 10 GB SSD, and 500 GB transfer.

Digital Ocean Plan
Digital Ocean Plan

Choose a datacenter region closer to you. Select the authentication method either SSH keys or password. I am going to choose the SSH key, which is a more secured method of authentication.

The next step is to configure the user data for the droplet. Under the additional options, copy the script from here and paste into the User data text field as shown below.

User Data
User Data

Optionally, you can enter the tags and hostname and then click the Create Droplet button.

Once the droplet is up and running, navigate to the Droplet page to fetch the public IP address.

Launch your favorite browser and paste the IP address and hit enter.

In few instances, it will redirect to this page. To troubleshoot, go to the droplet console using the Console link as shown below.

Droplet
Droplet

Follow the below instructions.

# Check if code-server is running
systemctl status [email protected]

# Check if journalctl is giving us logs, and if something failed
journalctl -u [email protected]

# If journalctl isn't giving logs:
systemd restart systemd-journald 
# or
sed -i.bak 's/#Storage=auto/Storage=persistent/' /etc/systemd/journald.conf
mkdir -p /var/log/journal
systemctl force-reload systemd-journald
systemctl restart systemd-journald
# then, if needed:
sudo reboot

After you followed the above steps, launch the IP address again in your browser. If you followed the instructions properly, it will launch the GitHub page as shown below.

GitHub Sign in
GitHub Sign in

After successful authentication, you can see the VS Code online editor as shown below.

VS Code Web
VS Code Web

In the Droplet page, you can monitor the CPU, Memory, and Bandwidth graphs. Suppose, if you want more horsepower, you can upgrade the instance on the Resize page. When not in use, you can power off the instance (still you will be billed).

Final Thoughts:

It is always nice to have our own instance for our development purpose. The free flavor of VS Code is ephemeral. But if you spin up on your own, it’s all yours to play with. In the next blog, we will see how to make use of VS Code Server (beta) in the Digital Ocean.

Spin VS Code for the Web in the Digital Ocean

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Join the fastest growing Performance Engineers club at ClubhouseSHOW ME HOW
+ +
Share via
Copy link