Convert Figma logo to code with AI

gitpod-io logoopenvscode-server

Run upstream VS Code on a remote machine with access through a modern web browser from any device, anywhere.

4,935
427
4,935
91

Top Related Projects

162,288

Visual Studio Code

VS Code in the browser

19,861

Eclipse Theia is a cloud & desktop IDE framework implemented in TypeScript.

12,708

The developer platform for on-demand cloud development environments to create software faster and more securely.

6,953

Kubernetes based Cloud Development Environments for Enterprise Teams

Quick Overview

OpenVSCode Server is an open-source project that allows running VS Code in the browser. It provides a server implementation that runs VS Code's web bits, enabling remote development and cloud-based IDEs. This project is maintained by Gitpod and serves as a foundation for browser-based development environments.

Pros

  • Enables browser-based access to VS Code, improving accessibility and portability
  • Supports remote development workflows, allowing users to code from any device
  • Integrates well with cloud-based development environments and platforms
  • Open-source nature allows for community contributions and customizations

Cons

  • May have performance limitations compared to the native VS Code application
  • Requires server setup and maintenance, which can be complex for some users
  • Potential security concerns when exposing the server to the internet
  • Some VS Code extensions may not be fully compatible with the web-based version

Getting Started

To run OpenVSCode Server, follow these steps:

  1. Download the latest release from the GitHub repository
  2. Extract the archive and navigate to the extracted directory
  3. Run the server using the following command:
./openvscode-server --without-connection-token
  1. Open a web browser and navigate to http://localhost:3000 to access VS Code in the browser

For more advanced configurations and deployment options, refer to the project's documentation on GitHub.

Competitor Comparisons

162,288

Visual Studio Code

Pros of VS Code

  • Larger community and ecosystem, with more extensions and resources available
  • More frequent updates and feature releases
  • Better integration with other Microsoft developer tools and services

Cons of VS Code

  • Larger codebase and resource footprint, potentially slower performance
  • Less focused on remote development and cloud-based workflows
  • More complex setup for self-hosting and customization

Code Comparison

VS Code (client-side):

export class CodeEditorWidget extends Disposable implements ICodeEditor {
    private readonly _domElement: HTMLElement;
    private readonly _configuration: IEditorConfiguration;
    // ... more properties and methods
}

OpenVSCode Server (server-side):

export class RemoteEditorService implements IRemoteEditorService {
    private readonly _proxy: IRemoteEditorServiceProxy;
    constructor(
        @IRemoteAgentService private readonly remoteAgentService: IRemoteAgentService
    ) {
        // ... initialization
    }
    // ... methods for remote editing
}

The code snippets highlight the difference in focus: VS Code emphasizes client-side editor functionality, while OpenVSCode Server includes server-side components for remote editing capabilities.

VS Code in the browser

Pros of code-server

  • More mature project with a larger community and longer development history
  • Supports a wider range of authentication methods, including built-in password auth
  • Offers additional features like SSH support and proxy settings

Cons of code-server

  • Larger resource footprint, potentially slower startup times
  • Less frequently updated compared to openvscode-server
  • Some features may require additional configuration or setup

Code Comparison

openvscode-server:

docker run -it --init -p 3000:3000 -v "$(pwd):/home/workspace:cached" gitpod/openvscode-server

code-server:

docker run -it --name code-server -p 8080:8080 \
  -v "$HOME/.config:/home/coder/.config" \
  -v "$PWD:/home/coder/project" \
  codercom/code-server:latest

Key Differences

  • openvscode-server is more lightweight and focused on providing a pure VS Code experience
  • code-server offers more customization options and additional features
  • openvscode-server is maintained by Gitpod, while code-server is developed by Coder
  • Both projects aim to provide a web-based VS Code experience, but with different approaches and target use cases
19,861

Eclipse Theia is a cloud & desktop IDE framework implemented in TypeScript.

Pros of Theia

  • More flexible and customizable architecture, allowing for easier integration into various applications
  • Supports multiple programming languages and can be extended with custom language servers
  • Offers a wider range of UI customization options

Cons of Theia

  • Steeper learning curve for developers due to its more complex architecture
  • May require more setup and configuration compared to OpenVSCode Server
  • Potentially larger resource footprint, especially for simpler use cases

Code Comparison

Theia (TypeScript):

import { injectable } from 'inversify';
import { MenuModelRegistry } from '@theia/core';

@injectable()
export class MyMenuContribution implements MenuContribution {
    registerMenus(menus: MenuModelRegistry): void {
        // Menu registration logic
    }
}

OpenVSCode Server (JavaScript):

const vscode = require('vscode');

function activate(context) {
    let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
        vscode.window.showInformationMessage('Hello World!');
    });
    context.subscriptions.push(disposable);
}

Both projects aim to provide web-based IDE experiences, but Theia offers more flexibility and customization at the cost of increased complexity. OpenVSCode Server provides a more straightforward setup and familiar VS Code experience, making it easier for developers already accustomed to VS Code. The choice between the two depends on specific project requirements and development team preferences.

12,708

The developer platform for on-demand cloud development environments to create software faster and more securely.

Pros of Gitpod

  • Full-featured cloud development environment with workspace management
  • Supports multiple IDEs and integrates with various version control systems
  • Offers team collaboration features and custom workspace configurations

Cons of Gitpod

  • More complex setup and configuration compared to OpenVSCode Server
  • Requires more resources to run due to its comprehensive feature set
  • May have a steeper learning curve for new users

Code Comparison

Gitpod configuration example:

image: gitpod/workspace-full
tasks:
  - init: npm install
    command: npm start

OpenVSCode Server startup command:

openvscode-server --port 3000 --host 0.0.0.0

Summary

Gitpod is a more comprehensive cloud development platform, offering workspace management, team collaboration, and support for multiple IDEs. It's suitable for larger teams and complex projects. OpenVSCode Server, on the other hand, is a lightweight solution that provides a browser-based VS Code experience, making it ideal for simpler setups or individual developers who prefer a more straightforward approach to remote development.

6,953

Kubernetes based Cloud Development Environments for Enterprise Teams

Pros of Eclipse Che

  • More comprehensive workspace management with multi-container support
  • Built-in team collaboration features and user management
  • Broader language and framework support out-of-the-box

Cons of Eclipse Che

  • Steeper learning curve and more complex setup process
  • Heavier resource requirements for deployment and operation
  • Less seamless integration with standard VS Code extensions

Code Comparison

Eclipse Che workspace configuration:

apiVersion: 1.0.0
metadata:
  name: python-project
projects:
  - name: my-python-app
    source:
      location: https://github.com/user/python-app.git
      type: git
components:
  - type: chePlugin
    id: ms-python/python/latest

OpenVSCode Server configuration:

{
  "image": "gitpod/openvscode-server",
  "extensions": ["ms-python.python"],
  "workspaceFolder": "/workspace/python-app"
}

Both projects aim to provide cloud-based development environments, but Eclipse Che offers a more feature-rich platform for enterprise-level development and collaboration. OpenVSCode Server, on the other hand, provides a lighter-weight solution that closely mimics the standard VS Code experience in a browser-based environment.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

OpenVSCode Server

Gitpod ready-to-code GitHub Discord

What is this?

This project provides a version of VS Code that runs a server on a remote machine and allows access through a modern web browser. It's based on the very same architecture used by Gitpod or GitHub Codespaces at scale.

Screenshot 2021-09-02 at 08 39 26

Why?

VS Code has traditionally been a desktop IDE built with web technologies. A few years back, people started patching it in order to run it in a remote context and to make it accessible through web browsers. These efforts have been complex and error prone, because many changes had to be made across the large code base of VS Code.

Luckily, in 2019 the VS Code team started to refactor its architecture to support a browser-based working mode. While this architecture has been adopted by Gitpod and GitHub, the important bits have not been open-sourced, until now. As a result, many people in the community still use the old, hard to maintain and error-prone approach.

At Gitpod, we've been asked a lot about how we do it. So we thought we might as well share the minimal set of changes needed so people can rely on the latest version of VS Code, have a straightforward upgrade path and low maintenance effort.

Getting started

Docker

  • Start the server:
docker run -it --init -p 3000:3000 -v "$(pwd):/home/workspace:cached" gitpod/openvscode-server
  • Visit the URL printed in your terminal.

Note: Feel free to use the nightly tag to test the latest version, i.e. gitpod/openvscode-server:nightly.

Custom Environment

  • If you want to add dependencies to this Docker image, here is a template to help:
    
    FROM gitpod/openvscode-server:latest
    
    USER root # to get permissions to install packages and such
    RUN # the installation process for software needed
    USER openvscode-server # to restore permissions for the web interface
    
    
  • For additional possibilities, please consult the Dockerfile for OpenVSCode Server at https://github.com/gitpod-io/openvscode-releases/

Pre-installing VSCode extensions

You can pre-install vscode extensions in such a way:

FROM gitpod/openvscode-server:latest

ENV OPENVSCODE_SERVER_ROOT="/home/.openvscode-server"
ENV OPENVSCODE="${OPENVSCODE_SERVER_ROOT}/bin/openvscode-server"

SHELL ["/bin/bash", "-c"]
RUN \
    # Direct download links to external .vsix not available on https://open-vsx.org/
    # The two links here are just used as example, they are actually available on https://open-vsx.org/
    urls=(\
        https://github.com/rust-lang/rust-analyzer/releases/download/2022-12-26/rust-analyzer-linux-x64.vsix \
        https://github.com/VSCodeVim/Vim/releases/download/v1.24.3/vim-1.24.3.vsix \
    )\
    # Create a tmp dir for downloading
    && tdir=/tmp/exts && mkdir -p "${tdir}" && cd "${tdir}" \
    # Download via wget from $urls array.
    && wget "${urls[@]}" && \
    # List the extensions in this array
    exts=(\
        # From https://open-vsx.org/ registry directly
        gitpod.gitpod-theme \
        # From filesystem, .vsix that we downloaded (using bash wildcard '*')
        "${tdir}"/* \
    )\
    # Install the $exts
    && for ext in "${exts[@]}"; do ${OPENVSCODE} --install-extension "${ext}"; done

Linux

  • Download the latest release

  • Untar and run the server

    tar -xzf openvscode-server-v${OPENVSCODE_SERVER_VERSION}.tar.gz
    cd openvscode-server-v${OPENVSCODE_SERVER_VERSION}
    ./bin/openvscode-server # you can add arguments here, use --help to list all of the possible options
    

    From the possible entrypoint arguments, the most notable ones are

    • --port - the port number to start the server on, this is 3000 by default
    • --without-connection-token - used by default in the docker image
    • --connection-token & --connection-token-file for securing access to the IDE, you can read more about it in Securing access to your IDE.
    • --host - determines the host the server is listening on. It defaults to localhost, so for accessing remotely it's a good idea to add --host 0.0.0.0 to your launch arguments.
  • Visit the URL printed in your terminal.

Note: You can use pre-releases to test nightly changes.

Securing access to your IDE

Since OpenVSCode Server v1.64, you can access the Web UI without authentication (anyone can access the IDE using just the hostname and port), if you need some kind of basic authentication then you can start the server with --connection-token YOUR_TOKEN, the provided YOUR_TOKEN will be used and the authenticated URL will be displayed in your terminal once you start the server. You can also create a plaintext file with the desired token as its contents and provide it to the server with --connection-token-file YOUR_SECRET_TOKEN_FILE.

If you want to use a connection token and are working with OpenVSCode Server via the Docker image, you will have to edit the ENTRYPOINT in the Dockerfile or modify it with the entrypoint option when working with docker-compose.

Deployment guides

Please refer to Guides to learn how to deploy OpenVSCode Server to your cloud provider of choice.

The scope of this project

This project only adds minimal bits required to run VS Code in a server scenario. We have no intention of changing VS Code in any way or to add additional features to VS Code itself. Please report feature requests, bug fixes, etc. in the upstream repository.

For any feature requests, bug reports, or contributions that are not specific to running VS Code in a server context, please go to Visual Studio Code - Open Source "OSS"

Documentation

All documentation is available in the docs branch of this project.

Supporters

The project is supported by companies such as GitLab, VMware, Uber, SAP, Sourcegraph, RStudio, SUSE, Tabnine, Render and TypeFox.

Contributing

Thanks for your interest in contributing to the project 🙏. You can start a development environment with the following button:

Open in Gitpod

To learn about the code structure and other topics related to contributing, please refer to the development docs.

Bundled Extensions

VS Code includes a set of built-in extensions located in the extensions folder, including grammars and snippets for many languages. Extensions that provide rich language support (code completion, Go to Definition) for a language have the suffix language-features. For example, the json extension provides coloring for JSON and the json-language-features extension provides rich language support for JSON.

Development Container

This repository includes a Visual Studio Code Dev Containers / GitHub Codespaces development container.

  • For Dev Containers, use the Dev Containers: Clone Repository in Container Volume... command which creates a Docker volume for better disk I/O on macOS and Windows.
    • If you already have VS Code and Docker installed, you can also click here to get started. This will cause VS Code to automatically install the Dev Containers extension if needed, clone the source code into a container volume, and spin up a dev container for use.
  • For Codespaces, install the GitHub Codespaces extension in VS Code, and use the Codespaces: Create New Codespace command.

Docker / the Codespace should have at least 4 Cores and 6 GB of RAM (8 GB recommended) to run full build. See the development container README for more information.

Legal

This project is not affiliated with Microsoft Corporation.