Dendron as a web app

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,
```
PASSWORD=somepassword
SUDO_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

File not found: /app/code-server/lib/vscode/extensions/git-base/dist/browser/extension.js
File not found: /app/code-server/lib/vscode/extensions/emmet/dist/browser/emmetBrowserMain.js
File 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"
- Source: https://github.com/Microsoft/vscode/wiki/Keybinding-Issues#troubleshoot-linux-keybindings
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.

Dendron as a Web App

Contents