Browser Version on a Private Server

You can deploy the browser version on your own server if security requirements prevent you from using app.gram.ax. For example, if your company prohibits the use of the software vendor’s CORS proxy.

Launch

1. Download the ready‑made file using the command curl -LO https://gram.ax/editor-docker-compose.yaml.

   Read more

   version: "3.8"
   
   services:
     editor:
       image: docker.io/gramax/editor:latest
       container_name: editor
       restart: unless-stopped
       ports:
         - ${PORT:-3000}:80
       environment:
         - GIT_PROXY_SERVICE_URL=${GIT_PROXY_SERVICE_URL:-http://localhost:3001}
   
     git-proxy:
       image: docker.io/gramax/git-proxy:latest
       container_name: git_proxy
       restart: unless-stopped
       ports:
         - ${GIT_PROXY_PORT:-3001}:80
       environment:
         - ALLOWED_GRAMAX_URLS=${ALLOWED_GRAMAX_URLS:-}

2. Set the environment variables:

   1. PORT — the port on which the Gramax editor will be accessible. If not specified, port 3000 is used.

   2. GIT_PROXY_SERVICE_URL — the URL the editor uses to access the Git Proxy service. The default is http://localhost:3001.

   3. GIT_PROXY_PORT — the port for the Git Proxy service. If not specified, 3001 is used.

   4. ALLOWED_GRAMAX_URLS — a comma‑separated list of domains allowed to send requests via Git Proxy. Connections from localhost are always allowed.

Access from other devices

To make the browser version accessible to other employees on the local network, you must use HTTPS.

HTTPS setup

1. Create an OpenSSL configuration file (for example, openssl.cnf) with the following content:

   [req]
   distinguished_name = dn
   x509_extensions = ext
   prompt = no
   
   [dn]
   CN = editor.local
   
   [ext]
   subjectAltName = @alt_names
   
   [alt_names]
   DNS.1 = editor.local   # Editor domain
   DNS.2 = gitproxy.local # Git Proxy domain

2. Generate a self‑signed certificate using the following command:

   mkdir -p certs
   
   openssl req -x509 -nodes -days 365 \
     -newkey rsa:2048 \
     -keyout certs/private.key \
     -out certs/certificate.crt \
     -config openssl.cnf

   The certificate and key files will be saved in the certs/ folder.

3. Extend the docker-compose.yaml file by adding Caddy and HTTPS settings. Don’t forget to replace the example domains with your own:

   version: "3.8"
   
   services:
     caddy:
       image: caddy:latest
       container_name: caddy
       ports:
         - "80:80"
         - "443:443"
       volumes:
         - ./certs:/certs
       restart: unless-stopped
       configs:
         - source: caddy_config
           target: /etc/caddy/Caddyfile
   
     editor:
       image: docker.io/gramax/editor:latest
       restart: unless-stopped
       container_name: editor
       environment:
         - GIT_PROXY_SERVICE_URL=${GIT_PROXY_SERVICE_URL:-https://gitproxy.local}
   
     git-proxy:
       image: docker.io/gramax/git-proxy:latest
       container_name: git_proxy
       restart: unless-stopped
       environment:
         - ALLOWED_GRAMAX_URLS=${ALLOWED_GRAMAX_URLS:-https://editor.local}
   
   configs:
     caddy_config:
       content: |
         editor.local {
           reverse_proxy editor:80
           tls /certs/certificate.crt /certs/private.key
         }
         gitproxy.local {
           reverse_proxy git-proxy:80
           tls /certs/certificate.crt /certs/private.key
         }

4. Configure your local DNS server or router so that the domains editor.local and gitproxy.local resolve to the IP address of the server where the editor and Git Proxy services are deployed.

5. Start the containers:

   docker-compose up -d

6. Open the following in your browser:

   https://editor.local

   When you open it for the first time, the browser may warn you about a self‑signed certificate. You can either:

   • Temporarily accept the exception in the browser.

   • Install the certificate.crt certificate into your system’s trusted root certification authorities to avoid warnings in the future.

Support for Draw.io and PlantUML diagrams

If you want diagrams to be generated on your own server, follow these steps:

1. Add the gramax/diagram-renderer:latest service to the docker-compose.yaml file.

2. Specify the DIAGRAM_RENDERER_SERVICE_URL environment variable in the editor block.
   DIAGRAM_RENDERER_SERVICE_URL is the URL where the gramax/diagram-renderer:latest service is accessible.

3. Specify the ALLOWED_GRAMAX_URLS variable in the diagram‑renderer block.
   ALLOWED_GRAMAX_URLS is the URL of the browser editor gramax/editor:latest that accesses the diagram service.

4. Below is an example of an extended docker-compose.yaml fragment with diagram support and HTTPS:

   version: "3.8"
   
   services:
     caddy:
       image: caddy:latest
       container_name: caddy
       ports:
         - "80:80"
         - "443:443"
       volumes:
         - ./certs:/certs
       restart: unless-stopped
       configs:
         - source: caddy_config
           target: /etc/caddy/Caddyfile
   
     editor:
       image: docker.io/gramax/editor:latest
       restart: unless-stopped
       container_name: editor
       environment:
         - GIT_PROXY_SERVICE_URL=${GIT_PROXY_SERVICE_URL:-https://services.local}
         - DIAGRAM_RENDERER_SERVICE_URL=${DIAGRAM_RENDERER_SERVICE_URL:-https://services.local/diagram-renderer}
   
     git-proxy:
       image: docker.io/gramax/git-proxy:latest
       container_name: git_proxy
       restart: unless-stopped
       environment:
         - ALLOWED_GRAMAX_URLS=${ALLOWED_GRAMAX_URLS:-https://editor.local}
   
     diagram-renderer:
       image: docker.io/gramax/diagram-renderer:latest
       container_name: diagram-renderer
       restart: unless-stopped
       environment:
         - ALLOWED_GRAMAX_URLS=${ALLOWED_GRAMAX_URLS:-https://editor.local}
   
   configs:
     caddy_config:
       content: |
         editor.local {
           reverse_proxy editor:80
           tls /certs/certificate.crt /certs/private.key
         }
         services.local {
           handle_path /* {
             reverse_proxy git-proxy:80
           }
           handle_path /diagram-renderer/* {
             reverse_proxy diagram-renderer:8080
           }
           tls /certs/certificate.crt /certs/private.key
         }