
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.

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

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.

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.

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.

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.

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.

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:

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

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

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.

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:

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.

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:

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

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.
Leave a Reply ▼