Install Visual Studio Code Web on Ubuntu 24.04

Download the installer script

Updating the system and installing 💿 the `curl` data transfer tool gets the process started. Fetch the official setup script next using `curl` to prepare the environment.

sudo apt update
sudo apt install curl

Running the installer script requires executing the command below.

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

Executing this command performs the actual installation.

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

Providing the administrative password when prompted allows the installation to advance.

Enabling the application and verifying service status happens through the command shown below.

sudo systemctl enable --now code-server@$USER
sudo systemctl status code-server@$USER

Active status should appear in the terminal output for the application.

For security, the Visual Studio Code for the Web session on Ubuntu requires a password. Set this by editing the `config.yaml` file located in the `.config/code-server/` folder. Add the chosen password next to the `auth: password` line in `config.yaml` to protect the workspace.

Opening the default configuration file at ~/.config/code-server/config.yaml inside the `nano` editor allows for quick edits.

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

Authentication requires defining a password inside this configuration.

bind-addr: 127.0.0.1:8080
auth: password
password: 6fd97c37c251428ed0f3c74e
cert: false

Saving the file and exiting precedes restarting the service with the command below to apply modifications.

sudo systemctl restart code-server@$USER

Use a Reverse Proxy Server

Deploying a reverse proxy server (an intermediary that routes client requests to a backend service), like Nginx or Apache, significantly enhances access. Managing network connections efficiently yields a smoother web coding experience, and reference guides assist with configuration.

Two articles detail proxy server deployment on Ubuntu Linux.

• How to set up a proxy server using Apache on Ubuntu
• How to set up a proxy server using nginx on Ubuntu

Set up Let's Encrypt SSL Certificate

Securing the Visual Studio Code for the Web connection on Ubuntu with a Let's Encrypt SSL certificate protects the online coding environment. Data encryption keeps connections secure, while supplementary guides cover certificate setup for both Apache and Nginx.

• How to set up Let's Encrypt SSL certificate with Apache on Ubuntu
• How to set up Let's Encrypt SSL certificate with Nginx on Ubuntu

Reaching the Visual Studio Code for Web portal occurs once the environment configuration finishes.

Configuring a reverse proxy requires entering the designated hostname, whereas standard setups use the default endpoint below:

http://localhost:8080

Supplying the previously created authentication password grants access.

Writing code can begin immediately after logging in.

Configuration is complete.

Summary:

Browser-based coding provides a streamlined environment for writing and testing code on Ubuntu 24.04. Key takeaways include:

• Visual Studio Code for Web allows for lightweight, browser-based coding without installation.
• Effective for rapid coding sessions and collaboration on various devices.
• Supports integration with cloud services like GitHub for real-time collaboration.
• Installation is straightforward using the provided installer script.
• Configuring authentication enhances the security of your coding environment.
• Setting up a reverse proxy (using Nginx or Apache) optimizes accessibility.
• Implementing Let's Encrypt SSL certificates secures your service.
• Access your development environment via http://localhost:8080 after setup.
• Start coding and take advantage of the flexibility that this platform offers!