DEV Community

Cover image for đŸ’» Code-server : Awesome VS Code container on browser (Useful for Fast Cloud Deploy - Fix Corporate Issues)
Javid Mougamadou
Javid Mougamadou

Posted on • Updated on

đŸ’» Code-server : Awesome VS Code container on browser (Useful for Fast Cloud Deploy - Fix Corporate Issues)

Notes

I will introduce the concept of code-server.

I am neither the creator nor the developer of the code-server.

Genesis

I ran into corporate network issues due to some limitation (proxy, firewall, powerless machine, mastered OS) since I found the opensource code-server repositories.

Concept

Coder release

GitHub logo coder / code-server

VS Code in the browser

code-server

"GitHub Discussions" "Join us on Slack" Twitter Follow codecov See latest

Run VS Code on any machine anywhere and access it in the browser.

Screenshot Screenshot

Highlights

  • Code on any device with a consistent development environment
  • Use cloud servers to speed up tests, compilations, downloads, and more
  • Preserve battery life when you're on the go; all intensive tasks run on your server

Requirements

See requirements for minimum specs, as well as instructions on how to set up a Google VM on which you can install code-server.

TL;DR: Linux machine with WebSockets enabled, 1 GB RAM, and 2 vCPUs

Getting started

There are four ways to get started:

  1. Using the install script, which automates most of the process. The script uses the system package manager if possible.
  2. Manually installing code-server
  3. Deploy code-server to your team with coder/coder
  4. Using our one-click buttons and guides to deploy code-server to a cloud provider ⚡

If you use the install script, you can preview what occurs


Actually, Code-server is VS Code running on a remote server, accessible through the browser.

Here are the main advantages :

  • Access through Web UI

  • Code on any device with a consistent development environment.

  • All intensive computation runs on your server.

  • Preserve battery life when you're on the go.

  • You're no longer running excess instances of Chrome.

  • Easy collaboration

You can take a tour to the coder website which offers a free version and an enterprise extended version with 24/7h support and provides cloud server auto-deployment (Coder).

Image

Linuxserver release

Image

linuxserver.io

Blog Discord Discourse Fleet GitHub Open Collective

The LinuxServer.io team brings you another container release featuring:

  • regular and timely application updates
  • easy user mappings (PGID, PUID)
  • custom base image with s6 overlay
  • weekly base OS updates with common layers across the entire LinuxServer.io ecosystem to minimise space usage, down time and bandwidth
  • regular security updates

Find us at:

  • Blog - all the things you can do with our containers including How-To guides, opinions and much more!
  • Discord - realtime support / chat with the community and the team.
  • Discourse - post on our community forum.
  • Fleet - an online web interface which displays all of our maintained images.
  • GitHub - view the source for all of our repositories.
  • Open Collective - please consider helping us by either donating or contributing to our budget

Scarf.io pulls GitHub Stars GitHub Release GitHub Package Repository GitLab Container Registry Quay.io Docker Pulls Docker Stars Jenkins Build LSIO CI

Code-server is VS Code running on a remote server, accessible through the browser.

  • Code on your Chromebook, tablet, and laptop with a consistent


The LinuxServer.io team brings a container release linuxserver/code-server. It offers more flexibility and customization than the coder release. It embeds a VS code with some layers (Docker, Python, NodeJS, Java, PHP, etc ... -> docker-mods) and some default packages.

Here are the main features :

  • Custom base docker image with S6 overlay (for more details : just-containers/s6-overlay)

  • Full customisation and docker layer mods integration (linuxserver/docker-mods)

  • Weekly base OS updates and regular security updates

  • Easy authentication setup

  • Domain proxying

  • etc ...

Here is the list of layers : https://mods.linuxserver.io/?mod=code-server.

There is also other version/repository of the code-server.

Image

Requirements (for linuxserver/code-server)

  • Docker
  • 1 GB of RAM minimum (2 or 4 GB of RAM is better)
  • 2 CPU cores minimum

See for more details : https://github.com/coder/code-server/blob/main/docs/requirements.md

Installation (for linuxserver/code-server)

Here is a sample of the docker-compose.yml then you get started creating the container.



---
version: "2.1"
services:
  code-server:
    image: linuxserver/code-server:latest
    container_name: code-server
    environment:
      - PUID=1000
      - PGID=1000
      - TZ=Europe/London
      - PASSWORD=password #optional
      - HASHED_PASSWORD= #optional
      - SUDO_PASSWORD=password #optional
      - SUDO_PASSWORD_HASH= #optional
      - PROXY_DOMAIN=code-server.my.domain #optional
      - DEFAULT_WORKSPACE=/config/workspace #optional
      - DOCKER_MODS=linuxserver/mods:python #example
    volumes:
      - /path/to/appdata/config:/config
    ports:
      - 8443:8443
    restart: unless-stopped


Enter fullscreen mode Exit fullscreen mode
Parameter Function
-p 8443 web gui
-e PUID=1000 for UserID - see below for explanation
-e PGID=1000 for GroupID - see below for explanation
-e TZ=Europe/London Specify a timezone to use EG Europe/London
-e PASSWORD=password Optional web gui password, if PASSWORD or HASHED_PASSWORD is not provided, there will be no auth.
-e HASHED_PASSWORD= Optional web gui password, overrides PASSWORD, instructions on how to create it is below.
-e SUDO_PASSWORD=password If this optional variable is set, user will have sudo access in the code-server terminal with the specified password.
-e SUDO_PASSWORD_HASH= Optionally set sudo password via hash (takes priority over SUDO_PASSWORD var). Format is $type$salt$hashed.
-e PROXY_DOMAIN=code-server.my.domain If this optional variable is set, this domain will be proxied for subdomain proxying. See Documentation
-e DEFAULT_WORKSPACE=/config/workspace If this optional variable is set, code-server will open this directory by default
-v /config Contains all relevant configuration files.

See for more details : https://github.com/linuxserver/docker-code-server#parameters

Getting started (for linuxserver/code-server)

You just have to run the container, open your browser and go to the url http://localhost:8443 .

My use case

I implemented a system which allows to create, edit, restart, delete a code-server instance through a WEB UI with a tiny interface and some buttons. I prepared an instance with default packages and default configuration in order to be usable in the internal corporate network.

I added a feature that allows to save, restore, duplicate and share the entire instance with extensions, code and packages through the docker commit command (ex: code-server templates). I also added custom mods which are custom docker images (like Jupyter, Django, React, etc ...).

I used the combination of Django + Ansible + Nginx + Docker for the implementation of the system (code-server generator). Thanks to Nginx with an overlay attachable docker swarm network, I can reach all instances through one route/endpoint. If you are interested, I can give more details about the entire stack.

Conclusion

This concept allows to get a readymade developer container with VS Code and desired layers/packages improving the developer experience.

For corporate usage, it allows to deploy a custom instance, which works inside the corporate network (proxy, firewall, etc ...). In my case, I deployed 100 instances in one powerful worker allowing us to reduce the cost of the single machines vs the worker. It also permits to solve most common problem and improving the time spent for the installation and the development of an application directly with the code-server instance.

For personal usage, it could be deployed locally or remotely and be used to have a single container with dotfiles and needed layers. But in fact, it is more relevant if multiple instances are used.

There are other use cases :

  • a fast deploy (for saving installation time)

  • a temporary usage (for an intern)

  • an event (ex: Hackaton - generate multiple code-server)

  • improve the developer environment

  • testing the code-server

And you, what do you think about this solution ?

Dev.to Posts

Links

Top comments (2)

Collapse
 
murilokaos profile image
Murilo Henrique

You can share the code-server generator?

Collapse
 
vitigomez profile image
VĂ­ctor GĂłmez

Can you give more details about the entire stack, like code-server instances management?