[Tutorial] Accessing VS Code through a browser

Situation

After playig arround with openHAB’s VS Code extension, I was looking for away to edit my config from any computer or tablet within my home LAN without having to install VS Code on any machine. Occasionaly, I stumbled accros a project called code server [https://coder.com/ and https://github.com/cdr/code-server]. I tried it and I love it.

Requirements

  • 64-bit host.
  • At least 1GB of RAM.
  • 2 cores or more are recommended (1 core works but not optimally).

As my testing environment is running on a VM, I gave it 4 cores with 8GB of memory.

Installation

My VM runs Ubuntu 19.10 Server

Remove Cloud init [optional]

echo 'datasource_list: [ None ]' | sudo -s tee /etc/cloud/cloud.cfg.d/90_dpkg.cfg
sudo apt-get purge cloud-init
sudo rm -rf /etc/cloud/; sudo rm -rf /var/lib/cloud/

Install Azul openJDK Java8

sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 0xB1998361219BD9C9
sudo apt-add-repository 'deb http://repos.azulsystems.com/ubuntu stable main'
sudo apt-get install zulu-8

Install openHAB stable

wget -qO - 'https://bintray.com/user/downloadSubjectPublicKey?username=openhab' | sudo apt-key add -
echo 'deb https://dl.bintray.com/openhab/apt-repo2 stable main' | sudo tee /etc/apt/sources.list.d/openhab2.list
sudo apt-get update
sudo apt-get install openhab2
sudo /bin/systemctl daemon-reload
sudo /bin/systemctl enable openhab2.service
sudo /bin/systemctl start openhab2.service

Install Code Server [Latest Release is 1.39.2]

wget https://github.com/cdr/code-server/releases/download/2.1698/code-server2.1698-vsc1.41.1-linux-x86_64.tar.gz
sudo tar -xvzf code-server2.1698-vsc1.41.1-linux-x86_64.tar.gz -C /opt
sudo mv /opt/code-server2.1698-vsc1.41.1-linux-x86_64/ /opt/coder
sudo chown -R openhab:openhab /opt/coder

Create file code-server.service for autostart

[Unit]
Description=Code Server IDE
After=network.target

[Service]
Type=simple
User=openhab
Group=openhab
WorkingDirectory=/opt/coder
Restart=on-failure
RestartSec=10

ExecStart=/opt/coder/code-server --port 9090 --auth none --disable-telemetry

StandardOutput=file:/var/log/code-server-output.log
StandardError=file:/var/log/code-server-error.log

[Install]
WantedBy=multi-user.target

Enable autostart

sudo /bin/systemctl daemon-reload
sudo /bin/systemctl enable code-server.service
sudo /bin/systemctl start code-server.service

Copy openHAB VS Code extension to /opt/code-server/
Install Extension from File and edit the settings like

    "openhab.host": "localhost",
    "openhab.port": 8080,
    "openhab.username": "",
    "openhab.password": "",
    "openhab.remoteLspEnabled": true,
    "openhab.remoteLspPort": 5007,
    "openhab.useRestApi": true,
    "openhab.sitemapPreviewUI": "basicui",
    "openhab.karafCommand": "ssh openhab@%openhabhost% -p 8101",
    "workbench.iconTheme": "openhab",

Now you can edit your dashboard.cfg and add

coder.link-name=VS Code Server
coder.link-url=http://xxx.xxx.xxxx.xxxx:9090
coder.link-imageurl=../static/vscode.png

Copy the following file to /etc/openhab2/html
vscode

Enjoy :wink:

I have to admitt the following not working right now:

  • I could not get the Preview to work…
9 Likes

Very awesome. I’m going to have to try this out for sure.

For those who like containers, cdr appears to also supply a Docker image on DockerHub, instructions.

Based on the docs, they don’t support the official VSCode Marketplace for Extensions. Do you know if they support the OH extension? It’s not a big deal if not as there are other ways to install it if necessary.

I also couldn’t find out whether it supports the Remote SSH extension, which would be really nice.

I’m going to give the Docker install a try and see what I can do with it. Thanks for the tutorial!

Thanks for this tutorial and thanks for pointing out the versioning issue.

I was thinking about pushing the needed Vscode version too in the nearer future.

Maybe it would be possible to Install the extensions in the docker environment on first startup.

As I wrote, install the extension from file, it works…:wink:
They have an older version of openHAB extension in their marketplace.
Don‘t know about remote ssh, but testet ssh into karaf which works…

1 Like

Code-Server update is nearly finished, opened an issue at their github…

1 Like

It should be easy to get the openHAB VS Code extension updated in their Marketplace:

Extensions

code-server does not provide access to the official Visual Studio Marketplace. Instead, Coder has created a custom extension marketplace that we manage for open-source extensions. If you want to use an extension with code-server that we do not have in our marketplace please look for a release in the extension’s repository, contact us to see if we have one in the works or, if you build an extension locally from open source, you can copy it to the extensions folder. If you build one locally from open-source please contribute it to the project and let us know so we can give you props! If you have your own custom marketplace, it is possible to point code-server to it by setting the SERVICE_URL and ITEM_URL environment variables.

@Confectrician, would you mind to get in contact with cdr ?

2 Likes

Is this what you were looking for ?

1 Like

Yep I can do that.
Can you open a reminder issue on github?
I am on mobile currently.

1 Like

Done

1 Like

Getting this running in Docker has turned out to be way more of a pain than is usually the case. Here are my notes and there is an Ansible playbook below that will help.

The Docker instructions are very spare with very few details. So a lot of what it took to get it running required some trial and error.

The first problem was that the container runs VSCode as the user coder. I really didn’t want to be coding as some other user on my host. The obvious stuff failed to work, running with the --user option to docker run, mounting /etc/passwd into the container, etc. All of that failed. Searching around on the repo and they off offhandedly say “build it yourself to use a different user”.

OK, so I try to do that. Turns out there are some undocumented ARGs in the Dockerfile that need to be properly set for the build commands to succeed. I couldn’t find exactly how to format and populate all these args. So building it myself also failed. :angry:

Before finally giving up I decided to see if I could make it work by creating a coder user on my host with the same UID as my login. Thus coder and my login would essentially be the same account. That worked! :slight_smile:

The next problem turned out to be my mistake. Long story short, Docker likes the host volume to already exist before you mount it into the container. I had to create ~/.local/share/code-server.

Next problem I encountered was that it comes up with authentication turned on with a randomly generated password. No defaults. It appears that there is no way to turn off authentication without rebuilding the image to change the entrypoint command (see above) so the only option appears to be to define a PASSWORD environment variable.

Finally, I’m in!

To my surprise and happiness, the openHAB was listed when I search for it.

Not actually. That appears to install/run code-server on a remote machine through an SSH connection. I want to use https://code.visualstudio.com/docs/remote/ssh

Most of my machines/vms don’t have enough RAM or CPU to run code-server but I’d like to access and edit the code files through SSH like that extension provides.

So I went to the VSCode Marketplace and downloaded the vsix file and put it in one of the folders that is mounted to the container and then chose the “install from vsix file”. Unfortunately that didn’t work. It says it’s not compatible with VS Code 1.39.2. The current version of VSCode is around 1.41.1 so it looks like code-server doesn’t get updated quite as often as the main one does. I’ll probably have to wait a bit before I can use this extension. In the mean time, I’ll use NFS mounts to access the files if I can’t find a compatible version of the extension or an alternative. It really has become central to my workflow so I’m hesitant to give it up.

Of course, I’ll need to mount my .ssh folder to the container. And there is a potential that it still won’t work if everything needed isn’t there, though there is a third party SSH extensions which are in the code-server marketplace so I have high hopes.

I haven’t spent any time actually working in it yet. And I’ve got some more messing around to do but everything seems to work. But I have noticed that it is causing my browser (Brave) to crash periodically. I guess more reports to follow.

NOTE: The extensions get saved to ~/.local/share/code-server/extensions.

Here’s my Ansible task:

---

- name: Get {{ share_user }} uid
  getent:
    database: passwd
    key: "{{ share_user }}"

- name: Create coder user
  user:
    comment: 'VSCode Server User'
    createhome: no
    name: coder
    shell: /usr/sbin/nologin
    state: present
    system: no
    uid: "{{ getent_passwd['rich'][1] }}"
    group: '{{ share_user }}'
    non_unique: yes
  become: yes

- name: Make sure config volumes exist on the host
  file:
    path: /home/rich/.local/share/code-server
    state: directory
    owner: rich
    group: rich

- name: Install/update code-server
  docker_container:
    detach: true
    env:
        PASSWORD: "{{ share_pass }}"
    hostname: huginn.koshak.net
    image: codercom/code-server:latest
    log_driver: syslog
    name: code-server
    published_ports:
        - "8080:8080"
    recreate: true
    restart: true
    restart_policy: always
    state: started
    user: coder
    volumes:
        - /home/rich/.local/share/code-server:/home/coder/.local/share/code-server:rw
        - /home/rich/code:/home/coder/project:rw
        - /etc/passwd:ro
        - /home/rich/.gitconfig:/home/coder/.gitconfig:rw
        - /home/rich/.ssh:/home/coder/.ssh:rw

The above is a bit sloppy as I couldn’t figure out how to access {{ share_user }} from inside the evaluation of “{{ getent_passwd[‘rich’][1] }}” so I had to list my actual user name. I also need to use {{ share_user }} for the volume paths as well. But this should be something you can use to see what I did and/or modify for your own purposes.

EDIT: I’ve made some more progress.

I discovered that I probably want to mount my .gitconfig folder into the container and in order to do ssh stuff I need to mount my .ssh folder as well. So I added those as volumes to the docker task above. This will keep the same .gitconfig settings as I have with my main user and gives me ssh access to all the same sites (e.g. github) using ssh certs. Because the coder and my main user share an ID, there were no permission problems. Finally, something worked like it’s supposed to.

I installed and did some minimal testing with a few extensions. I was able to verify that the openHAB extension installed through the marketplace works, as does some of the Python extensions, Markdown All in One, and Ansible extensions appear to work. The VSCode VIM extension does not work (I’m old school and like the way I can bulk edit files in VIM that isn’t really possible in other editors) though maybe I would experiment to make it work.

Finally I was able to get the SSH FS extension to work, but it took some doing. Apparently code-server isn’t all that great with working with workspaces. From reading the docs for VSCode there are menu options that just seem to be missing like being able to create a new workspace. Normally this doesn’t matter much; before now I’ve never paid attention to workspaces. But SSH FS needs it’s own workspace because you cannot have folders open from multiple sources in the same workspace. And the only way I could figure out to get to a place where I don’t have a folder opened already in a workspace was to create a new workspace file. So I created an openhab.workspace and populated it with

{
}

Then I used “Open Workspace” and finally I had no folders opened in explorer. Then I was able to use SSH FS to connect to my OH server and open my openHAB config. And I was able to show that the openHAB extension works.

On Linux I still have a problem with code-server crashing Brave, but it appears to run just fine in Chrome (so far).

This is really awesome! If you’ve got the resources, this is a great way to set up the IDE. I’m hoping that I can get VIM key bindings working at some point, but for the rest of you normal people I think this is a perfect project.

And I did some snooping and it appears that they are working on an ARM version that has smaller memory requirements. You would still probably want to run in on an RPi 4 (or similar) with 4 GB RAM or more. But if it works, maybe this could be added as an option for openHABian. Then we can deploy it already set up and ready to use for OH development.

2 Likes

Hi All,
I have updated my initial post with the new download link for Code-Server 1.41.1
openHAB VS-Code extension (0.6 and 0.7beta) and Allignment-Tool are working with the new release.
Still could not figure out how to get the preview working.

1 Like

ARM release is out as well, but only 64bit.
https://github.com/cdr/code-server/releases/download/2.1698/code-server2.1698-vsc1.41.1-linux-arm64.tar.gz

1 Like

For those struggling with cdr’s half-assed Docker image (at least in terms of supporting documentation is concerned), use “2.1698” for the version tag. “latest” and “v2” will not get you this latest release, at least not yet.

I’m seriously looking at using linuxserver’s image instead. https://hub.docker.com/r/linuxserver/code-server. It at least appears to have better documentation.

The openHAB extension is still showing up as 0.4.0 for me. I’m going to manually install it and will check back later.

I also struggled with the code-server docker image until I decided to try installing code-server on some other random docker image. This was really simple and you won’t have to worry about the ‘coder’ user. I have not tried it yet but it just might work to install code server directly on one of the openhab images.

We have raised an issue and they are checking why automatc update of their Marketplace is not working.

1 Like

Should be possible, just make shure to run it as user openhab to avoid file permission issues,

Great! Thanks!
There is a install package now and because I installed in on a seperate server, there are some other steps and I thought; I add my tutorial here:

To connect it to openhab, I wanted it to use the existing smb share on the openhab system:

adduser codeserver
usermod -aG openhab codeserver
smbpasswd -a codeserver 
openhabian-config -> apply improvements -> fix permissions 

I installed it on an extra instance/container with a fresh ubuntu: (running with 512MB Ram, 1 CPU nicely).

sudo -i 
apt update
apt install curl
curl -fsSL https://code-server.dev/install.sh | sh
systemctl --user enable --now code-server
mkdir /media/openhab
echo '//10.0.1.2/openHAB-share /media/openhab2 cifs username=codeserver,password=codeserver,iocharset=utf8,file_mode=0777,dir_mode=0777,noperm 0 0'>>/etc/fstab
mount /media/openhab2

then modify the config to enable access from over the network:

sudo nano ~/.config/code-server/config.yaml 
(and repace the 127.0.0.1 with 0.0.0.0
FYI; change the pw here ). 

Then, install the openhab extension in the browser:
then, change the config to your openhab-server to your liking:

image

{
    "openhab.itemCasing": "snake",
    "openhab.useRestApi": true,
    "openhab.sitemapPreviewUI": "basicui",
    "openhab.host": "10.0.1.2",
    "openhab.port": 8080,
    "openhab.remoteLspEnabled": true,
    "openhab.remoteLspPort": 5007,
    "openhab.username": "openhab",
    "openhab.password": "habopen",
    "openhab.karafCommand": "ssh openhab@10.0.1.2 -p 8101 -t",
}

and then, I recommend to add it to your dashboard:


by adding this

codeserver.link-name=openHAB Code Editor
codeserver.link-url=http://10.0.1.9:8080
codeserver.link-imageurl=../static/codeserver.jpg

to your file here: services/dashboard.cfg

2 Likes

Thank you, is it possible to add this installation process to openhabian?

Have a nice weekend!

Johannes

I think that would be helpful for a lot of peoples and the supported hardware would be sufficient. What does @elias_gabrielsson think?

The installation instructions require a machine with:

  • 1 GB RAM
  • 2 CPU cores

Given all the other stuff openHABian as running, not the least of which is openHAB in terms of RAM use, I would only attempt to install VSCode on an RPi 4 with 4GB + of RAM. Given that limitation I’m not certain that is worth supporting.

But if someone wants to try it out and submit a PR I’m sure there will be lots of good discussion and it might be accepted.

2 Likes