This note explains how to setup Dendron as a web app which syncs notes to a git repository.

tl;dr:

  • Setup code-server in a docker container.
  • Run the container. Install the Dendron extension. Configure git
  • Commit the docker image so that the Dendron installation and other settings persist
  • Use a reverse proxy to serve the code-server over https, so it doesn’t grumble about being accessed in an insecure context and cripple itself

Setup code-server

  • Use the excellent linuxserver/code-server docker image

    • Tweak the TZ, PASSWORD, SUDO_PASSWORD environment variables. I use a .env file for the actual passwords.
      • Create a .env file in the same folder as the docker-compose.yaml file and add the passwords there
    • I ## the ports and instead create a network code-server-npm which I add to the Nginx Proxy Manager docker-compose file. You don’t need to do this if you don’t use NPM the way I do (Each of my docker app containers define an appname-npm docker network. This is then added to NPM’s docker-compose file as an external network.)

  • The docker-compose.yaml file is

     1version: "2.1"
 2services:
 3code-server:
 4    image: lscr.io/linuxserver/code-server:latest
 5    container_name: code-server
 6    environment:
 7    - PUID=1000
 8    - PGID=1000
 9    - TZ=America/Los_Angeles
10    - PASSWORD=${PASSWORD} #optional
11    - HASHED_PASSWORD= #optional
12    - SUDO_PASSWORD=${SUDO_PASSWORD} #optional
13    - SUDO_PASSWORD_HASH= #optional
14    - PROXY_DOMAIN=code-server.my.domain #optional
15    - DEFAULT_WORKSPACE=/config/workspace #optional
16    volumes:
17    - ./config:/config
18#    ports:
19#      - 10.0.0.1:8443:8443
20    restart: unless-stopped
21    networks:
22        - code-server-npm
23
24networks:
25code-server-npm:

  • Create a file named .env in the same folder that has docker-compose.yaml. Within that file,

    1PASSWORD=somepassword
2SUDO_PASSWORD=somepassword

  • Also create a folder named config in the same folder that has docker-compose.yaml. This is where Dendron/VS Code will store its data.

  • Then spool up the container with docker-compose up -d

    • Logs can be checked with docker logs -f code-server

Setup NPM

  • I use Nginx Proxy Manager (NPM) as a reverse proxy. It’s docker-compose.yaml file needs to contain (in addition to other things)

    1services:
2app:
3    networks:
4    - code-server_code-server-npm
5
6networks:
7code-server_code-server-npm:
8    external: true

  • Then (optional), in the NPM GUI add a new access list

    • Details tab
      • Name: pw-protect
      • Satisfy Any: true
    • Authorization tab
      • Username: the-username
      • Password: the-password
    • This adds an additional username/pw authorization dialog before code-server web app is shown (which has its own password authorization)

  • Then, in the NPM GUI add a new proxy host

    • Details tab
      • Domain name: foo.example.com
      • Scheme: http
      • Forward Hostname / IP: code-server
      • Forward Port: 8443
      • Block common exploits: true
      • Websockets support: true
      • Access List: pw-protect
    • SSL tab
      • SSL Certificate: foo.example.com
      • Force SSL: true
      • HTTP/2 Support: true

  • Remember to do docker-compose down and docker-compose up -d to pull in the new changes.

NOTE: Websockets support must be enabled in the configuration of the NPM proxy host. If not, docker logs -f code-server will show errors like

1File not found: /app/code-server/lib/vscode/extensions/git-base/dist/browser/extension.js
2File not found: /app/code-server/lib/vscode/extensions/emmet/dist/browser/emmetBrowserMain.js
3File not found: /app/code-server/lib/vscode/extensions/merge-conflict/dist/browser/mergeConflictMain.js

Install Dendron

  • Log in to https://foo.example.com . This is VS Code running in the browser.
  • Install the Dendron extension and the other extensions it needs.
  • Create a new workspace named e.g. dendron-notes
    • This will be a folder created in the config folder created above (in the same directory as the docker-compose.yaml file.)

Configure git

I prefer to configure a connection to GitHub (or some other git server) so that the Dendron notes are synced to a remote repository. This takes care of backup 😃 and is also a synchronization mechanism. On another computer, you can clone the git repository and use it with a natively installed VS Code. Thus, the notes stay in sync between the web app version of Dendron and any other computers that Dendron is installed on.

  • To configure git
    • Create a .gitignore file in the Dendron workspace with contents from here
    • Sign in to GitHub first in the default browser of your computer.
    • Go to the ‘Source Control’ area of code-server and follow the instructions to Push to GitHub.
      • This was a bit unintuitive for me, but mess around and it’ll be done in a few minutes.
      • Basically, you create a git repo in the Dendron workspace and push that to a Github repo.
        • That repo should not already exist. code-server will create it for you.
    • Open the terminal in code-server and
      • git config --global user.name "username"
      • git config --global user.email "email address"
    • NOTE: It seems that code-server creates a “Master” branch rather than the newly politically correctly named “Main” branch. This shouldn’t be an issue since the repository does not already exist in GitHub. code-server creates it.
    • At some point, VS Code may ask whether it should periodically auto-fetch from the remote repository. Saying “Yes” helps reduce the manual effort of pulling in any changes from the git remote

Docker commit

  • We’ve made a bunch of changes to code-server by installing the Dendron extension and configuring git.
  • These changes will not persist if the docker container is restarted (docker-compose down; docker-compose up).
  • To commit the changes, we use Docker commit . Open another terminal on the docker host and
    • docker ps to see the id of the code-server container
    • docker commit <id> lscr.io/linuxserver/code-server:dendron
    • Note that by using docker commit we created a new image that has Dendron and git configuration baked in.
  • Now go back to the docker-compose.yaml file and update the line
    • image: lscr.io/linuxserver/code-server:dendron

Additional tips

  • I use Linux with a heavily customized keyboard layout. However, code-server believed I was using ‘Layout: us’ and most of the keyboard shortcuts e.g. Ctrl+S to save or Ctrl+L for lookup didn’t work. When I pressed those key combinations, code-server would register some other keys being pressed. The fix for this is to go to code-server settings and set "keyboard.dispatch" : "keyCode"

  • code-server must be served over https. Else, VS Code will complain about being accessed in an insecure context and many things, including Note Preview’s will not work

  • Ctrl+Shift+P which is normally used for entering commands is hijacked by Firefox for launching a new private window. However, F1 key works well as an alternative keyboard shortcut.

  • Shell access whilst the container is running:

    • docker exec -it code-server /bin/bash

  • To monitor the logs of the container in realtime:

    • docker logs -f code-server

Open questions

  • It seems VS Code needs to authorize to GitHub each time after docker-compose down; docker-compose up. Not sure why this is the case, but ehh.