code-server

repository·main·Indexed 13 days ago

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

Run VS Code on any machine and access it via a web browser to provide a consistent development environment on any device. Includes guides for installation via automated scripts, manual setup on Android (UserLAnd, Nix-on-Droid), and deployment within Coder templates. Features support for Open-VSX extensions, custom configuration via YAML, and PWA installation to resolve browser keyboard shortcut conflicts.

Tokens
23.2K
Snippets
93
Records
123
Agent score
99%

What's inside code-server

  1. Alternative ways to deploy code-server

    main

    Depending on your use case, there are several ways to deploy code-server:

    1. Manual Installation: Follow the manual installation guides for specific operating systems.
    2. Cloud Providers: Use one-click deployment buttons and guides to deploy to cloud providers.
    3. Devcontainers: Use the code-server feature for devcontainers if your project already utilizes the devcontainer standard.
    4. Team/Enterprise Deployment: For managing code-server at scale for a team on your own infrastructure, use coder/coder.
  2. How code-server determines which workspace or folder to open

    main

    code-server resolves the workspace or folder to open using the following priority order:

    1. The workspace query parameter in the URL.
    2. The folder query parameter in the URL.
    3. The workspace or directory passed as a command-line argument.
    4. The last opened workspace or directory.
  3. Add extra containers or init containers

    main

    Use extraContainers to add regular containers to the pod, or extraInitContainers to add initialization containers. Both parameters accept strings that are used as templates. This is useful for pre-installing extensions or performing setup tasks before the main container starts.

    extraInitContainers: |
      - name: customization
        image: {{ .Values.image.repository }}:{{ .Values.image.tag }}
        imagePullPolicy: IfNotPresent
        env:
          - name: SERVICE_URL
            value: https://open-vsx.org/vscode/gallery
          - name: ITEM_URL
            value: https://open-vsx.org/vscode/item
        command:
          - sh
          - -c
          - |
            code-server --install-extension ms-python.python
            code-server --install-extension golang.Go
        volumeMounts:
          - name: data
            mountPath: /home/coder
  4. Why code-server uses Open-VSX instead of Microsoft's Marketplace

    main

    code-server uses the Open-VSX extension gallery because Microsoft's Terms of Service prohibit non-Microsoft VS Code products from accessing their marketplace.

    As a result, certain closed-source Microsoft extensions are unavailable in code-server, specifically:

    1. Live Share
    2. Remote Extensions (SSH, Containers, WSL)
  5. Expose code-server using Let's Encrypt with Caddy

    main

    Use Caddy to provide HTTPS via Let's Encrypt. This is ideal for accessing code-server from devices like iPads.

    Prerequisites

    • An internet-exposed instance allowing HTTP/HTTPS traffic.
    • A domain name with an A record pointing to your instance's IP.

    Setup

    1. Install Caddy:
      sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https
      curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
      curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
      sudo apt update
      sudo apt install caddy
    2. Configure Caddyfile (/etc/caddy/Caddyfile): For a root domain:
      mydomain.com {
        reverse_proxy 127.0.0.1:8080
      }
      For a sub-path (e.g., mydomain.com/code/):
      mydomain.com/code/* {
        uri strip_prefix /code
        reverse_proxy 127.0.0.1:8080
      }
    3. Reload Caddy:
      sudo systemctl reload caddy
    mydomain.com {
      reverse_proxy 127.0.0.1:8080
    }
  6. Install code-server via npm

    main

    Use npm to install code-server if:

    1. You are not on an amd64 or arm64 architecture.
    2. You are on Linux with glibc < v2.28 or glibcxx < v3.4.21.
    3. You are running Alpine Linux or a non-glibc libc.

    Note: Installing via npm builds native modules during installation and requires C dependencies.

    npm install --global code-server
  7. Grant macOS permissions for folder access

    main

    On newer macOS versions, code-server may require permission to access folders like Desktop, Documents, Pictures, or Downloads. Since Node.js does not implement macOS permission requests natively, you may need to grant the Node.js binary Full Disk Access:

    1. Find the Node.js path: which node.
    2. Open System Preferences > Security & Privacy > Privacy > Full Disk Access.
    3. Click the lock icon to unlock.
    4. Click + and select the Node.js binary identified in step 1.
    $ which node
    /usr/local/bin/node
  8. Install and run code-server on Android using UserLAnd

    main

    To run code-server on an Android device using UserLAnd, follow these steps to set up an Ubuntu environment, install Node.js via nvm, and install code-server globally.

    1. Install UserLAnd from Google Play.
    2. Install an Ubuntu VM within the app and start it.
    3. Install required system packages: sudo apt install nodejs npm curl -y.
    4. Install nvm using the official install script.
    5. Exit the terminal and reopen it to refresh the environment.
    6. Install and switch to Node.js 22 using nvm.
    7. Install code-server globally using npm.
    8. Launch the server and access it via localhost:8080 in your browser.
    # 1. Install system dependencies
    sudo apt install nodejs npm curl -y
    
    # 2. Install nvm
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
    
    # 3. Install and use Node.js 22
    nvm install 22
    nvm use 22
    
    # 4. Install code-server globally
    npm install --global code-server
    
    # 5. Run code-server
    code-server
  9. Install code-server via npm

    main

    To install code-server using npm, you must first install the OS-specific dependencies required to build the native modules used by VS Code.

    Warning: Do not use yarn to install code-server. yarn does not respect lockfiles for distributed applications in the same way npm does, which can lead to unexpected behavior by installing versions different from those used in a specific code-server release.

    After installing the required dependencies for your operating system, install the package globally and run it:

    npm install --global code-server
    code-server

    Once running, visit http://127.0.0.1:8080. Your access password is located in ~/.config/code-server/config.yaml.

  10. Configure proxying for React, Vue, Angular, and Svelte apps

    main

    When proxying modern web frameworks through code-server, you often need to adjust their base paths or socket configurations to match the proxy URL.

    React (create-react-app)

    You must use the /absproxy/<port> method. Inform the app of the path via $PUBLIC_URL and webpack via $WDS_SOCKET_PATH:

    PUBLIC_URL=/absproxy/3000 \
      WDS_SOCKET_PATH=$PUBLIC_URL/sockjs-node \
      BROWSER=none yarn start

    Vue

    Update vue.config.js to set the publicPath and sockPath:

    module.exports = {
      devServer: {
        port: 3454,
        sockPath: "sockjs-node",
      },
      publicPath: "/absproxy/3454",
    }

    Angular

    1. Use <base href="./"> in src/index.html.
    2. Add --serve-path /absproxy/4200 to the ng serve command in package.json.

    Svelte

    Update svelte.config.js to set the kit base path:

    const config = {
      kit: {
        paths: {
          base: "/absproxy/5173",
        },
      },
    }
    PUBLIC_URL=/absproxy/3000 \
      WDS_SOCKET_PATH=$PUBLIC_URL/sockjs-node \
      BROWSER=none yarn start
  11. Install an extension

    main

    You can install extensions in code-server using two primary methods:

    From the Coder extension marketplace

    Use the built-in marketplace interface within the code-server UI.

    From a downloaded VSIX file

    Install an extension manually from a .vsix file located on your file system using the CLI.

    Example command:

    code-server --install-extension <extension-id>
    code-server --install-extension wesbos.theme-cobalt2