VS Code on Docker: Code with your phone

In this simple tutorial, I’m going to show you how to make your own Visual Studio Code server. Make it accessible from anywhere and via web. So you can code even with your phone or tablet.

First, you need to install Docker on your server or PC, this is very easy and already exist a lot of tutorials for this, so I’m going to assume that we all know how Docker works.

I’m going to be using Portainer, you can check my post on how to install it and use it on “Portainer: a web dashboard for Docker”. Or you can simply edit your docker-compose file and deploy it from the terminal.

So on Portainer we are going to create a new stack (or add this service to an old one), name it and paste the follow, you only need to change the volume localization, TZ and pass to your own configuration:

# Remember to change the setting you see in this color
version:  '3.7'

services: 

  code-server:
    image: ghcr.io/linuxserver/code-server
    container_name: code-server
    restart: unless-stopped
    environment:
      - PUID=1000
      - PGID=1000
      - TZ=America/Argentina/Mendoza
      - PASSWORD=blog.matiasmercado.ar
    ports:
      - 8443:8443
    volumes:
      - /path/to/code-server/config:/config
      - /path/to/code-server/files:/media:ro

You can see we are using a linuxserver image from docker hub. So first, we select the image, name the container, set parameters like PUID and PGID for security, the time zone and password to log in. We are going to need 2 volumes, config to maintain the configurations of the container and files if we want to keep some files “locally”, but I encourage you to use git.

Wait for the deployment and then open your localhost or server IP on port 8443

http://localhost:8443
o
http://foo.bar:8443

You are going to see the follow page asking for the password we previously set:

If something goes wrong (and you’re not using Portainer, because Portainer told you immediately if something fail), remember to check your container with:

$ docker-compose ps
and
$ docker "container name" logs

And voilà, now you can code from your web browser on a full version of Visual Studio Code :

Of course you can add all the extensions you need:

If you want it to be accessible from internet, you’re going to need to follow this tutorial first “Access to your Home Server from anywhere with SSH and DuckDNS”. You just need to browse on foobar.duckdns.org:8443 and open that port on your home firewall. If you made this on a cloud or server that it’s actually public, just use the domain or public IP.

How this look like on a mobile phone?

This isn’t the best way to code, but it can save your day if you need to correct or see something. We all know that basic app IDE version for Android/iOS are awful. This is how it’s look like on a normal web browser phone:

If you use the “Desktop version” of your browser, this is how it’s going to look like:

Today we can find many phones that can convert to a “Desktop PC” when you plug it to an HDMI cable, in this case I have a Samsung with Dex technology. This is how this look like (it’s very similar to a desktop PC or notebook, so this could be a real reason to buy a smartphone that can convert to desktop):

Hope you find this post useful!

Leave a Comment Cancel Reply