How to Setup Web Based Code Server in Linux

This practical guide explains how to setup web based code server in Linux. Follow the steps in order, review the requirements first, and use the troubleshooting notes when a setting or option does not work as expected.

Setting up code-server on Linux

Installing code-server is easy. We will use Docker to install it.

Run the following command to download the official code-server image from Docker Hub:

sudo docker pull codercom/code-server

This ensures you have the latest version of the image available locally before creating the container.

Next, start a new code-server container in the background with a custom password and persistent storage:

sudo docker run -d --name code-server -p 8443:8080 -v "$HOME/code-server-data:/home/coder/project" -e PASSWORD="my_password" codercom/code-server

Once you have set up the code-server, you can access it from your browser by typing http://localhost:8443. Enter the password you set in the docker run command and click the Submit button to log in to the code-server.

Getting Started with Code Server

Once logged in, you'll see an interface that looks exactly like the regular desktop version of VS Code. Here's a quick overview of what you'll find:

File Explorer

Explorer helps you navigate through your project. You can browse folders, open files, create new files, and manage your project structure with ease.

Editor

The Editor is the central area and acts as your main workspace. When you open a file, it appears here.

Here you can write, edit, and format code just like in the desktop version of VS Code.

Terminal

Terminal is located at the bottom of the server code. You can open it from the top menu Terminal -> New Terminal or by pressing Ctrl + ` .

You can also use the shortcut Ctrl + Shift + C to access your terminal in the code server.

Extensions

The Extensions feature is what makes VS Code great. You can use the Extensions tab (sidebar icon) to browse, install, and manage VS Code extensions like linters, themes, and language support.

You can search for extensions using the search bar, then install and activate them instantly to add new features or enhance existing functionality.

Customize browser-based IDE

You can now customize your server code to your liking, such as installing extensions, changing themes, updating settings, or modifying configuration files. For example, to set a new theme, you can click the gear icon in the lower left corner, hover over Themes , and select Color Theme from the menu:

Now, a list of available themes will appear. select a theme to preview and apply it.

Additionally, you can easily install your favorite theme from the Extensions tab and activate it instantly.

Likewise, you can also customize other server code settings. To do this, simply select the gear icon and select Settings .

From here you can customize the editor's behavior, font size, formatting, and more.

Create and run the first program in code-server

Create a new text file from the Explorer panel or by pressing the shortcut Ctrl + Alt + N :

Click Select a language or press Ctrl + K , then M to select the desired language, such as Python.

Now, paste the following code in there to output "Welcome to maketecheasier.com" 3 times on the console:

for i in range(3): print("Welcome to maketecheasier.com")

Before running this program, make sure Python is installed. Then, press Ctrl + S to give the file a suitable name, then click OK to save the file:

Now, press Ctrl + ` to open terminal and run the Python script with the following command:

python3 mteExample.py

Now that your code-server is up and running on your Linux system, you're ready to take full advantage of browser-based development. You can customize your environment with themes and extensions, create and run code in different programming languages, and even secure access with custom domains and HTTPS. Next, consider exploring how to integrate a Git workflow, enable SSL for production use, or extend your home lab with other web-based tools like JupyterLab, Docker, or Portainer for a more robust and flexible development setup.

FAQ

What should you know about setting up code-server on Linux?

Installing code-server is easy. We will use Docker to install it.

What should you know about getting Started with Code Server?

Once logged in, you'll see an interface that looks exactly like the regular desktop version of VS Code. Here's a quick overview of what you'll find:

What should you know about file Explorer?

Explorer helps you navigate through your project. You can browse folders, open files, create new files, and manage your project structure with ease.

What should you know about editor?

The Editor is the central area and acts as your main workspace. When you open a file, it appears here.