$docker.recipes

OpenVSCode Server

beginner

VS Code in browser with Git and terminal.

[i]Overview

OpenVSCode Server is an open-source project developed by Gitpod that brings the full Microsoft Visual Studio Code experience to any web browser. Unlike traditional desktop IDEs, OpenVSCode Server runs as a web application, allowing developers to access their complete development environment from any device with internet connectivity. This browser-based approach eliminates the need for local VS Code installations while maintaining full compatibility with extensions, themes, and workspace configurations. This stack combines OpenVSCode Server with NGINX to create a robust web-based development platform. NGINX serves as a high-performance reverse proxy, providing SSL termination, request routing, and static file serving capabilities that enhance the VS Code web interface. The combination addresses common challenges in remote development scenarios, including secure access management, performance optimization for large codebases, and reliable session handling for long-running development tasks. Development teams working with distributed workflows, organizations requiring standardized development environments, and individual developers seeking device-independent coding solutions will find this stack particularly valuable. The OpenVSCode Server and NGINX pairing excels in scenarios where consistent development environments across team members are crucial, or when accessing powerful remote development servers from lightweight client devices like tablets or Chromebooks is necessary.

[*]Key Features

  • [+]Full Visual Studio Code interface accessible through any modern web browser
  • [+]Native support for VS Code extensions including language servers, debuggers, and themes
  • [+]Built-in terminal with shell access for command-line operations and Git workflows
  • [+]Token-based authentication system for secure remote access control
  • [+]Persistent workspace storage maintaining files, settings, and project state
  • [+]NGINX reverse proxy providing HTTP request optimization and static asset caching
  • [+]Multi-user workspace isolation through container user mapping
  • [+]Real-time file synchronization between browser interface and container filesystem

[#]Common Use Cases

  • [1]Remote development teams needing consistent IDE environments across different operating systems
  • [2]Educational institutions providing standardized coding environments for students on various devices
  • [3]Developers working on resource-intensive projects requiring powerful server hardware
  • [4]Organizations implementing zero-trust security models with centralized development infrastructure
  • [5]Freelancers and consultants accessing client codebases from multiple locations and devices
  • [6]Code review workflows where reviewers need full IDE functionality without local setup
  • [7]Development on locked-down corporate networks where desktop software installation is restricted

[!]Prerequisites

  • [!]Docker Engine 20.10+ and Docker Compose V2 for container orchestration
  • [!]Minimum 2GB RAM allocation for OpenVSCode Server container operations
  • [!]Available ports 3000 and 80 for OpenVSCode Server and NGINX respectively
  • [!]Modern web browser with WebSocket support for real-time IDE functionality
  • [!]Basic understanding of VS Code extension management and workspace configuration
  • [!]File system permissions for volume mounting if using custom project directories
[!]

WARNING: For development & testing. Review security settings, change default credentials, and test thoroughly before production use. See Terms

[$]docker-compose.yml

[docker-compose.yml]
1services:
2 openvscode-server:
3 image: gitpod/openvscode-server:latest
4 container_name: openvscode-server
5 restart: unless-stopped
6 ports:
7 - "${VSCODE_PORT:-3000}:3000"
8 environment:
9 - CONNECTION_TOKEN=${CONNECTION_TOKEN}
10 volumes:
11 - vscode_home:/home/workspace
12 - ${PROJECT_PATH:-./projects}:/home/workspace/projects
13 user: "1000:1000"
14
15 nginx:
16 image: nginx:alpine
17 container_name: vscode-nginx
18 restart: unless-stopped
19 ports:
20 - "${NGINX_PORT:-80}:80"
21 volumes:
22 - ./nginx.conf:/etc/nginx/nginx.conf:ro
23
24volumes:
25 vscode_home:

[$].env Template

[.env]
1# OpenVSCode Server
2VSCODE_PORT=3000
3CONNECTION_TOKEN=your_secure_token
4PROJECT_PATH=./projects
5NGINX_PORT=80

[i]Usage Notes

  1. [1]VS Code at http://localhost:3000
  2. [2]Use token for authentication
  3. [3]Mount project directories
  4. [4]Install extensions as needed

Individual Services(2 services)

Copy individual services to mix and match with your existing compose files.

openvscode-server
openvscode-server:
  image: gitpod/openvscode-server:latest
  container_name: openvscode-server
  restart: unless-stopped
  ports:
    - ${VSCODE_PORT:-3000}:3000
  environment:
    - CONNECTION_TOKEN=${CONNECTION_TOKEN}
  volumes:
    - vscode_home:/home/workspace
    - ${PROJECT_PATH:-./projects}:/home/workspace/projects
  user: "1000:1000"
nginx
nginx:
  image: nginx:alpine
  container_name: vscode-nginx
  restart: unless-stopped
  ports:
    - ${NGINX_PORT:-80}:80
  volumes:
    - ./nginx.conf:/etc/nginx/nginx.conf:ro

[>]Quick Start

[terminal]
1# 1. Create the compose file
2cat > docker-compose.yml << 'EOF'
3services:
4 openvscode-server:
5 image: gitpod/openvscode-server:latest
6 container_name: openvscode-server
7 restart: unless-stopped
8 ports:
9 - "${VSCODE_PORT:-3000}:3000"
10 environment:
11 - CONNECTION_TOKEN=${CONNECTION_TOKEN}
12 volumes:
13 - vscode_home:/home/workspace
14 - ${PROJECT_PATH:-./projects}:/home/workspace/projects
15 user: "1000:1000"
16
17 nginx:
18 image: nginx:alpine
19 container_name: vscode-nginx
20 restart: unless-stopped
21 ports:
22 - "${NGINX_PORT:-80}:80"
23 volumes:
24 - ./nginx.conf:/etc/nginx/nginx.conf:ro
25
26volumes:
27 vscode_home:
28EOF
29
30# 2. Create the .env file
31cat > .env << 'EOF'
32# OpenVSCode Server
33VSCODE_PORT=3000
34CONNECTION_TOKEN=your_secure_token
35PROJECT_PATH=./projects
36NGINX_PORT=80
37EOF
38
39# 3. Start the services
40docker compose up -d
41
42# 4. View logs
43docker compose logs -f

[>]One-Liner

Run this command to download and set up the recipe in one step:

[terminal]
1curl -fsSL https://docker.recipes/api/recipes/openvscode-server-stack/run | bash

[?]Troubleshooting

  • [!]Connection token authentication failing: Verify CONNECTION_TOKEN environment variable is set and matches the token used in browser URL
  • [!]Extensions not installing or loading: Check container has sufficient disk space and restart OpenVSCode Server container after failed installations
  • [!]File permissions denied in workspace: Ensure USER_ID and GROUP_ID environment variables match your host system user for proper volume mounting
  • [!]NGINX proxy errors or timeouts: Verify nginx.conf proxy_pass directive points to correct OpenVSCode Server container name and port
  • [!]Workspace files not persisting: Confirm vscode_home volume is properly created and mounted to /home/workspace in container
  • [!]Browser disconnections during large file operations: Increase NGINX proxy timeout values and WebSocket connection limits in configuration

Community Notes

Loading...
Loading notes...

## Download Recipe Kit

Get all files in a ready-to-deploy package

Includes docker-compose.yml, .env template, README, and license