Code-Server

🎯 Goals:
  • Install code-server
  • Mount folders into VS Code
  • Expose code-server with Swag

code-server is a container that lets you access VS Code via a web UI in a Linux environment. It's literally VS Code and your projects in your pocket, available anywhere.

code-server

Installation

Folder structure

root
├── docker
│   └── code-server
│       └── config
└── #any folder you want to mount in VS Code

Open Dockge, click on compose, name the stack code-server, and paste the following:

---
services:
  code-server:
    image: lscr.io/linuxserver/code-server:latest
    container_name: code-server
    environment:
      - PUID=${PUID}
      - PGID=${GUID}
      - TZ=Etc/UTC
      - HASHED_PASSWORD=${PW}
    volumes:
      - /docker/code-server/config:/config
    # add folders to mount in VS Code
    # - /path/to/folder:/folder
    ports:
      - 8443:8443
    restart: unless-stopped
✨ Add the Watchtower label to each container to automate updates
services:
  code-server:
    #...
    labels:
      - com.centurylinklabs.watchtower.enable=true

Choose a password and generate its hash:

echo -n "yourpassword" | npx argon2-cli -e

Save the result carefully. Find your PUID and GUID with:

id yourusername

Fill in the .env file with the values you found, for example:

PW='$argon2i$v=19$m=4096,t=3,p=1$wST5QhBgk2lu1ih4DMuxvg$LS1alrVdIWtvZHwnzCM1DUGg+5DTO3Dt1d5v9XtLws4'
PUID=1000
GUID=1000
  • Note: Make sure to wrap the hash in single quotes '

Deploy the container and go to http://yourserverip:8443. Voilà, your code-server instance is up and running in the browser!

  • If it fails: check your firewall rules.

Mount Folders

You can mount folders into VS Code by adding the relevant volumes in compose.yaml (or via Dockge), then redeploy the container.

services:
  code-server:
    #...
    volumes:
      - /path/to/folder:/folder

Once inside VS Code, you'll have access to the mounted folder.

Expose code-server with Swag

The whole point of such a solution is to access it remotely from any device. To do this, we’ll expose code-server via Swag.

  • Preliminary: We assume you’ve created a subdomain like code.yourdomain.com with a CNAME pointing to yourdomain.com in your DNS zone, and—unless you're using Cloudflare Zero Trust—that you’ve forwarded port 443 from your router to port 443 on your server using NAT rules.

In Dockge, go to the SWAG stack and edit the compose file to add code-server’s network:

services:
  swag:
     container_name: # ...
      # ... 
     networks:           # Connects the container to a custom network 
      # ...           
      - code-server      # Name of the network defined in the stack
    
networks:                # Defines the custom network
  # ...
  code-server:           # Name of the network defined in the stack
    name: code-serveur   # Actual name of the external network
    external: true       # Indicates it’s an external network
  • We assume the network name is code-server_default. You can verify that the connection works by visiting the SWAG dashboard at http://yourserverip:81.

Redeploy the stack by clicking “deploy” and wait until SWAG is fully operational.

Inside the Swag config folders, create the file code.subdomain.conf.

✨ Tip: You can use File Browser to navigate and edit your files instead of using terminal commands.
sudo vi /docker/swag/config/nginx/proxy-confs/code.subdomain.conf

Enter insert mode with i and paste the following configuration:

## Version 2023/12/19

server {
    listen 443 ssl;
    listen [::]:443 ssl;

    server_name code.*;

    include /config/nginx/ssl.conf;

    client_max_body_size 0;

    #if ($lan-ip = yes) { set $geo-whitelist yes; }
    #if ($geo-whitelist = no) { return 404; }
    if ($geo-blacklist = no) { return 404; }

    # enable for ldap auth (requires ldap-location.conf in the location block)
    #include /config/nginx/ldap-server.conf;

    # enable for Authelia (requires authelia-location.conf in the location block)
    #include /config/nginx/authelia-server.conf;

    # enable for Authentik (requires authentik-location.conf in the location block)
    #include /config/nginx/authentik-server.conf;

    location / {
        # enable the next two lines for http auth
        #auth_basic "Restricted";
        #auth_basic_user_file /config/nginx/.htpasswd;

        # enable for ldap auth (requires ldap-server.conf in the server block)
        #include /config/nginx/ldap-location.conf;

        # enable for Authelia (requires authelia-server.conf in the server block)
        #include /config/nginx/authelia-location.conf;

        # enable for Authentik (requires authentik-server.conf in the server block)
        #include /config/nginx/authentik-location.conf;

        include /config/nginx/proxy.conf;
        include /config/nginx/resolver.conf;
        set $upstream_app code-server;
        set $upstream_port 8443;
        set $upstream_proto http;
        proxy_pass $upstream_proto://$upstream_app:$upstream_port;
    }
}

Press Esc, then save and exit by typing :x and pressing Enter.

That’s it — code-server is now exposed!

✨ Tip: You can protect this app with Authentik by opening code.subdomain.conf and uncommenting the lines include /config/nginx/authentik-server.conf; and include /config/nginx/authentik-location.conf;. Don’t forget to create an application and provider in Authentik.
Table of Contents