Visual Studio Code Server

Overview

This recipe teaches you how to create a Docker-based Viash component that runs Visual Studio Code Server and comes with Viash itself.
With this setup, you can run an instance of VS Code in your web browser that can access your local files and makes it easy to develop Viash components, all without needing to install anything besides Viash and Docker.
This recipe consists of a config file and a bash script to create a component.

Ingredients

For this recipe, you’ll need:

Creating the component

Config file

Create a new folder named vs_code_viash and create a new file named config.vsh.yaml inside of it. Add the following as its content:

functionality:
  name: vs_code_viash
  version: 1.0
  description: "VS Code server with Viash and must-have extensions included. Runs in a web browser."
  resources:
  - type: bash_script
    path: script.sh
  arguments:
  - name: "--dir"
    alternatives: ["-d"]
    type: file
    description: Directory to mount
    direction: input
    default: ./
  - name: "--sudo_pw"
    alternatives: ["-s"]
    type: string
    description: Sudo password
    default: password
  - name: "--puid_guid"
    alternatives: ["-p"]
    type: integer
    description: PUID and GUID to use as owner of files in container. Match these with your own user id (use the command 'id $user').
    default: 1000
platforms:
- type: docker
  image: linuxserver/code-server:latest
  privileged: true
  port: [ "8443:8443" ]
  run_args: ["--volume /var/run/docker.sock:/var/run/docker.sock"]
  setup:
    # Viash dependencies
    - type: apt
      packages: [ openjdk-8-jdk, wget ]
    # Viash setup
    - type: docker
      run:
        - wget https://github.com/viash-io/viash/releases/latest/download/viash && chmod +x viash && mv viash /usr/local/bin
    # R dependencies
    - type: apt
      packages: [dirmngr, gnupg, apt-transport-https, ca-certificates, software-properties-common]
    - type: docker
      run:
        - apt-key adv --keyserver keyserver.ubuntu.com --recv-keys E298A3A825C0D65DFD57CBB651716619E084DAB9
        - add-apt-repository 'deb https://cloud.r-project.org/bin/linux/ubuntu focal-cran40/'
    - type: apt
      packages: [ r-base, build-essential ]
    # R setup
    - type: docker
      env:
        - CRAN="https://cran.rstudio.com"
        - R_HOME="/usr/lib/R"
      run:
        - echo "options(repos = c(CRAN = '${CRAN}'))" >> ${R_HOME}/etc/Rprofile.site
    # C# setup
    - type: docker
      run:
        - wget https://packages.microsoft.com/config/ubuntu/20.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
        - dpkg -i packages-microsoft-prod.deb
        - rm packages-microsoft-prod.deb
    - type: apt
      packages: [ dotnet-sdk-6.0 ]
    - type: docker
      run:
        - dotnet tool install --global dotnet-script
    # Node.JS setup
    - type: apt
      packages: [ nodejs ]
    # Install VS Code extensions (sourced from https://open-vsx.org/)
    - type: docker
      run :
        - code-server --user-data-dir /config/data --extensions-dir /config/extensions --install-extension esbenp.prettier-vscode
        - code-server --user-data-dir /config/data --extensions-dir /config/extensions --install-extension redhat.vscode-yaml
        - code-server --user-data-dir /config/data --extensions-dir /config/extensions --install-extension ms-python.python
        - code-server --user-data-dir /config/data --extensions-dir /config/extensions --install-extension ikuyadeu.r
        - code-server --user-data-dir /config/data --extensions-dir /config/extensions --install-extension formulahendry.code-runner
        - code-server --user-data-dir /config/data --extensions-dir /config/extensions --install-extension muhammad-sammy.csharp
        - code-server --user-data-dir /config/data --extensions-dir /config/extensions --install-extension yzhang.markdown-all-in-one
        - code-server --user-data-dir /config/data --extensions-dir /config/extensions --install-extension usernamehw.errorlens
        - code-server --user-data-dir /config/data --extensions-dir /config/extensions --install-extension scala-lang.scala

Here’s a summary:

  • A single resource is used, a bash script named script.sh.
  • This component takes a few arguments:
    • –dir: This is the directory where the files you want to edit are located and will be passed to VS Code Server to use as its working directory. By default, this will be the folder from which you run the component.
    • –sudo_pw: The sudo password used in the container.
    • –puid_guid: The PUID and GUID used for accessing files inside the container.
  • This component runs on the Docker platform. It’s using the linuxserver/code-server:latest image as its base, which comes with VS Code Server.
  • Port 8443 gets exposed to make it available from outside the container.
  • The run_args add /var/run/docker.sock:/var/run/docker.sock gives the container access to the host Docker unix socket. This allows the container to build and run containers via the host.
  • setup contains steps to prepare the Docker image by installing Viash, R, C# and Node.JS. It also has several lines at the end to install some of our recommended extensions.

Script

Next up is the bash script. Create a file named script.sh in the rstudio_server directory and add this as its content:

#!/bin/bash
set -e

echo "Setting up VS Code to work from workdir: $par_dir"
echo "Setting environment variables..."
export SUDO_PASSWORD=$par_sudo_pw
export DEFAULT_WORKSPACE=$par_dir
export PUID=$par_puid_guid
export PGID=$par_puid_guid

echo "Creating soft link to workdir..."
ln -s $par_dir ~/workspace

echo "Initializing VS Code Server..."
/init

In a nutshell:

  • set -e will stop the execution of the script if any errors are encountered.
  • The first echo call is simply a reminder of the directory you passed.
  • The next echo call is followed by several export calls to set up the environment variables:
    • SUDO_PASSWORD is the sudo password, which is password by default.
    • DEFAULT_WORKSPACE points to the work directory.
    • PUID and PGID are used to map Docker’s internal user (which is root by default) to that of the user of the host machine, this is needed so files in the work directory can be accessed correctly.
  • ln creates a soft link from ~/workspace to the given directory. This makes sure VS Code can access the directory you want to work in.
  • /init starts the VS Code Server.

Running the component

Run the component by calling viash run on the config file and passing a directory path:

viash run config.vsh.yaml -- --dir ~

You should see output similar to this:

Setting up VS Code to work from workdir: /viash_automount/path
Setting environment variables...
Creating soft link to workdir...
Initializing VS Code Server...
[s6-init] making user provided files available at /var/run/s6/etc...exited 0.
[s6-init] ensuring user provided files have correct perms...exited 0.
[fix-attrs.d] applying ownership & permissions fixes...
[fix-attrs.d] done.
[cont-init.d] executing container initialization scripts...
[cont-init.d] 01-envfile: executing... 
[cont-init.d] 01-envfile: exited 0.
[cont-init.d] 01-migrations: executing... 
[migrations] started
[migrations] no migrations found
[cont-init.d] 01-migrations: exited 0.
[cont-init.d] 02-tamper-check: executing... 
[cont-init.d] 02-tamper-check: exited 0.
[cont-init.d] 10-adduser: executing... 

-------------------------------------
          _         ()
         | |  ___   _    __
         | | / __| | |  /  \
         | | \__ \ | | | () |
         |_| |___/ |_|  \__/


Brought to you by linuxserver.io
-------------------------------------

To support LSIO projects visit:
https://www.linuxserver.io/donate/
-------------------------------------
GID/UID
-------------------------------------

User uid:    1000
User gid:    1000
-------------------------------------

[cont-init.d] 10-adduser: exited 0.
[cont-init.d] 30-config: executing... 
setting up sudo access
adding abc to sudoers
setting sudo password using SUDO_PASSWORD env var
New password: Retype new password: passwd: password updated successfully
setting permissions::configuration
setting permissions::workspace
[cont-init.d] 30-config: exited 0.
[cont-init.d] 90-custom-folders: executing... 
[cont-init.d] 90-custom-folders: exited 0.
[cont-init.d] 99-custom-scripts: executing... 
[custom-init] no custom files found exiting...
[cont-init.d] 99-custom-scripts: exited 0.
[cont-init.d] done.
[services.d] starting services
starting with no password
[services.d] done.
[2022-02-11T09:51:36.564Z] info  code-server 4.0.2 5cdfe74686aa73e023f8354a9a6014eb30caa7dd
[2022-02-11T09:51:36.565Z] info  Using user-data-dir ~/data
[2022-02-11T09:51:36.573Z] info  Using config file ~/.config/code-server/config.yaml
[2022-02-11T09:51:36.573Z] info  HTTP server listening on http://0.0.0.0:8443/ 
[2022-02-11T09:51:36.573Z] info    - Authentication is disabled 
[2022-02-11T09:51:36.573Z] info    - Not serving HTTPS 

Now navigate to http://0.0.0.0:8443/ in a web browser and you’ll see Visual Studio running in your web browser, with all the bells and whistles you’d expect. Since it comes with Viash, you can create, run and build components by using the integrated terminal (CTRL+Shift+`) or by using a CLI.