Setting Up a Web-based Code Server on Linux: A Step-by-Step Guide

Setting Up a Web-based Code Server on Linux: A Step-by-Step Guide

Are you looking for a way to code from virtually anywhere without the hassle of lugging your laptop around? Consider using code-server, a robust self-hosted application that brings the full power of Visual Studio Code directly to your web browser. By setting up code-server on your home lab server, you can enjoy a seamless development experience that ensures both accessibility and control over your code and data, eliminating the need for third-party cloud IDEs.

Understanding Code-Server and the Benefits of Self-Hosting

Code-server operates VS Code on a remote server, allowing you to access it through any web browser. Its functionality mirrors the desktop version, supporting features like auto-completion, debugging, Git integration, and a range of extensions. This setup is particularly advantageous for low-powered devices, including tablets and Chromebooks, as all computational tasks occur on the server, maintaining a consistent environment accessible from any location.

Self-hosting this application offers several key advantages: you gain unparalleled control over your development environment, enhanced privacy, and the flexibility to customize various features, including using a personal domain, enabling HTTPS, and managing user access while scaling computing resources as needed.

To get started, check out this handy cheat sheet!

Installing Code-Server on Linux

Setting up code-server is straightforward when you utilize Docker for the installation process.

First, download the official code-server image from Docker Hub with the following command:

sudo docker pull codercom/code-server

This command ensures you have the latest version of the code-server image stored locally before proceeding with container creation.

Download Code Server Docker Image

Next, initiate a new code-server container in the background by running a command that specifies a unique password and ensures 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

Start Code Server Container

With the code-server now set up, access it via your web browser by entering http://localhost:8443. Input the password established during the docker run command and click on Submit to log in to code-server.

Access Code Server

Getting Started with Code Server

Upon logging in, you’ll encounter an interface that closely resembles the familiar desktop version of VS Code. Here’s a brief overview of the key components you’ll find:

File Explorer

The File Explorer enables you to navigate your projects effortlessly. You can browse folders, open files, create new ones, and manage the structure of your project with ease.

File Explorer

Editor

The central area is the Editor, where you will perform most of your work. When files are opened, they display here for writing and formatting code just like you would in the desktop version of VS Code.

Code Editor

Terminal

The Terminal is conveniently located at the bottom of the code-server. You can open it from the top menu by selecting “Terminal” followed by “New Terminal, ” or use the keyboard shortcut Ctrl + `. Additionally, you can access the terminal quickly by pressing Ctrl + Shift + C.

Built In Terminal

Extensions

Extensions are what make VS Code powerful. Using the Extensions tab (found on the sidebar), you can browse for, install, and manage VS Code extensions, which include linters, themes, and various language support tools.

Extensions

Search for any extension using the search bar to install and activate it quickly, enhancing your development environment’s capabilities.

Personalizing Your Browser-Based IDE

To customize your IDE’s appearance, such as changing the theme, click the gear icon located in the lower-left corner, hover over “Themes, ” and select “Color Theme” from the dropdown menu:

Open Settings

A list of available themes will display, allowing you to preview and apply your desired choice.

Select Theme

Furthermore, you can easily install any preferred theme from the Extensions tab, activating it immediately.

Install New Themes

In addition, you can customize other settings by clicking the gear icon and selecting Settings. Here, modifications can be made to editor behavior, font sizes, formats, and much more.

Customize Code Server

Creating and Executing Your First Program in Code-Server

To create a new file, utilize the Explorer panel or use the keyboard shortcut Ctrl + Alt + N:

Create New File

Select a programming language by clicking on Select a language or by using the shortcut Ctrl + K, then M, and choose your desired language—like Python.

Select Language

Paste the following code into the editor to print “Welcome to maketecheasier.com” three times:

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

Before executing this program, ensure that Python is installed on your server. Save the file by pressing Ctrl + S, assigning it a fitting name, and clicking OK:

Save File

To run the Python script, open the terminal with Ctrl + ` and execute the following command:

python3 mteExample.py

Run Python Script Code Server

With code-server successfully running on your Linux system, you now enjoy the benefits of browser-based development. You can personalize your environment with themes and extensions, execute code across various programming languages, and secure access through a custom domain and HTTPS. As a next step, consider enhancing your setup by exploring Git workflows, enabling SSL for production, or integrating additional web-based tools like JupyterLab, Docker, or Portainer to expand your home lab’s capabilities.

Source & Images

Leave a Reply

Your email address will not be published. Required fields are marked *