Home Assistant Container Part 13: VS Code code-server

DezeStijn • • 4 mins read

Series: HA Container

Intro

Having played a bit more with my podman and Home Assistant Container setup, I though it was time for an update.

Recently I installed the Visual Studio Code (VS Code) container IDE (code-server) as an alternative to my HassConf editor. This definitely feels like an upgrade, for one because I can now finally keep multiple files at the same time.

Podman config

Let’s jump straight into it.

The systemd service config below will launch a podman container that

  • maps volumes for .local and .config for persistent storage
  • maps volumes for “projects” I want to be able to edit from coder
[Unit]
Description=Code Server Container
Wants=network-online.target
After=network-online.target
RequiresMountsFor=%t/containers

[Service]
Environment=PODMAN_SYSTEMD_UNIT=%n TZ=Europe/Brussels
Restart=on-failure
RestartSec=30
TimeoutStopSec=70
ExecStartPre=/bin/rm -f %t/%n.ctr-id
ExecStart=/usr/bin/podman run \
                          --conmon-pidfile %t/%n-pid \
                          --cidfile=%t/%n.ctr-id \
                          --cgroups=no-conmon \
                          --rm \
                          --sdnotify=conmon \
                          --replace \
                          --detach \
                          --label "io.containers.autoupdate=registry" \
                          --name=code-server \
                          --volume=/srv/service/code-server/local:/home/coder/.local:Z \
                          --volume=/srv/service/code-server/config:/home/coder/.config:Z \
                          --volume=/srv/hass/hass:/home/coder/project/homeassistant:z \
                          --volume=/srv/hass/esphome:/home/coder/project/esphome:z \
                          --volume=/srv/core/nginx:/home/coder/project/nginx:z \
                          --userns=keep-id:uid=1000,gid=1000 \
                          -p 8084:8080 \
                          ghcr.io/coder/code-server:latest
ExecStop=/usr/bin/podman stop --ignore --cidfile=%t/%n.ctr-id -t 10
ExecStopPost=/usr/bin/podman rm -f --ignore --cidfile=%t/%n.ctr-id
PIDFile=%t/%n-pid
Type=notify
NotifyAccess=all

[Install]
WantedBy=default.target

Some more notes:

  • Note the SELinux labels :z and :Z.
    When sharing volumes you should label them with :z in every container config.

    The z option tells Podman that two or more containers share the volume content. As a result, Podman labels the content with a shared content label. Shared volume labels allow all containers to read/write content.

  • The userns parameter is used to map the coder user in the container to the user running podman.
    That way, I’m able to browse and edit files/folders created by the container in my mapped volumes.
  • I mapped the web port of the container to port 8084 because 8080 is already claimed on my Podman host.

If you now start (and enable) this systemd service, you’ll be able to browse to http://<ip.of.your.system>:8084 to open VS Code Your main Home Assistant configuration file will be available in /home/coder/project/homeassistant/configuration.yaml.

mkdir -p /srv/service/code-server/local
mkdir -p /srv/service/code-server/config

systemctl --user start container-code-server.service
systemctl --user enable --now container-code-server.service
Created symlink /var/home/hass/.config/systemd/user/default.target.wants/container-code-server.service → /var/home/hass/.config/systemd/user/container-code-server.service.

VS Code config

Login

The first time you open VS Code, you’ll be greeted with the following screen.

VS Code login screen
VS Code login screen

Because we mapped the /home/coder/.config container folder to /srv/service/code-server/config on our host, the password file can be retrieved at /srv/service/code-server/config/code-server/config.yaml.

$ cat /srv/service/code-server/config/code-server/config.yaml
bind-addr: 127.0.0.1:8080
auth: password
password: xxxxxxxxxxxxxxxxxxxxxxxx
cert: false

Home Assistant extension

Kees Schollaart wrote a nice extension for VSCode that provides validation for your Home Assistant YAML and entity_id completion.

To install this extension, open the Extensions sidebar menu and search for “Home Assistant”. The one by “keesschollaert” is the one you’re looking for.

Home Assistant Config Helper extension for VSCode
Home Assistant Config Helper by keesschollaert

Once installed, open the Extension Settings (cogwheel).

Extension configuration
Extension configuration

You’ll need to enter your Home Assistant URL (including http:// or https://, and port if applicable) and a Long-Lived Access Token. If you’re hosting your HA with a self-signed certificate, you’ll need to check the box next to “Ignore Certificates”.

You can get a LLAT for Home Assistant via your profile settings. Open HA, click on your profile picture, and scroll all the way to the bottom.
Be warned: if someone gets hold of your Access Token, they gain access to your Home Assistant account!

Home Assistant Long-Lived Access Token
Home Assistant Long-Lived Access Token

Home Assistant config

Note: This has changed since Home Assistant 2024.4. You can now use a Webpage Dashboard to embed a webpage in your dashboard.

To be able to open VS Code from the Home Assistant sidebar menu, you can add a panel_iframe. If you’ve followed the series, you’ll have seen me use this a few times already.

# Outdated, use web dashboard
panel_iframe:
  coder:
    title: Coder
    icon: mdi:code-json
    url: http://<ip.of.your.system>:8084
    require_admin: true

And now we can easily open a code editor from within the Home Assistant UI to work on our YAML configurations.

Changelog

  • 2024-09-05 - Reference Webpage dashboard replacing iframe_panel since 2024.04