Self-Host and Dockerize Standard Notes Extensions with Docker-Compose

Malte Hellmeier -

While searching for a self-hosted, platform-independent notes tool supporting Markdown I came across Standard Notes, an encrypted Evernote alternative. After installing the syncing-server with docker-compose, I quickly set up a working system (more information can be found here). But this only creates a plain notes tool without Markdown support. Therefore, extensions are necessary to add multiple editors besides the Plain Editor.

For Markdown support, several alternatives are available, for example:

To add them to your local Standard Notes client you either have to pay for one of the plans directly from Standard Notes or self-host the server application. While I am using docker and docker-compose for most of my applications I also wanted to dockerize the extensions.

Create Structure

Most of the extensions aren't available as images at Docker Hub and you sometimes don't need to build them. Nevertheless, I will show you an example how to build and create your own custom docker image, just to be sure to get the latest version.

To get started, create the files, .dockerignore, Dockerfile, docker-compose.yml and eventually ext.json:

touch .dockerignore
touch Dockerfile
touch docker-compose.yml
touch ext.json

Next, clone the Git repository of your extensions. Here, I will use the Fancy Markdown Editor / Math Editor as an example:

git clone https://github.com/sn-extensions/math-editor.git

This should create the following structure:

├── math-editor/
│   ├── package.json
│   ├── package-lock.json
│   ├── ...
├── .dockerignore
├── docker-compose.yml
├── Dockerfile
└── ext.json

Add Code to the Files

Now, let's add code to the files.

Add the following to your .dockerignore as suggested in the Node.JS documentation:

node_modules
npm-debug.log

The heart of the process can be found in the Dockerfile. Here, we will copy the data into the container, install all relevant dependencies as well as a http-server to publish and test the results. Remember that changes might be necessary when using another extension because of different paths, dependencies etc.:

FROM node:12

# Create working directory
WORKDIR /usr/src/app

# Copy package.json and package-lock.json into the container
COPY math-editor/package*.json ./

# Install Ruby
RUN apt-get update
RUN apt-get install ruby-compass -y

# Install Grunt, the HTTP Server and all relevant npm packages
RUN npm install -g grunt-cli
RUN npm install -g http-server
RUN npm install

# Copy the repo and the ext.json into the container
COPY math-editor/. .
COPY ext.json .

# Expose it to port 8080 (can be changed to your preferences)
EXPOSE 8080

# Run runt
RUN grunt

# Run the HTTP Server at container start
CMD [ "http-server", "-p", "8080", "--cors" ]

Next, create a simple docker-compose.yml:

version: '3.8'

services:
  sn-notes-extension_math-editor:
    image: sn-notes-extension_math-editor:custom
    build: .
    container_name: sn-notes-extension_math-editor
    hostname: sn-notes-extension_math-editor
    restart: unless-stopped
    ports:
      - 8080:8080
    volumes:
      - ./math-editor:/usr/src/app
      - ./ext.json:/usr/src/app/ext.json

If you are using a reverse proxy like traefik, feel free to remove the ports part and add your custom labels and networks instead.

In the end, we have to add key/value pairs to the ext.json file. In our example case this would be:

{
  "identifier": "org.sn-extensions.math-editor",
  "name": "Fancy Markdown Editor",
  "description": "A beautiful split-pane Markdown editor with synced-scroll, LaTeX support, and colorful syntax.",
  "content_type": "SN|Component",
  "area": "editor-editor",
  "version": "1.3.4",
  "url": "http://localhost:8080"
}

For more information, look into the Publishing guide.

Start and Test Local Extension

To test the local extension, simply run

docker-compose up -d --build

If everything is done correctly the editor can be viewed by visiting http://localhost:8080 in your browser. Also, check if you see the content of the ext.json file when visiting http://localhost:8080/ext.json

Add Extension to Standard Notes Client

To add the extension to your local client, open Standard Notes, click on Extensions at the bottom, select Import Extensions, paste the http://localhost:8080/ext.json link into the form field, hit enter and click on the Install button.

Local Extension Installation

That's it! Now you can change the editor to your installed one and enjoy Markdown notes!

Sidenotes

  • Remember that some extensions already come with a ext.json file (like the Minimal Markdown Editor). In this case, simply don't create the file and remove the COPY ext.json . from the Dockerfile and the last volume mount ./ext.json:/usr/src/app/ext.json from the docker-compose.yml.
  • Respect the licenses of Standard Notes and the extension developers. The mentioned steps are useful if you want to test or develop the extensions. Double-check if you are allowed to host them publicly.
  • We aren't affiliated with Standard Notes and the guide isn't provided by Standard Notes. We only ask for permission to use the logo in our header image.

References