Work from anywhere with VSCode Remote Tunnels

Did you know that you can use VSCode Remote Tunnels to work on a remote machine, WSL2 instance, or even on a Docker container, not only from VSCode Desktop but also from the browser?

- Yeah! Everybody knows that. Thank you, bye!
- Bye!

Alright! Now that only the ones intrigued about where this cool stuff fits into our lives as developers, are here, buckle up and let's get started! 🎢💻

Let's explore two situations:

Scenario 1: Quantum Leap 🌌

Ever find it exasperating to work on a machine that feels like it's on the other side of the universe? You have to deal with installing some obscure VPN client that you "so much love"😅, followed by starting an RDP that completely throws off the beautiful development workflow you've meticulously crafted over time.

If you can feel your heart rate climbing just at the thought, take a deep breath. Thanks to VSCode Remote Tunnels, you can run VSCode Desktop on that machine without cluttering up your own.

Scenario 2: Mobile Marvels 📲

Picture this: you're galaxies away from your trusty laptop, and something urgent pops up. There's a small task that can only be tackled on that machine. Feeling the stress levels rise?

No need to fret! With VSCode Remote Tunnels, you can gracefully handle the situation from your tablet or even your smartphone.

By the way, Microsoft might as well send me a check for this stellar promotion, but anyway, let's dive into how you can make it happen 🚀.

You first need to have a Microsoft or a GitHub account. I am using a Microsoft account. Let's see what you have to do to work from anywhere on a:

• Remote machine 🌐
• WSL2 Instance 🚧
• Docker container 🐋

Remote machine 🌐

Here are the steps to setup and connect to the remote machine.

Step 1 - Install code CLI

If you have VSCode installed, you should already have code CLI installed. However, if your remote doesn't have VSCode installed, or if it doesn't have a UI, you can install it through a standalone install.

Step 2 - Turn on Remote Tunnel Access

You can do this step also from the VSCode UI on the remote machine by using the Remote Tunnels extension. However, I prefer to do it from the command line.

⚠️ There are some limitations for how many tunnels you can create per account and how much data you can transfer. See Are there usage limits for the tunneling service? for more information.

Here is what you have to do:

• Login to your Microsoft account:

  code tunnel user login --provider microsoft

• Start the tunnel:

  code tunnel service install --accept-server-license-terms --name "remote-tunnel"

Step 3 - Connect to remote machine

Step 3a - Connect with your browser

To connect with your browser you have to:

• Open vscode.dev in your browser.
• Type Ctrl+Shift+P and select Remote-Tunnels: Connect to Tunnel...
• Choose Microsoft Account and login with the same account you used in Step 2.
• Now you should see a list of code tunnels you can connect to. Choose the one you created in Step 2.

Enjoy running anything you want on your remote machine, from your browser:

• You can use the terminal from VSCode.
• You can even run vim, tmux or screen in that terminal.
• You can SSH into other machines in your network.

All this from your browser! This can be on your laptop, tablet or even your smartphone.

Step 3b - Connect with VSCode Desktop

To connect with VSCode Desktop you have to install the Remote Tunnels extension. Once you've done this:

• Open VSCode Desktop.
• Type Ctrl+Shift+P and select Remote-Tunnels: Connect to Tunnel...
• Choose Microsoft Account and login with the same account you used in Step 2.
• Now you should see a list of code tunnels you can connect to. Choose the one you created in Step 2.

Enjoy running everything you want on your remote machine, from VSCode Desktop.

WSL2 Instance 🚧

If your remote thing is a WSL2 instance, here you have to setup things a little bit different.

Step 1 - Enable systemd

We want systemd to be enabled so that we can start the code tunnel as a service. To enable it, edit the /etc/wsl.conf file and add the following lines:

[boot]
systemd=true

See Systemd support is now available in WSL for more information.

Step 2 - Install code CLI on WSL2

Do the same as in Step 1 from Remote machine.

Step 3 - Turn on Remote Tunnel Access on WSL2

Do the same as in Step 2 from Remote machine.

Step 4 - Connect to WSL2 instance

Now you can connect to the remote WSL2 instance from your browser or from VSCode Desktop, exactly in the same way you connect to a remote machine in your network.

IMPORTANT: To make sure your WSL2 instance is running even if you close the terminal that started, make sure you start WSL2 with this command:

wsl --exec dbus-launch true

Docker container 🐋

Yeah! VSCode Remote Tunnels work also with containers. The setup is also a bit different.

Step 1 - Build the Docker image

In order to connect to a remote tunnel from a Docker container, you need to have code CLI installed in the container. The Dockerfile below is a good starting point for building such an image.

FROM ubuntu:22.04

# Install git and curl
RUN apt-get update && \
    apt-get install -y git curl && \
    apt-get clean && \
    rm -rf /var/lib/apt/lists/*

# Download and extract the code cli program
RUN curl -sL "https://code.visualstudio.com/sha/download?build=stable&os=cli-alpine-x64" \
      --output /tmp/vscode-cli.tar.gz && \
      tar -xf /tmp/vscode-cli.tar.gz -C /usr/bin && \
      rm /tmp/vscode-cli.tar.gz

# Keep the container running
CMD [ "tail", "-f", "/dev/null" ]

Run this command to build the image:

docker build -t vscode-remote-tunnel .

Step 2 - Turn on Remote Tunnel Access

Start the container with the following command:

docker run -d \
    -v $(pwd):/home/workspace \
    -w /home/workspace \
    --name vscode-remote-tunnel \
    vscode-remote-tunnel

Login to your Microsoft account:

docker exec vscode-remote-tunnel code tunnel user login --provider microsoft

Start the tunnel:

docker exec -d vscode-remote-tunnel code tunnel --accept-server-license-terms --name "docker-tunnel"

Step 3 - Connect to WSL2 instance

Now you can connect to the remote Docker container from your browser or from VSCode Desktop, exactly in the same way as you connect to a remote machine in your network.

Terminating the tunnel

Make sure you stop the server for the tunnel and logout from your Microsoft account once you are done.

This is how you do it for the Docker container:

docker exec vscode-remote-tunnel code tunnel kill
docker exec vscode-remote-tunnel code tunnel user logout

Do something similar for the remote machine or for the WSL2 instance:

code tunnel kill
code tunnel user logout

Conclusion

In conclusion, VSCode Remote Tunnels lets you code from anywhere – be it on a remote machine, a WSL2 instance, or a Docker container. No VPN acrobatics, no RDP contortions – just smooth coding like a quantum leaper or on-the-go from your mobile marvels. Microsoft, a check for this stellar promotion would be appreciated 😄. Now, go forth and code from anywhere. May your tunnels be swift and your code be bug-free! 🚀🤖

References

• Developing with Remote Tunnels