Skip to main content

Code-server

What is code-server?​

Code-server is an open-source project that allows you to run Visual Studio Code (VSCode) on a remote server through the browser.

VSCode is an open-source code editor by Microsoft that offers features like IntelliSense, Git integration, and plugins, while staying relatively lightweight.

Securing code-server with Pomerium​

Because code-server has an unwieldy password authentication process, developer teams use Pomerium to add authentication and authorization to an online instance of Visual Studio Code hosted by code-server.

This guide shows you how to secure code-server with Pomerium. The result allows developer teams to safely expose their code-server and write code using VSCode in the browser:

visual studio code with pomerium

Set up your environment​

This guide uses the config.yaml and docker-compose.yaml files defined in the Pomerium quickstart to deploy code-server.

To complete this guide, you need:

Note

This guide uses GitHub as the pre-configured IdP.

Configure Pomerium​

In your config.yaml file, add the following route:

# routes:
#   - from: https://verify.localhost.pomerium.io
#     to: http://verify:8000
#     policy:
#       - allow:
#           or:
#             - email:
#                 is: user@example.com
#     pass_identity_headers: true
---
- from: https://code.localhost.pomerium.io
  to: http://codeserver:8080
  policy:
    - allow:
        or:
          - email:
              is: user@example.com
  allow_any_authenticated_user: true
  allow_websockets: true
Note

In this example route, code.localhost.pomerium.io is the publicly accessible route. codeserver is the local hostname for the server or container running code-server.

Configure Docker Compose​

In the services section of your docker-compose.yaml file, add a block for code-server:

services:
  codeserver:
    image: codercom/code-server:latest
    restart: always
    ports:
      - 8080:8080
    volumes:
      - ./code-server:/home/coder/project
    command: --auth none --disable-telemetry /home/coder/project

Run Docker Compose​

To see if you configured your routes correctly:

  1. Run docker-compose up
  2. Navigate to https://code.localhost.pomerium.io
  3. Authorize Pomerium to access the account associated with your IdP

You will be redirected to the route defined in config.yaml:

visual studio code pomerium hello world

Build a project in code-server​

Test out code-server by building a quick front-end project.

  1. Create an index.html file and add the following code:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Code-Server Sample</title>
  </head>
  <body>
    <h1 style="color:blueviolet">Check out more from Pomerium:</h1>
    <ul style="font-size: 20px;">
      <li><a href="https://www.pomerium.com/docs/guides">Guides</a></li>
      <li><a href="https://www.pomerium.com/blog/">Blog</a></li>
      <li><a href="https://www.pomerium.com/docs">Documentation</a></li>
    </ul>
    <h2 style="color:blueviolet">Happy coding!</h2>
  </body>
</html>
  1. Go to Extensions and install Live Server
  2. Right-click index.html and select Open with Live Server
  3. Select any of the links to learn more about Pomerium

Great job! You successfully deployed code-server.

tip

When the code-server container is rebuilt, any files outside of /home/coder/project are reset, removing any dependencies (such as go and make). In a real remote development workflow, you could mount additional volumes, or use a custom code-server container with these dependencies installed.