Fully Remote Development with VS Code & Cloud9

Posted on Sat 04 January 2020 in development

I work from about 7 different machines, including 3 laptops, ipad, chromebook and a PC desktop. Usually this means keeping credentials, config, build dependencies and IDEs in sync across all 3--and the iPad & Chromebook just can't run my dev environment

I considered a few options to enable seamless work across devices

option pros cons
Keep a "dev" docker image that contains everything. fully-local dev only works on Desktop OSs. Inconsistency if you forget to push the image
Sync script fully-local dev Inconsistency across devices. Script mayhem
Code remotely via a VM Secure, consistent Traditionally, text-only

Solution

  1. Launch Cloud9 Environment on AWS
  2. Install VS Code + SSH Remote Extension
  3. Install tmux

With this setup, you get the highest-fidelity experience when you can (with VS code), plus an adequate experience on iPad & Chromebook (cloud9 web ide). With tmux you get seamless handoff across all devices.

1. Install Cloud9

Prerequisites: AWS Account

I recommend creating an EC2Environment. For a simpler experience, consider lightsail. Remember, you'll only pay while the instance is online, and it will suspend itself after 30m of inactivity.

2. Install VS Code + SSH Remote on your Laptop

Install VS Code, then go to the Extensions panel and enable Remote - SSH.

3. Connect with SSH

First, you'll need a keypair to use, since cloud9's key is hidden. On your laptop, run this

ssh-keygen -t ed25519
# copy this key
cat ~/.ssh/id_ed25519.pub

Then in the cloud9 terminal, run

cat >> ~/.ssh/authorized_keys
[ paste your key here]

Now edit your SSH config in VS code 1. Hit "ctrl-P" , then chose "open remote SSH config file"

add an entry for your cloud9 box:

Host cloud9-env1
    HostName PUBLIC-IP-OF-YOUR-EC2-INSTANCE
    User ec2-user
    IdentityFile  C:\Users\USERNAME\.ssh\id_ed25519

At this point you should be able to remote into the host using ctrl-p -> "Remote-SSH : Connect to Host"

If you're having connectivity issues, make sure your security group is open to your WAN IP address. Here's some troubleshooting

I recommend creating a new key for each device. This way you can revoke a device from the server as needed

4. [Optional] Sync Terminals with Tmux

If you want true session handoff, you can install tmux

sudo yum install -y tmux
# creates a new attachable session
tmux 

From other devices just run tmux a to attach to that session

Conclusion

This combo gives you a secure and high-fidelity environment, with all of your dev tools, databases, code & credentials. And if you're like me with a day job, you can easily come back to where you left off, and secure your private assets.

Here's some more info on VS Code remote work, and why developers are moving in the direction of remote VM development.