Install Code-Server for VS Code on Ubuntu 22.04 or 20.04 LTS

0

Code Server is an open-source project for programming on VS Code but using a web browser. Here we learn the command to install Code Server on Ubuntu 22.04 Jammy JellyFish or 20.04 Focal Fossa.

VS Code – short for Visual Studio Code is a popular source text editor from Microsoft. It is mainly used for web application development; it allows developers to program or create source texts in C++, C#, CSS, Dockerfile, Go, HTML, JavaScript, JSON, Less, Markdown, PHP, Python, Sass, T-SQL and TypeScript.

Although VS Code is already available to install on Debian-based systems such as Ubuntu using the ~.Deb binary, however, it only resides on the local machine it was installed on. This means that we cannot access it remotely unless we are not using any remote desktop software. Those who want to install VS Code locally can choose 4 ways to install VS Code editor on Ubuntu 22.04 | 20.04 LTS.

Now come to users those who don’t always want to carry their desktop around or want a high-resource server for coding. They can install”Server-Codewhich is a project proposed by codeur.com provide a platform to run the latest VS Code on a machine that is remote but accessible through a modern web browser. The source of the project is available at GithubGenericName.

Steps to Install Code-Server for VS Code on Ubuntu 22.04 | 20.04 LTS

The steps given here will be the same for other Linux systems such as Debian, Linux Mint, POPOS and similar Linux systems.

1. Requirements:

There is no unique requirement to install Code-Server, just the standards:

Ubuntu 22.04| 20.04 | Debian server or desktop
A non-root user with sudo rights
1 GB of RAM paired with 2 processor cores

2. Run APT Update

First, run the system update command to ensure that all installed system packages are up to date. This will also refresh the repository cache.

sudo apt update

3. Install Code Editor on Ubuntu 22.04 | 20.04

There are two ways to install the code editor on Linux systems, one is via Scenario which is the same for all Linux, whether based on RedHat or Debian. Another way is to download the RPM or Deb package from Code-editor and install it manually according to our Linux system. Here we will show you both.

Using Script: #1st method

Code editor packages are not available through the Ubuntu Jammy or Focal repositories by default, so we need a third way. Therefore, on your command terminal, run the given command which will fetch the required packages to configure on your Linux using the system package manager.

curl -fsSL https://code-server.dev/install.sh | sh

Using the Deb package: # 2nd method

Open your browser and navigate to the GitHub release page, scroll down, then download the Debian package.

Download Code Server Debian Package

After that on your command terminal and go to Downloads because everything we download from the browser goes there.

cd Downloads

Check the downloaded files are there or not.

ls

Install it:

sudo apt install ./code-server_*_amd64.deb

4. Start and activate the code editor service

Once the installation is complete, start the service, while if you want code editor to start automatically with system startup or in case of system crash.

sudo systemctl start [email protected]$USER

To activate, the service:

sudo systemctl enable --now [email protected]$USER

To note: $USER will start the service for your current user only:

5. Nginx Proxy on Ubuntu 22.04 | 20.04

By default, the code editor will only allow you to access the web interface on localhost, i.e. to access it using any remote machine securely, we can either open a SSH tunnel, or install an Nginx proxy. Here we are going for Nginx lightweight server.

sudo apt install nginx -y

Start and activate its service:

sudo systemctl start nginx
sudo systemctl enable nginx

Check status:

sudo systemctl status nginx

6. Create an Nginx configuration file for Code-Server

Now we create a file for local proxy running the Code Server instance and deliver it using the main system IP address over HTTP or HTTPS, when called by any user using the browser.

sudo apt install nano -y
sudo nano /etc/nginx/sites-available/code-server

Add the following lines:

To note: If you want to access the Code-Server using a domain name, replace yourdomain.com with the real FQDN you want to use. While those who have no domain then just remove the # tag and replace “system-ip-address” with the IP address of the server where Code-Editor was installed.

server {
listen 80;
listen [::]:80;
server_name yourdomain.com;
#server_name system-ip-addres;
location / {
proxy_pass http://localhost:8080/;
proxy_set_header Host $host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_set_header Accept-Encoding gzip;
}
}

Save the file- CTRL+O; hit the Enter touch then quit- CTRL+X.

Activate the site configuration file:

sudo ln -s ../sites-available/code-server /etc/nginx/sites-enabled/code-server

Restart the servers:

sudo systemctl restart nginx
sudo systemctl restart code-server

7. Access the VS Code web interface

Now open any browser that can access the IP address of the remote server where the code server has been installed. And point it.

http:server-ip-address 

or 

http://your-domain

8. Login – Code Editor Password

When we try to connect to the code editor web interface, it requires a password, which is saved in the YML to file. Here is the command to retrieve it.

On your command terminal, run:

nano ~/.config/code-server/config.yaml

Copy or write down the password mentioned in the file.

Code server password

9. VS Code using web interface on Ubuntu

Now we can start shutting down using the VS Code web interface directly in the browser without physically visiting the remote machine.

VS Code in web browser

9. To use the Let’s Encrypt SSL certificate

Run the given commands to access Code-Server on HTTPS instead of plain HTTP.

sudo apt install -y certbot python3-certbot-nginx
sudo certbot --non-interactive --redirect --agree-tos --nginx -d yourdomain.com -m [email protected]

Be sure to replace [email protected] with your real email and yourdomain.com with the domain you used in the Nginx configuration file.

Restart Nginx:

sudo systemctl restart nginx -y

After that you should be able to access the code server via https://yourdomain.com

Uninstalling or removing Code Server

To remove the code server in the future, if you don’t like, run the following command:

Motorway service area:

sudo systemctl stop nginx
sudo systemctl stop [email protected]$USER

To delete settings and data:

sudo apt remove code-server

If you don’t need Nginx either, then:

sudo apt remove nginx

Delete data:

rm -rf ~/.local/share/code-server ~/.config/code-server

rm -rf ~/.local/lib/code-server-*

Conclusion:

This way we can start editing our code on a remote machine using a local network or the Internet using a web browser. This means whether we are using Android, iOS, Windows, Linux or macOS, all can be used for programming using VS Code. Plus, all of our data will be in one central place.

Other Items:

2 Ways to Install VS Code on Debian 11 Bullseye Linux
Differences between Linux Mint, Ubuntu, Manjaro and Debian Desktop
How To Install GitEye GUI Git Client on Ubuntu 22.04 | 20.04
How to Install Kibana Dashboard on Ubuntu 22.04 or 20.04

Share.

About Author

Comments are closed.