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.