devbox.id

Developer tools, self-hosted dev environments, productivity for solo engineers

Best Self-Hosted Code Editor untuk Dev Server

by Marcus Chen
Best Self-Hosted Code Editor untuk Dev Server

Best Self-Hosted Code Editor untuk Dev Server Kamu

Situasinya begini: kamu lagi kerja dari laptop kantor yang dikunci IT department, nggak bisa install extension sembarangan, Node.js-nya masih versi 14, dan kamu butuh akses ke project yang jalan di server production. Atau lebih simpel — kamu pengen coding dari iPad atau Chromebook tanpa setup ribet.

Solusi paling masuk akal: self-hosted code editor yang jalan di browser. Tapi begitu kamu mulai research, langsung ketemu tiga atau empat nama yang saling klaim jadi yang terbaik. Artikel ini bukan ranking afiliasi — ini hasil gue nyoba satu-satu di VPS DigitalOcean 2 vCPU / 4 GB RAM, dan gue tulis apa yang actually works.

Kenapa Self-Hosted, Bukan Cloud IDE Biasa?

Gitpod.io dan GitHub Codespaces bagus, tapi ada dua masalah nyata:

  1. Billing tak terduga. Lupa matiin workspace, tagihan meledak. Gue pernah kena $40 dalam seminggu karena workspace Gitpod cloud jalan terus di background.
  2. Data keluar dari server kamu. Kalau kamu kerja di project klien atau ada NDA, code kamu lewat infrastruktur pihak ketiga.

Self-hosted artinya kamu kontrol penuh — mulai dari resource sampai network policy.

Tiga Kandidat yang Worth Dibahas

1. code-server (Coder OSS)

Ini yang paling populer. Basically VS Code yang di-port jalan di browser. Extension marketplace-nya pakai Open VSX, bukan Microsoft Marketplace langsung — ini gotcha pertama yang perlu kamu tahu.

Install di Ubuntu 22.04:

curl -fsSL https://code-server.dev/install.sh | sh
systemctl enable --now code-server@$USER

Default-nya jalan di localhost:8080 dengan password yang di-generate otomatis. Cek di:

cat ~/.config/code-server/config.yaml

Output-nya kira-kira:

bind-addr: 127.0.0.1:8080
auth: password
password: abc123randomstring
cert: false

Supaya bisa diakses dari luar dengan HTTPS (wajib kalau mau pakai dari browser mobile), setup Nginx reverse proxy:

server {
    listen 443 ssl;
    server_name code.domainmu.com;

    ssl_certificate /etc/letsencrypt/live/code.domainmu.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/code.domainmu.com/privkey.pem;

    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection upgrade;
        proxy_set_header Accept-Encoding gzip;
    }
}

Jalankan Certbot dulu:

apt install certbot python3-certbot-nginx -y
certbot --nginx -d code.domainmu.com

Gotcha yang gue temuin: Beberapa extension populer kayak Pylance dan GitHub Copilot nggak ada di Open VSX. Workaround-nya kamu bisa download file .vsix dari marketplace Microsoft secara manual, lalu install via:

code-server --install-extension /path/to/extension.vsix

Tapi ini agak ribet dan harus diulang tiap update. Kalau kamu heavily dependent sama Microsoft-exclusive extensions, ini pain point nyata.

Resource usage: Idle sekitar 200–300 MB RAM. Buka project TypeScript besar bisa naik ke 1.5 GB. Untuk VPS 2 GB RAM, agak mepet.

2. Coder (Platform, bukan code-server)

Ini versi enterprise-nya, tapi ada community edition yang gratis. Bedanya sama code-server: Coder adalah platform untuk manage multiple workspace, bisa provisioning via Terraform, dan support berbagai IDE — bukan cuma VS Code, tapi juga JetBrains via JetBrains Gateway.

Install via Docker Compose:

# docker-compose.yml
version: "3.9"
services:
  coder:
    image: ghcr.io/coder/coder:latest
    ports:
      - "3000:3000"
    environment:
      CODER_ACCESS_URL: "https://coder.domainmu.com"
      CODER_PG_CONNECTION_URL: "postgresql://coder:password@db/coder?sslmode=disable"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    depends_on:
      - db
  db:
    image: postgres:15
    environment:
      POSTGRES_USER: coder
      POSTGRES_PASSWORD: password
      POSTGRES_DB: coder
    volumes:
      - coder_db:/var/lib/postgresql/data

volumes:
  coder_db:

docker compose up -d

Setelah up, buka http://localhost:3000 dan setup admin account. Dari sini kamu bisa bikin template workspace — misalnya template "Python Dev" yang udah include Python 3.11, pip, dan virtual environment pre-configured.

Kapan pilih Coder platform? Kalau kamu manage tim kecil (3–10 orang) dan pengen semua dev punya environment yang konsisten. Untuk solo dev, ini overkill. Resource minimum yang disarankan: 4 vCPU, 8 GB RAM untuk beberapa workspace aktif.

3. Gitpod Self-Hosted (Gitpod Community)

Gitpod punya self-hosted version via Helm chart untuk Kubernetes. Jujur — ini bukan untuk VPS tunggal. Minimum requirement-nya Kubernetes cluster dengan minimal 3 node, masing-masing 4 vCPU / 16 GB RAM.

Gue coba di k3s single-node dan hasilnya... berjalan, tapi workspace startup time-nya 3–5 menit. Terlalu lambat untuk daily use.

Kalau kamu udah punya Kubernetes cluster dan tim yang cukup besar untuk justify kompleksitasnya, Gitpod self-hosted masuk akal. Untuk kebanyakan pembaca di sini, skip dulu.

Perbandingan Langsung

Aspek code-server Coder Platform Gitpod Self-Hosted
Setup complexity Rendah Sedang Tinggi
Min. RAM 1 GB 4 GB 48 GB (cluster)
Multi-user Tidak native Ya Ya
IDE support VS Code only VS Code + JetBrains VS Code + JetBrains
Extension marketplace Open VSX Open VSX Open VSX
Cocok untuk Solo dev Tim kecil Tim besar

Setup code-server yang Lebih Secure

Default setup code-server cukup untuk development, tapi kalau server kamu public-facing, tambahkan beberapa layer:

1. Ganti password dengan hashed password:

# Generate hashed password
echo -n "passwordkamu" | npx argon2-cli -e
# Output: $argon2i$v=19$m=4096...

Edit ~/.config/code-server/config.yaml:

bind-addr: 127.0.0.1:8080
auth: password
hashed-password: "$argon2i$v=19$m=4096..."
cert: false

2. Batasi akses via UFW:

ufw allow from 103.x.x.x to any port 8080  # IP kantor/rumah kamu
ufw deny 8080

Karena kamu pakai Nginx sebagai reverse proxy, port 8080 sebenarnya nggak perlu dibuka ke public — cukup port 443.

3. Tambah HTTP Basic Auth di Nginx sebagai layer kedua:

apt install apache2-utils -y
htpasswd -c /etc/nginx/.htpasswd userkamu

Tambahkan ke block location / di Nginx config:

location / {
    auth_basic "Restricted";
    auth_basic_user_file /etc/nginx/.htpasswd;
    proxy_pass http://localhost:8080;
    proxy_set_header Host $host;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection upgrade;
    proxy_set_header Accept-Encoding gzip;
}

Dua layer auth (code-server password + HTTP Basic Auth) cukup untuk personal use.

Gotcha Lain yang Perlu Kamu Tahu

Clipboard di browser. Copy-paste antara local machine dan code-server kadang bermasalah di Firefox. Chrome/Chromium works better. Ini bukan bug code-server — ini limitasi browser API.

Git credentials. Kalau kamu push ke GitHub dari code-server, setup credential helper supaya nggak ketik password terus:

git config --global credential.helper store
# Atau pakai SSH key yang lebih aman:
ssh-keygen -t ed25519 -C "email@kamu.com"
cat ~/.ssh/id_ed25519.pub  # Copy ke GitHub SSH keys

Persistent terminal sessions. Kalau koneksi internet putus di tengah proses panjang (misalnya npm install di project besar), process-nya ikut mati. Fix-nya: pakai tmux atau screen:

apt install tmux -y
tmux new -s dev
# Sekarang semua command jalan di dalam tmux session
# Kalau koneksi putus, attach lagi dengan:
tmux attach -t dev

Extension yang gue install di code-server:

code-server --install-extension esbenp.prettier-vscode
code-server --install-extension dbaeumer.vscode-eslint
code-server --install-extension eamodio.gitlens
code-server --install-extension ms-python.python  # Via Open VSX

Yang Gue Pakai Sekarang

Setup gue: code-server di VPS Hetzner CX21 (2 vCPU / 4 GB RAM, ~€4.5/bulan). Ini yang gue jalankan untuk project-project side income dan beberapa client work.

Alasan milih code-server dibanding yang lain:

  • Setup 15 menit, bukan 2 jam.
  • Resource usage masuk akal untuk VPS kecil.
  • Familiar — basically VS Code yang sama yang gue pakai di local.

Kalau suatu saat tim gue berkembang lebih dari 3 orang, gue akan migrate ke Coder platform karena workspace isolation-nya lebih proper. Tapi untuk sekarang, code-server cukup.

Langkah lanjutan yang bisa kamu coba:

  1. Setup dotfiles repository supaya environment kamu reproducible — kalau VPS mati, tinggal clone dan run script. Untuk referensi lebih lengkap tentang infrastructure dan performance, kamu bisa cek WordPress hosting CDN performance impact yang membahas optimization di level infrastructure.
  2. Explore devcontainer.json untuk project-specific environment yang otomatis ke-load waktu buka folder.
  3. Kalau butuh preview web app dari code-server, pakai fitur port forwarding bawaan — klik ikon "Ports" di status bar bawah.

Best self-hosted code editor terbaik itu yang actually kamu setup dan pakai — bukan yang punya feature list paling panjang di landing page-nya.