Want to code anytime, anywhere, but don’t want to carry a laptop with you? Try code-server! This is a powerful self-hosted app that brings all the features of the full version of Visual Studio Code to your web browser. Without relying on a third-party cloud IDE, you can deploy code-server on your home lab server and access securely from any device. By building your own code-server, you can not only obtain a consistent and convenient development environment, but also have complete control over your code and data.

Table of contents

• What is code-server? Why self-host?
• Install code-server on Linux
• Get started with code-server
• Customize your browser IDE
• Create and run the first program in code-server

What is code-server? Why self-host?

code-server can run VS Code on a remote server, allowing you to access it through your browser. Its functions are almost exactly the same as the desktop version, and supports automatic completion, debugging, Git integration and plug-in extensions. Especially friendly for weaker performance devices like tablets or Chromebooks, because all operations are done on the server side, ensuring a smooth development experience and a unified environment.

Choosing self-hosting means you have full control: you can customize your domain name, enable HTTPS encryption, manage user rights, and expand server resources as needed, while ensuring privacy and data security.

Tips : Proficient in VS Code's shortcut keys can greatly improve coding efficiency. You might as well refer to a quick lookup table for quick access!

Install code-server on Linux

Installing code-server is very simple, and this article will be deployed using Docker.

First, pull the official image from Docker Hub:

 <code>sudo docker pull codercom/code-server</code> 

This step ensures that you get the latest version of the image locally and prepare for subsequent container creation.

Next, start a code-server container in background mode, set the password and mount the persistent storage:

 <code>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</code> 

After the deployment is completed, visit http://ipnx.cn/link/e8a079d6a3dbabc7bcfa0047f63e475c in the browser.

Get started with code-server

After logging in, you will see an interface that is almost exactly the same as the desktop version of VS Code. The following is a brief introduction to the main functional areas:

File Explorer

The Explorer on the left helps you browse the project structure, allowing you to easily open, create, or manage files and folders.

Editor area

In the middle is the main editing area, and when you open the file, the content will be displayed here.

You can write, modify, and format code like you do in the desktop version.

terminal

The terminal is located at the bottom of the interface and can be opened through the top menu "Terminal → New Terminal", or use the shortcut key Ctrl ` .

You can also use Ctrl Shift C to quickly call out the terminal.

Extension plug-in

What makes VS Code powerful is its rich expansion ecosystem. Click the extension icon in the sidebar, and you can browse, install and manage various plug-ins, such as syntax checking tools, themes, language support, etc.

Use the search bar to find the plug-ins you want, and you can enable them immediately after installation, enhancing the editor's functionality.

Customize your browser IDE

You can personalize the code-server according to your personal preferences, such as changing themes, installing plug-ins, adjusting configurations, etc. Take changing the theme as an example: Click the gear icon in the lower left corner, hover the mouse over the Themes , and select Color Theme :

A list of available topics will then pop up, click to preview and apply.

You can also download more richer themes from the Extended Market and enable them immediately.

Similarly, other settings can be easily adjusted. Click the gear icon and select Settings to enter the configuration interface.

Here, you can modify editor behavior, font size, code formatting rules, etc.

Create and run the first program in code-server

Create a new file in the Explorer panel, or use the shortcut key Ctrl Alt N :

Click Select a language , or press Ctrl K and then press M to select a language (such as Python):

Paste the following code in and print the welcome message three times:

 <code>for i in range(3):<br> print("Welcome to maketecheasier.com")</code>

Make sure that the system has Python installed. Then press Ctrl S to save the file, enter the file name (such as mteExample.py), and click OK.

Then press Ctrl ` to open the terminal and run the following command to execute the script:

 <code>python3 mteExample.py</code> 

Now, code-server is running successfully on your Linux system! You can freely customize themes and plug-ins, write and run programs in multiple languages, and even improve security with custom domain names and HTTPS. Next, try integrating Git workflows, enabling SSL for production environments, or adding tools such as JupyterLab, Docker, Portainer, etc. to your home lab to create a more powerful and flexible development environment.

The above is the detailed content of How to Set Up a Web-based Code Server on Linux - Make Tech Easier. For more information, please follow other related articles on the PHP Chinese website!