Deploying code-server

Introduction

code-server is VS Code running on a remote server, accessible through your browser. Developed by Coder, it brings the full Visual Studio Code experience to any device with a web browser, allowing you to code on your Chromebook, tablet, or any computer without installing anything locally.

By running VS Code in the cloud, code-server provides a consistent development environment across all your devices. Your extensions, settings, and projects are always available, and you can leverage server-grade hardware for resource-intensive tasks like compilation, testing, and machine learning workflows.

Key highlights of code-server:

Full VS Code Experience: Complete Visual Studio Code functionality in your browser
Extension Support: Install and use VS Code extensions from the Open VSX Registry
Integrated Terminal: Full terminal access with support for multiple shells
Git Integration: Built-in Git support for version control workflows
Multi-Language Support: Code in any language with appropriate extensions
Collaborative Features: Share your development environment with team members
Resource Offloading: Run builds and tests on server hardware
Persistent Environment: Your workspace persists across sessions
Mobile Development: Code from tablets and mobile devices
100% Open Source: MIT licensed with active community development

This guide walks through deploying code-server on Klutch.sh, configuring your development environment, and maximizing productivity with browser-based coding.

Why Deploy code-server on Klutch.sh

Deploying code-server on Klutch.sh provides several advantages for your development workflow:

Simplified Deployment: Klutch.sh automatically builds and deploys your code-server instance from a Dockerfile, handling infrastructure complexity.

Persistent Storage: Attach volumes for your projects, extensions, and configuration that persist across container restarts.

HTTPS by Default: Automatic SSL certificates provide secure access to your development environment.

GitHub Integration: Connect your configuration repository for automated deployments and easy updates.

Scalable Resources: Allocate CPU and memory based on your development needs, from lightweight editing to heavy compilation.

Custom Domains: Use your own domain for a professional development environment URL.

Always-On Availability: Your development environment is accessible 24/7 from anywhere with internet access.

Prerequisites

Before deploying code-server on Klutch.sh, ensure you have:

A Klutch.sh account
A GitHub account with a repository for your configuration
Basic familiarity with VS Code and its features
A secure password for accessing your code-server instance
(Optional) A custom domain for your development environment

Understanding code-server Architecture

code-server transforms VS Code into a client-server application:

Node.js Backend: The server component runs VS Code’s backend, handling file operations, terminal sessions, and extension hosting.

Browser Frontend: The familiar VS Code interface runs in your browser, communicating with the server via WebSocket connections.

Extension Host: Extensions run on the server, providing full functionality including language servers, debuggers, and linters.

File System Access: The server has direct access to the file system, enabling fast file operations and project management.

Terminal Multiplexing: Multiple terminal sessions are managed server-side, providing full shell access.

Preparing Your Repository

Create a GitHub repository with your code-server configuration.

Repository Structure

code-server-deploy/
├── Dockerfile
├── config/
│   ├── settings.json
│   └── extensions.txt
└── .dockerignore

Creating the Dockerfile

Create a Dockerfile for your code-server deployment:

FROM codercom/code-server:latest

# Switch to root for installation
USER root

# Install additional development tools
RUN apt-get update && apt-get install -y \
    git \
    curl \
    wget \
    vim \
    htop \
    build-essential \
    python3 \
    python3-pip \
    nodejs \
    npm \
    && rm -rf /var/lib/apt/lists/*

# Install common global packages
RUN npm install -g typescript ts-node nodemon prettier eslint

# Create workspace directory
RUN mkdir -p /home/coder/workspace && chown -R coder:coder /home/coder/workspace

# Copy configuration files
COPY --chown=coder:coder config/settings.json /home/coder/.local/share/code-server/User/settings.json

# Copy extensions list
COPY config/extensions.txt /tmp/extensions.txt

# Switch back to coder user
USER coder

# Install extensions from list
RUN while read extension; do \
    code-server --install-extension "$extension" || true; \
done < /tmp/extensions.txt

# Set working directory
WORKDIR /home/coder/workspace

# Environment variables
ENV PASSWORD=${PASSWORD:-changeme}
ENV SUDO_PASSWORD=${SUDO_PASSWORD:-changeme}

# Expose code-server port
EXPOSE 8080

# Health check
HEALTHCHECK --interval=30s --timeout=10s --start-period=30s --retries=3 \
    CMD curl -f http://localhost:8080/healthz || exit 1

# Start code-server
ENTRYPOINT ["code-server", "--bind-addr", "0.0.0.0:8080", "--auth", "password", "/home/coder/workspace"]

Creating VS Code Settings

Create config/settings.json with your preferred VS Code configuration:

{
  "workbench.colorTheme": "Default Dark+",
  "editor.fontSize": 14,
  "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace'",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.bracketPairColorization.enabled": true,
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.defaultProfile.linux": "bash",
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "git.autofetch": true,
  "git.confirmSync": false,
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "workbench.startupEditor": "none",
  "telemetry.telemetryLevel": "off"
}

Creating Extensions List

Create config/extensions.txt with extensions to pre-install:

# Language Support
ms-python.python
golang.go
rust-lang.rust-analyzer
redhat.java

# Web Development
esbenp.prettier-vscode
dbaeumer.vscode-eslint
bradlc.vscode-tailwindcss

# Git and Version Control
eamodio.gitlens
mhutchie.git-graph

# Productivity
vscodevim.vim
alefragnani.bookmarks
streetsidesoftware.code-spell-checker

# Themes and Icons
pkief.material-icon-theme
zhuangtongfa.material-theme

# Docker and Containers
ms-azuretools.vscode-docker

# Remote Development
ms-vscode-remote.remote-ssh

# Markdown
yzhang.markdown-all-in-one

Creating the .dockerignore File

Create a .dockerignore file:

.git
.github
*.md
LICENSE
.gitignore
.DS_Store

Deploying code-server on Klutch.sh

Follow these steps to deploy your code-server instance:

Choose a Secure Password

Select a strong password for accessing your code-server instance. This will be set as an environment variable during deployment.

Customize Your Configuration

Update settings.json and extensions.txt with your preferred VS Code settings and extensions.

Push Your Repository to GitHub

Initialize and push your configuration:

git init
git add .
git commit -m "Initial code-server configuration"
git remote add origin https://github.com/yourusername/code-server-deploy.git
git push -u origin main

Create a New Project on Klutch.sh

Navigate to the Klutch.sh dashboard and create a new project named “code-server” or “dev-environment”.

Create a New App

Within your project, create a new app and connect your GitHub repository.

Configure HTTP Traffic

In the deployment settings:

Select HTTP as the traffic type
Set the internal port to 8080

Set Environment Variables

Configure the following environment variables:

Variable	Value
`PASSWORD`	Your secure password for web access
`SUDO_PASSWORD`	Password for sudo commands (optional)

Attach Persistent Volumes

Add persistent volumes for your development environment:

Mount Path	Recommended Size	Purpose
`/home/coder/workspace`	50 GB	Project files and repositories
`/home/coder/.local`	5 GB	Extensions and VS Code data
`/home/coder/.config`	1 GB	User configuration

Deploy Your Application

Click Deploy to build and start code-server. Klutch.sh will:

Build the container with your configuration
Install specified extensions
Mount persistent volumes
Start code-server with authentication

Access code-server

Once deployment completes, access your development environment at https://your-app-name.klutch.sh. Enter your password to access VS Code.

Initial Setup and Configuration

First-Time Setup

When you first access code-server:

Enter your password at the login screen
VS Code will load with your pre-configured settings
Open the Extensions view to verify your extensions installed
Configure any remaining preferences through Settings

Setting Up Git

Configure Git for your development work:

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

For GitHub access, set up SSH keys or a personal access token:

# Generate SSH key
ssh-keygen -t ed25519 -C "your.email@example.com"

# Display public key to add to GitHub
cat ~/.ssh/id_ed25519.pub

Language-Specific Setup

Configure language environments as needed:

Python:

pip3 install pylint black mypy

Node.js:

npm install -g yarn pnpm

Go:

go install golang.org/x/tools/gopls@latest

Working with Projects

Cloning Repositories

Clone your projects to the workspace:

cd /home/coder/workspace
git clone https://github.com/yourusername/your-project.git

Creating New Projects

Create new projects in your workspace:

mkdir /home/coder/workspace/new-project
cd /home/coder/workspace/new-project
npm init -y

Multi-Root Workspaces

Work with multiple projects simultaneously using VS Code workspaces:

File > Add Folder to Workspace
Select additional project directories
Save the workspace file for future sessions

Extension Management

Installing Extensions

Install extensions through the Extensions view (Ctrl+Shift+X):

Search for the extension by name
Click Install
Extensions persist in the mounted volume

Open VSX Registry

code-server uses the Open VSX Registry instead of the Microsoft marketplace. Most popular extensions are available, though some Microsoft-specific extensions may not be.

Installing Extensions via CLI

Install extensions from the terminal:

code-server --install-extension <extension-id>

Extension Recommendations

For specific development workflows:

Web Development:

esbenp.prettier-vscode
bradlc.vscode-tailwindcss
ritwickdey.liveserver

Python Development:

ms-python.python
ms-python.vscode-pylance
njpwerner.autodocstring

DevOps:

hashicorp.terraform
ms-azuretools.vscode-docker
redhat.vscode-yaml

Terminal Usage

Integrated Terminal

Access the integrated terminal with Ctrl+` (backtick):

Run build commands
Execute scripts
Manage git operations

Multiple Terminals

Create multiple terminal sessions:

Click the + icon in the terminal panel
Split terminals with the split icon
Switch between terminals using the dropdown

Terminal Profiles

Configure different terminal profiles in settings:

{
  "terminal.integrated.profiles.linux": {
    "bash": {
      "path": "/bin/bash"
    },
    "zsh": {
      "path": "/usr/bin/zsh"
    }
  }
}

Keyboard Shortcuts

Essential keyboard shortcuts for code-server:

Shortcut	Action
Ctrl+Shift+P	Command Palette
Ctrl+P	Quick File Open
Ctrl+`	Toggle Terminal
Ctrl+B	Toggle Sidebar
Ctrl+Shift+E	Explorer View
Ctrl+Shift+G	Source Control View
Ctrl+Shift+X	Extensions View
Ctrl+,	Settings
F5	Start Debugging
Ctrl+Shift+F	Search Across Files

Security Considerations

Password Protection

Always use a strong, unique password:

Minimum 16 characters
Mix of letters, numbers, and symbols
Different from other account passwords

HTTPS Only

Klutch.sh provides HTTPS automatically. Never access code-server over plain HTTP.

SSH Key Management

Protect SSH keys with passphrases:

ssh-keygen -t ed25519 -C "your.email@example.com"
# Enter a passphrase when prompted

Environment Variables

Never commit sensitive data to repositories. Use environment variables or secure secret management.

Production Best Practices

Resource Allocation

CPU: Allocate more cores for compilation-heavy work
Memory: 4GB minimum, 8GB+ recommended for larger projects
Storage: Size based on project requirements

Backup Strategy

Regular backups should include:

Project files in /home/coder/workspace
Extension data in /home/coder/.local
User configuration in /home/coder/.config

Performance Optimization

Close unused terminals
Disable unused extensions
Use workspace trust to limit extension activity

Troubleshooting Common Issues

Cannot Connect

Symptoms: Browser cannot reach code-server.

Solutions:

Verify deployment is running
Check the correct URL is being used
Clear browser cache
Try incognito mode

Extensions Not Working

Symptoms: Extensions fail to install or function.

Solutions:

Check if extension is available on Open VSX
Verify sufficient disk space
Review extension output logs
Restart code-server

Slow Performance

Symptoms: Editor feels sluggish or unresponsive.

Solutions:

Increase resource allocation
Disable unused extensions
Check network latency
Clear VS Code cache

File Changes Not Saving

Symptoms: Files revert to old versions.

Solutions:

Verify volume mounts are correct
Check disk space
Ensure file permissions are correct
Look for file lock issues

Additional Resources

Conclusion

Deploying code-server on Klutch.sh gives you a powerful, portable development environment accessible from any browser. The combination of VS Code’s rich feature set and Klutch.sh’s container management means you can code from anywhere without sacrificing functionality or convenience.

With persistent storage for your projects and configuration, pre-installed extensions for your workflow, and the full power of VS Code in your browser, code-server on Klutch.sh transforms how you approach development. Whether you’re working from a coffee shop, collaborating with teammates, or just want a consistent environment across devices, code-server delivers the complete VS Code experience wherever you are.