An IDE or Integrated Development Environment is a software that provides programmers the basic tools like the text editor, compiler, and debugger. It performs tasks like code completion and management. The most common IDEs are Visual Studio, Pycharm, PhpStorm, Eclipse, IntelliJIDEA, Web Storm, and NetBeans.

VS Code

Visual Studio Code is a free, Open source, source-code editor that runs everywhere. It is simple, lightweight with robust architecture making it preferable for many users as it is user-friendly even for first-time users. Visual studio code supports hundreds of languages, with syntax highlighting, bracket-matching, auto-indentation, box-selection, and snippets.

Features

  • IntelliSense provides intelligent code completion for variables, methods, and imported modules.
  • Debug code right from the editor.
  • Built-in Git commands.
  • Extensible and highly customizable.
  • Powerful editing features like linting and multi cursor editing.
  • Code navigation and refactoring.
  • Enable additional languages.
  • Keyboard Shortcuts that can also be customized.

VS Code Code Server

Not to get confused, a Code server is VS code running on a remote server and can be accessed through a browser. It allows you to code on your laptop or tablet as the environment is consistent. Code server preserves battery life for your devices as all the computations run on the server. The tests, compilations, and other tasks done on the Code Server are fast due to the large cloud servers. With everything moving to the cloud, Code Server and other development environments are no exception.

You can install the code server with different options

  • Deb package
  • Installation Script
  • Installing as a container on Docker/docker-compose.

This guide will show you how to run Code Server on Docker/Docker Compose.

1. Install Docker on Ubuntu

Update your system packages

sudo apt update && sudo apt upgrade -y

Install curl if it is not installed in your system.

sudo apt install curl uidmap

Install Docker using the following commands

curl -fsSL https://get.docker.com -o get-docker.sh
sh get-docker.sh
dockerd-rootless-setuptool.sh install

Add your user account to docker group:

sudo usermod -aG docker $USER
newgrp docker

Confirm successful installation by checking the version

$ docker --version
Docker version 20.10.17, build 100c701

2. Install Docker Compose on Ubuntu

Install Docker Compose using the following commands

ARCH=$(uname -m) && [[ "${ARCH}" == "armv7l" ]] && ARCH="armv7"
sudo mkdir -p /usr/local/lib/docker/cli-plugins
sudo curl -SL "https://github.com/docker/compose/releases/latest/download/docker-compose-linux-${ARCH}" -o /usr/local/lib/docker/cli-plugins/docker-compose
sudo chmod +x /usr/local/lib/docker/cli-plugins/docker-compose

To confirm installation run the docker-compose version

$ docker compose version
Docker Compose version v2.6.0

Parameters available

Container images are configured using parameters. Parameters are the characteristics that classify the image and are helpful when identifying the image. They include;

  • -p 8443– Ports that are used to access the web GUI.
  • -e PUID – UserID removes issues that may arise with permissions and ensures volumes directories are owned by the same user.
  • -e PGID – GroupID works as the PUID.
  • -e TZ – The timezone that specifies which one to use.
  • -e PASSWORD – A password which is is used to authorize access to the Web GUI. You can set it or not.
  • -e SUDO_PASSWORD – allows a user to have sudo access in the code server terminal when set.
  • -e PROXY_DOMAIN=code-server.my.domain – When this variable is set, the domain will be proxied for subdomain proxying.
  • -e DEFAULT_WORKSPACE=/config/workspace – When set, the code server opens this directory by default
  • -v /config – This has all the configuration files.

Configure environment variables

You can set any environment variable from a file by using a special prepend FILE__

For example, to set the password from a file. You should have a directory of the file where the password is stored.

-e FILE__PASSWORD=~/mypassword

From the code above, the environment variable PASSWORD will be set using the contents of the mypassword file.

3. Run Code Server with docker CLI

More Parameters can be found on the Linux server GitHub page. I have edited some to fit what I want to run with at the moment.

To check your timezone use the following command.

$ timedatectl

To get the PUID and the PGID use the following code.

$ id $USER
uid=1000(jmutai) gid=1000(jmutai) groups=1000(jmutai),4(adm),24(cdrom),27(sudo),30(dip),46(plugdev),122(lpadmin),133(lxd),134(sambashare),998(docker)

Run the following command to create the container with docker CLI.

docker run -d \
  --name=code-server \
  -e PUID=1000 \
  -e PGID=1000 \
  -e TZ=Africa/Nairobi \
  -e PASSWORD=Password01  \
  -e SUDO_PASSWORD=SudoPassword \
  -p 8443:8443 \
  -v /etc/codeserver/config:/config \
  --restart unless-stopped \
  lscr.io/linuxserver/code-server:latest

The container has the name and the ID of the user, It also has the Timezone, password, and the port to access the web GUI.

$ docker ps
CONTAINER ID   IMAGE                                    COMMAND   CREATED         STATUS         PORTS                                       NAMES
eba43e80c3e5   lscr.io/linuxserver/code-server:latest   "/init"   9 seconds ago   Up 7 seconds   0.0.0.0:8443->8443/tcp, :::8443->8443/tcp   code-server

The sample output is as shown below.

Unable to find image 'lscr.io/linuxserver/code-server:latest' locally
latest: Pulling from linuxserver/code-server
20e2379d3593: Pull complete 
c1e666f3a079: Pull complete 
dbf513f592f4: Pull complete 
470f73d7274c: Pull complete 
ec608278ebcc: Pull complete 
6f7393cd65c2: Pull complete 
4973ca17e3dd: Pull complete 
79312241bff8: Pull complete 
b9b43a4fbc89: Pull complete 
Digest: sha256:a6b89013917decf08484d4f908439ffd516f7062dc55f2ad60e48e15750cafd8
Status: Downloaded newer image for lscr.io/linuxserver/code-server:latest
dcca0c88a3105e3b554ad01db8e49591b43ce65413ef260a50e24f42f891ac14

After successful installation, Go to http://localhost:8443 to access the Code Server web GUI.

4. Run Code Server with docker-compose

Create the installation directory and change to that directory.

mkdir ~/codeserver && cd ~/codeserver

Create the configuration file. The file is in YAML format hence note the spaces.

nano docker-compose.yml

Then append the following code in the file. Again, I have edited with only the fields that I need at the moment as follows.

version: "2.1"
services:
  code-server:
    image: lscr.io/linuxserver/code-server:latest
    container_name: code-server
    environment:
      - PUID=1001
      - PGID=1001
      - TZ=Africa/Nairobi
      - PASSWORD=Password01
      - SUDO_PASSWORD=SudoPassword
    volumes:
      - /opt/codeserver/config:/config
    ports:
      - 8443:8443
    restart: unless-stopped

Save and exit the file.

Run the following command within the same folder to deploy the container.

docker compose up -d

The sample output is as shown below.

[+] Running 10/10
 ⠿ code-server Pulled                                                     12.3s
   ⠿ 20e2379d3593 Pull complete                                            2.9s
   ⠿ c1e666f3a079 Pull complete                                            3.1s
   ⠿ dbf513f592f4 Pull complete                                            3.3s
   ⠿ 470f73d7274c Pull complete                                            3.4s
   ⠿ ec608278ebcc Pull complete                                            3.4s
   ⠿ 6f7393cd65c2 Pull complete                                            4.6s
   ⠿ 4973ca17e3dd Pull complete                                            4.7s
   ⠿ 79312241bff8 Pull complete                                           11.3s
   ⠿ b9b43a4fbc89 Pull complete                                           11.3s
[+] Running 2/2
 ⠿ Network codeserver_default  Created                                     0.1s
 ⠿ Container code-server       Started                                     1.1s

Once installation is done. Go to http://localhost:8443 to access the web GUI.

5. Launching Code Server on Browser

The login page shows as below

You might receive a prompt warning asking you if you trust the authors of the config files. Click on Yes I trust the authors to enable all features.

The Code server dashboard will appear as shown below.

You can make quick customizations or click on mark done. There are also extensions available that are in-built for easier installation.

You can also access the terminal by going to the menu then clicking on Terminal then New Terminal which opens as shown below.

You can now code on the browser.

Conclusion

From this guide, we have learned about Visual Studio Code and named other IDEs. We also have gone through Code Server which is similar to Visual Studio Code but it is accessed on a browser. There are a number of ways to install the Code server on your system but we have used the Docker and Docker compose options to deploy the code server container on Ubuntu. Code Server may not have all the plugins available on the actual IDE but is pretty awesome at the moment.

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here