GitHub address

https://github.com/coder/code-server

Documentation address

https://coder.com/docs/code-server/latest

VS Code in Browser

Run VS Code anywhere on any machine and access it through the browser

Not very accustomed to the visual panel operation of Docker on OpenWrt

Although all necessary variables are present and translated into Chinese, simple images can be pulled and run immediately

However, if you are used to docker-compose.yml, it still feels relatively simpler

The docker-compose.yml method is convenient for expanding some variables that the panel does not have, such as .env configuration files

At the same time, setting data volumes and file directories is relatively controllable, allowing you to choose custom folders to store projects, such as relative paths, setting single folder and single file permissions

It is convenient for other devices or reusing the docker-compose.yml configuration file next time, a single line of docker-compose up directly starts, no need for repeated panel selection confirmation and input, easy to migrate and backup

However, for OpenWrt, if you have not set up the aapanel panel, some drag-and-drop file and code editing functions make editing the docker-compose.yml operation more complex than the visual panel

For example, using vi and nano editing, you usually need to remember some shortcuts, and it is keyboard operation, the mouse does not work, making it difficult to quickly locate and modify

At this point, you need to use code-server, a VSCode running in the browser

You can open the OpenWrt VScode editing interface in the browser, directly edit files, open a terminal, and drag and drop files

With it, we can develop code remotely, deploy projects, use web ssh, most operations are just ctrl+c, ctrl+v

Official documentation

https://coder.com/docs/code-server/latest/install#docker

Docker documentation

https://hub.docker.com/r/linuxserver/code-server

Using the documentation’s docker-compose.yml

Create a new docker-compose.yml configuration file

Note: The parameters set in the following configuration file include

Password is password (can be changed to your own password）

code-server can view and modify the file directory path is / (which is the entire Linux system)

Port mapping is 3002 (subsequently access with IP:3002)

version: "2.1"
services:
  code-server:
    image: lscr.io/linuxserver/code-server:latest
    container_name: code-server
    environment:
      - PUID=1000
      - PGID=1000
      - TZ=Etc/UTC
      - PASSWORD=password #optional
      - HASHED_PASSWORD= #optional
      - SUDO_PASSWORD=password #optional
      - SUDO_PASSWORD_HASH= #optional
      - PROXY_DOMAIN=code-server.my.domain #optional
      - DEFAULT_WORKSPACE=/config/workspace #optional
    volumes:
      - ./config:/config
      - /:/config/workspace
    ports:
      - 3002:8443
    restart: unless-stopped

Pull the image and run

docker-compose up

Run successfully

Open port

Click menu, Network -> Firewall -> Communication Protocol

Add codeServer, port 3002

Access ip:port

http://192.168.100.1:3002/

Enter the page, need to enter the password (password)

Check and define trust for this device

Click to select VSCode theme style

This article selects Dark+ (dark mode)

Click mark as complete

Click the popup in the lower right corner, indicate clearly

Click the directory on the right

Try editing files, such as this article’s docker-compose.yml configuration file

You can edit directly in the browser

You can also install various syntax plugins, other auxiliary plugins, etc.

Click the red box area to create a new terminal

You can see that you can directly enter the corresponding directory in the browser terminal without separate ssh

More methods refer to the official instructions, it is basically consistent with regular use of VScode

Currently solved the code editing method, using code-server

Later will try using filebrowser to solve the folder visualization and browser file interaction issues (using docker)

Special note

I originally planned to use npm to globally install code-server, but found that it would occupy the package space, not only prompting insufficient space leading to installation failure, but also filling up the package space due to npm cache

So do not try npm methods casually, use docker if possible

END.

Recommended reading

《OpenWrt Soft Router (NanoPi For NAS All In One R4S): Docker Installation of HomeAssistant》

《OpenWrt Soft Router (NanoPi For NAS All In One R4S): Installation of hacs in HomeAssistant》

《OpenWrt Soft Router (NanoPi For NAS All In One R4S): NetEase Cloud Music Node.js API》