Excalidraw Full-Stack Self-Deployment

Intro

This might be the only article on the Chinese internet that discusses how to fully deploy the Excalidraw stack. Most only deploy a crippled frontend.

I tried to privately deploy Excalidraw locally, and the operation is very simple. According to the official README, it can be completed quickly.

Issue

But have you noticed that sharing links and online collaboration have issues and don’t work? Even Libraries have some problems?

This is because almost all the deployment tutorials on the internet only deploy the excalidraw-app frontend, and its storage requires excalidraw-json, while collaboration requires excalidraw-room.

The official code for these is all open source, but the progress of the frontend is too fast, so they are all unusable now.

For example, the officially released excalidraw-json uses S3 storage, and now it’s firebase without exception. The official version hasn’t released a stripped-down version, so what should we do?

Solution

The answer is to downgrade and build a full stack.

We use the official excalidraw-app, but the version is about 9 months old. Frankly speaking, there aren’t many missing features, and there are no major bug issues. This generation of frontend is quite compatible.

excalidraw-json is unusable. There are also some solutions abroad that use minio to run S3 to interface with it, but I tested it and found some big problems. This backend should be unusable. Fortunately, I found a third-party solution that implements a fully functional backend with its own code, supports v2 API, called excalidraw-storage-backend.

We use the official excalidraw-room, the latest version, which is about 9 months old, consistent with the frontend, and can be used normally.

redis is required by excalidraw-storage-backend and is used to temporarily store shared canvas data, so it cannot guarantee data reliability.

So let’s get started. This solution uses docker-compose.

• excalidraw-app
• excalidraw-room
• excalidraw-storage-backend
• redis

Docker Compose

Docker Compose configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

version: "3.8"

services:
  excalidraw:
    image: kiliandeca/excalidraw
    healthcheck:
      disable: true
    ports:
      - "80:80" # Default port 80, can be modified
    environment:
      BACKEND_V2_GET_URL: http://localhost:8080/api/v2/scenes/
      BACKEND_V2_POST_URL: http://localhost:8080/api/v2/scenes/
      LIBRARY_URL: https://libraries.excalidraw.com
      LIBRARY_BACKEND: https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
      SOCKET_SERVER_URL: http://localhost:5000/
      STORAGE_BACKEND: "http"
      HTTP_STORAGE_BACKEND_URL: "http://localhost:8080/api/v2"

  excalidraw-storage-backend:
    image: kiliandeca/excalidraw-storage-backend
    ports:
      - "8080:8080"
    environment:
      STORAGE_URI: redis://redis:6379

  excalidraw-room:
    image: excalidraw/excalidraw-room
    ports:
      - "5000:80"

  redis:
    image: redis
    ports:
      - "6379:6379"

It does not support https by default. If needed, it can be achieved through a reverse proxy, but remember to modify the variables in the environment at the same time.

This configuration file has been tested locally and can run perfectly.

If you have a conflict with port 6379, you can choose to build a network.

1

docker network create excalidraw-net

Then make some modifications like this, and it’s done.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

version: "3.8"

services:
  excalidraw:
    image: kiliandeca/excalidraw
    healthcheck:
      disable: true
    ports:
      - "80:80"
    environment:
      BACKEND_V2_GET_URL: http://localhost:8080/api/v2/scenes/
      BACKEND_V2_POST_URL: http://localhost:8080/api/v2/scenes/
      LIBRARY_URL: https://libraries.excalidraw.com
      LIBRARY_BACKEND: https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
      SOCKET_SERVER_URL: http://localhost:5000/
      STORAGE_BACKEND: "http"
      HTTP_STORAGE_BACKEND_URL: "http://localhost:8080/api/v2"

  excalidraw-storage-backend:
    image: kiliandeca/excalidraw-storage-backend
    ports:
      - "8080:8080"
    environment:
      STORAGE_URI: redis://redis:6379

  excalidraw-room:
    image: excalidraw/excalidraw-room
    ports:
      - "5000:80"

  redis:
    image: redis
    expose:
      - "6379"

networks:
  default:
    external:
      name: excalidraw-net

Run

Find or create a new directory and create a docker-compose file.

1

nano docker-compose.yml

Fill in the docker-compose configuration, and remember to modify it according to your actual situation.

After that, we need to configure the reverse proxy. Remember to configure WebSocket support. I’ll skip it here.

The idea is like this. You can refer to the configuration below: