Using Code Server for Code Development

Interface Layout and Features

The Code Server interface is divided into the following main areas.

Core Features

• Full extension ecosystem: Code Server uses the Open-VSX extension marketplace by default. You can search for and install the vast majority of popular open-source extensions, such as Python, GitLens, and Prettier, via on the left.
• Built-in terminal and Git: The integrated terminal is a major highlight, allowing you to complete the entire workflow from coding to building, testing, and deployment right inside your browser, delivering an experience just like local development. Meanwhile, the source code management view integrates Git operations, making it easy to commit code, manage branches, and view differences.
• Convenient port forwarding: When developing web applications or needing to access specific service ports on the server, you can use Code Server's built-in port forwarding feature. You can easily map remote ports to your local machine within the PORTS panel for convenient debugging.
• Settings sync and persistence: Code Server's configurations, themes, keyboard shortcuts, and installed extensions are all saved in the configuration directory on the server. This means no matter which device you log in from, you will get a completely consistent development environment.

Extension Marketplace

The Code Server extension marketplace provides a rich selection of development tools. The notebook instance comes pre-installed with several commonly used extensions, and you can also download additional ones as needed.

Figure 4 Extension marketplace

The pre-installed extensions in the notebook instance and their descriptions are as follows.

You can also download other required extensions from the marketplace. Taking Markdown extensions as an example: type Markdown into the search bar, select the extension you need to download, and click Install.

Preparing Code

1. Right-click in the workspace to create a new Python file with a .py extension, for example, test.py.
   Figure 5 Creating a new Python file
   
2. Copy and paste the following Python code into the file:

   import os 
   print(os.environ.get('PATH'))
   print("Hello World")
   print("Welcome to Code Server")

   Figure 6 Copying Python code
   

Running the Python File

Click in the upper right corner of the Python file, and the TERMINAL tab at the bottom will display the execution results.

Figure 7 TERMINAL execution results

Debugging the Python File

1. Add a breakpoint to the Python file. Left-click to the left of the line numbers to add or remove breakpoints.
   Figure 8 Adding a breakpoint
   
2. In the left activity bar, click , click Run and Debug and choose Python Debugger. In the Select a debug configuration pop-up, choose Python File: Debug the currently active Python file to enter debugging mode.
3. The code will run and pause at the first breakpoint. You can inspect variables in the left panel or use the top control bar to retry, continue, or perform other actions.

Loading a Project

You can choose either of the following methods to load the project.

• Method 1: Download via Git command
  1. Open the terminal.
     Figure 9 New Terminal
     
  2. Run the following commands to download:

     git clone https://github.com/karpathy/nanochat.git
     cd nanochat

• Method 2: Drag-and-drop upload
  1. Go to the working directory and open the folder.
     Figure 10 Open Folder
     
  2. Drag your local folder into the Code Server working directory, and the contents inside the folder will be uploaded automatically.

Preparing the nanochat Environment

1. Install uv

   uv is an extremely fast Python package and project management tool written in Rust, designed to be a unified, highly efficient toolchain for the Python ecosystem. The nanochat project uses uv to manage its Python environment, so you need to install uv first.

   curl -LsSf https://astral.sh/uv/install.sh | sh
   source $HOME/.local/bin/env

2. Install the nanochat Environment.

   This tutorial demonstrates the setup based on a CPU environment, so run the following commands to install nanochat:

   export UV_INDEX_URL="https://pypi.tuna.tsinghua.edu.cn/simple
   uv sync --extra cpu

   Note: If you cannot access Hugging Face services, you will need to change the hardcoded data URLs inside the dataset.py file to a domestic mirror source.

Executing Model Training in a CPU Environment

This section is primarily intended to demonstrate the features of Code Server, rather than to train and fine-tune LLMs. Therefore, the number of training iterations in the script has been reduced to shorten the training time. Additionally, no hyperparameter tuning has been performed on the training results. If you wish to achieve better training performance, you can adjust the parameters or run this project in a GPU environment.

Start the training script:

# Start the execution script
bash runs/runcpu.sh

Following this, the main training workflow logs for the model will be displayed in the terminal, which include the following steps:

1. Training data download: The dataset is downloaded to the /home/ma-user/.cache/nanochat directory by default.
2. Tokenizer training

   

3. Model initialization

   

4. Self-supervised training process: You can observe the loss gradually decreasing. Starting from random initialization, the model progressively learns to predict the next token. At step 100, the model outputs repetitive, nonsensical results; by step 3000, the output shows a basic level of logic.

   

   

   

   

5. SFT process: An anomaly in the loss can be observed during the SFT process, indicating that running SFT on CPUs requires more specialized hyperparameter tuning.

   

6. Model chat

   Run the following script to get conversational output from the model:

   python -m scripts.chat_cli -p "What is the capital of France?"

   

Configuring Model Service Information in Cline

• Free models

  Cline offers free model usage. Select Absolutely Free, choose one of the available free models, and log in to your Cline account to start using it.

  

  

• Third-party model providers

  Cline supports a wide range of model access options, including Huawei Cloud MaaS, Claude Code, DeepSeek, OpenAI, and more.

  Taking Huawei Cloud MaaS as an example:

  1. Search for Huawei Cloud MaaS under API Provider.
  2. For the API key, enter the API key you created on Huawei Cloud. For details about how to create one, see Creating an API Key.
  Figure 11 Configuring model information
  

  Once the configuration is complete, you can start chatting with the LLM directly in the chat box.

  Figure 12 Chatting with the LLM
  

Project Practice

This section uses the nanochat project as an example to demonstrate how to use the AI assistant Cline to improve development efficiency during project development.

1. Create a plan:

   Enter your question in the Cline chat box, and Cline will generate an execution plan.

   Figure 13 Formulating a plan
   
2. Execute the plan: Click Act to switch to Act mode, and Cline will help you execute the corresponding plan.

   Cline requires certain operation permissions to execute tasks, which can be configured using above the chat box.

   Figure 14 Act mode
   
   Figure 15 Setting operation permissions
   

   Cline will automatically execute the following workflow based on the generated plan:

   1. Download the project.

      

   2. Initialize the nanochat environment.

      

   3. Run nanochat.

      

   4. Open the log file, where you can see that the script is running normally.

      

   5. Modify the number of training steps and retrain.

      

      

      You will see that Cline stops the previous training script, automatically modifies the number of steps, and triggers the training script again.

   6. Troubleshooting:
      1. If the script stops unexpectedly after running for a while, use Cline to locate the issue. Once it identifies an out of memory (OOM) error, use Cline to resolve it and rerun the project.

      2. Have Cline modify the script to reduce the model size, and then train again.

         

      3. After Cline automatically adjusts the model size, the project runs successfully.