code-server Usage Guide

· 4 min read

While developing a Web IDE, I discovered code-server. After using it for some time, I’m summarizing some issues encountered with code-server usage and customization.

Introduction

code-server is the web version of Visual Studio Code. In its architecture, code-server actually develops vsc as a submodule, so many features are compatible. If you need a powerful development experience that’s almost identical to vsc, then code-server is very suitable.

Technology Behind Code-Server

  1. code-server is a Node.js program, but the installation package includes Node.js built-in, so you don’t need to manually install Node.js environment

  2. The code-server project itself depends on code (Visual Studio Code). This reveals that vsc is also based on Node.js, but the performance is actually quite good

  3. The editor part in code-server uses Monaco Editor, and the terminal part uses xterm.js. Both should be familiar, 😊.

Browser Support List

According to official sources, modern browsers are supported. Specific version requirements aren’t clearly defined yet, but from the technology stack perspective, it uses service workers.

  • Chrome, Firefox, Safari, Edge

Nowadays, IE has exited the stage, Edge aligns with Chrome, so service worker support is not a problem anymore.

Installation

  1. Use the official one-click installation script Cross-platform support
# Supports specifying version installation
curl -fsSL https://code-server.dev/install.sh | sh -s -- --version=4.7.1

Official documentation: https://coder.com/docs/code-server/latest/install

Due to network issues in China, if installation fails, proceed with method 2

  1. Use offline installation packages, pay attention to server architecture differences and choose appropriate packages

https://github.com/coder/code-server/releases

Distribution Package Differences

linux-amd64 represents 64-bit x86 architecture (typically called "PC" or "desktop").
linux-arm64 represents 64-bit ARM architecture (typically used for servers, mobile devices, and embedded systems).
linux-armv7l represents 32-bit ARM architecture (typically used for older Raspberry Pi or similar devices).

Running in Background

  1. Manually add to service

    cat > /usr/lib/systemd/system/code-server.service << EOF
[Unit]
Description=code-server
After=network.target

[Service]
Type=exec
Environment=HOME=/root
ExecStart=/usr/bin/code-server
Restart=always
EOF


systemctl start code-server

    Disadvantage: Requires root privileges since it needs to be added to system startup services

  2. Supervisor

    Requires installing supervisor program, which depends on Python 2 environment. Advantage is that it doesn’t require root user privileges

  3. & background running

    Directly run `code-server &

Login Authentication

$HOME/.config/code-server/config.yaml

Extensions

  1. Multiple installation methods: offline installation by placing extensions in target directory, or directly search and install from marketplace when accessing code-server web interface

code-server –help

Besides starting the service, code-server command can perform various operations

# List all command properties
code-server --help

# List installed extensions
code-server --list-extensions

# Install extension
code-server --install-extension 
...

Common Issues

Opening Specific Folder by Default

Configure folder parameter in URL

http://127.0.0.1:8080/?folder=/Users/xxx

Opening Specific Line and Column

code-server cli has -r parameter support: -r filename:row:column.

Related community discussion coder/code-server#5801

Language Switching

After installing language packs, you can switch display language in the web interface. You can also set default language directly through configuration file, provided the corresponding language pack is installed

cat << EOF >  $ROOT_PATH/.local/share/User/argv.json
{"locale": "zh-cn"}
EOF

Besides this method, another way is code-server --locale=zh-cn

Passing parameters directly via command line, disadvantage is it directly overwrites the original language setting, not recommended.

Port Forwarding

In actual usage, noticed that when starting web under code-server, code-server itself performs port forwarding, which is also a configurable setting

 // When enabled, new running processes will be detected and their listening ports will be automatically forwarded. Disabling this setting will not prevent all port forwarding. Even when disabled, extensions will still be able to cause ports to be forwarded, and opening certain URLs will still cause ports to be forwarded.
  "remote.autoForwardPorts": true,

microsoft/vscode#108346

Heartbeat

Noticed that code-server periodically sends heartbeats to the server to ensure connection stability and avoid disconnections. By default, the heartbeat interval is 5 seconds.

Main Page

For example: code-server-4.8.3-2-linux-amd64/lib/vscode/out/vs/code/browser/workbench/workbench.html

CDN

code-server itself doesn’t support CDN configuration, but it can be solved by directly modifying workbench.html since all static resource entries are here. Simply change all static resource URLs to CDN resource addresses. Prerequisite is that all static resources in the program package are already hosted on CDN.

When accessing code-server, the real dynamic content is mainly through 2 WebSocket requests and a few HTTP requests.

Code-Server Customization

code-server itself doesn’t have much customization capability

  1. Through configuration files
    • i.e., VSC configuration files
  2. Logo and other information can only be changed by modifying source code
  3. Extensions can add IDE functionality and some UI changes, such as bottom status bar, left menu - this is consistent with local vsc

Final Thoughts

If you’re considering building a web IDE, you can try code-server

[https://github.com/alanhe421/coding-note/issues/412]:

Development Web IDE
Authors
Developer, digital product enthusiast, tinkerer, sharer, open source lover

Related