--- 
navigation: true
title: Code-Server
main:
  fluid: false
---
:ellipsis{left=0px width=40rem top=10rem blur=140px}
# Code-Server

::alert{type="info"}
🎯 __Goals:__
- Install code-server
- Mount folders into VS Code
- Expose code-server with Swag
::

[code-server](https://github.com/linuxserver/docker-code-server) is a container that lets you access [VS Code](https://code.visualstudio.com/) via a web UI in a Linux environment. It's literally VS Code and your projects in your pocket, available anywhere.

![code-server](https://github.com/coder/code-server/raw/main/docs/assets/screenshot-2.png)

## Installation
---
::alert{type="info"}
:::list{type="info"}
- For this setup, we’ll use the [image maintained by LinuxServer.io](https://docs.linuxserver.io/images/docker-code-server/).
:::
::

Folder structure

```console
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:

```yaml
---
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
```

::alert{type="success"}
✨ Add the Watchtower label to each container to automate updates

    ```yaml
    services:
      code-server:
        #...
        labels:
          - com.centurylinklabs.watchtower.enable=true
::

Choose a password and generate its hash:

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

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

```shell
id yourusername
```

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

```properties
PW='$argon2i$v=19$m=4096,t=3,p=1$wST5QhBgk2lu1ih4DMuxvg$LS1alrVdIWtvZHwnzCM1DUGg+5DTO3Dt1d5v9XtLws4'
PUID=1000
GUID=1000
```

::alert{type="warning"}
:::list{type="warning"}
- __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!

::alert{type="danger"}
:::list{type="danger"}
- __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.

```yaml
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.

::alert{type="info"}
:::list{type="info"}
- __Preliminary:__ We assume you’ve created a subdomain like `code.yourdomain.com` with a `CNAME` pointing to `yourdomain.com` in your [DNS zone](/general/networking/dns), and—unless you're using [Cloudflare Zero Trust](/serveex/security/cloudflare)—that you’ve forwarded port `443` from your router to port `443` on your server using [NAT rules](/general/networking/nat).
:::
::

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

```yaml
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
```

::alert{type="info"}
:::list{type="info"}
- 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`.

::alert{type="success"}
✨ __Tip:__ You can use [File Browser](/serveex/files/file-browser) to navigate and edit your files instead of using terminal commands.
::

```shell
sudo vi /docker/swag/config/nginx/proxy-confs/code.subdomain.conf
```

Enter insert mode with `i` and paste the following configuration:

```nginx
## 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!

::alert{type="success"}
✨ __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](/serveex/security/authentik#protecting-an-app-via-reverse-proxy).
::