Kashif's bizarre codeventures

Setup VS Code for remote development

Kashif's photo
Kashif
·

3 min read

Well in order to setup a remote environment, you need a DigitalOcean account, you can use my referral code below to get $100 for 60 days just to try these things out 👇

DigitalOcean Referral Badge

After you're done creating an account, let's move to the next step

Creating a Droplet

  • On the left menu, click on the Droplet button

  • Create a new droplet by clicking on the "Create Droplet" buton

  • Choose a distro of your flavour (I choose Ubuntu for ease of use) and select your desired specs

  • Select the datacenter region closest to you for better latency

For Authentication, choose SSH keys and click on the "New SSH Key" button below

Use the command ssh-keygen to generate an SSH key, and the file would be stored under ~/.ssh/id_rsa.pub (for Mac and Linux) and C:\<user_name>\.ssh\id_rsa.pub (for Windows)

NOTE: The command ssh-keygen might not work on Windows CMD or Powershell, use Git Bash

  • Finally, click on "Create Droplet" at the bottom and wait for a few minutes for it to spin up

Connecting to droplet via SSH

  • Copy the IP address

  • Go to your terminal, and type 👉 ssh root@<IP_ADDRESS>

    • Example 👉 ssh root@127.0.0.1

  • Once inside the Droplet, create a new sudo user

    • Create a new user 👉 adduser vscode

    • Add it to sudo group 👉 usermod -aG sudo vscode

    • Login as the user 👉 su - vscode

    • Create a new ssh directory 👉 mkdir ~/.ssh

    • Create a new file inside it 👉 touch ~/.ssh/authorized_keys

    • Copy the contents of id_rsa.pub file, present on your local PC and paste it inside the authorized_keys file you created on your Droplet

      • To paste the contents into authorized_keys file, you can use any cli based text editor, nano example below 👇

      • Press Ctrl-X, then Y and then Enter to save the file

    • [OPTIONAL] Type chmod 600 ~/.ssh/authorized_keys to make sure other users don't access this file

  • Press Ctrl-D twice to logout from the Droplet and test ssh connection of this new user vscode

  • Type ssh vscode@<IP_ADDRESS> to connect to your Droplet, but now as the user vscode instead of root

VS Code Remote development

  • Add the Remote - SSH extension to VS Code

  • Go to VS Code, click on the bottom left button

  • Choose Connect to host

  • Type in ssh vscode@<IP_ADDRESS>

  • Choose your ssh folder

  • Then you can connect to your Droplet for remote development

  • A new window will open, with remote connection to your Drop

Now, you can make use of the VMs resources to build applications on the cloud

sshremoteDigitalOceanvscode