alswl / excalidraw-collaboration Goto Github PK

View Code? Open in Web Editor NEW

304.0 7.0 55.0 272 KB

excalidraw with collaboration feature, self-hosting, and only one-click deploy

License: MIT License

collaboration diagramming excalidraw self-hosting

excalidraw-collaboration's Introduction

excalidraw-collaboration

Demo:

demo on Railway

One click to deploy your excalidraw with collaboration.

Snapshot:

Related docs:

Deploy

Clone, and run:

git clone [email protected]:alswl/excalidraw-collaboration.git
cd excalidraw-collaboration

docker-compose up # run the containers

open "http://localhost" # open browser, and you can using the collbration functions

Browse it:

open http://127.0.0.1/ ,and you will see the excalidraw page
Click the Live Collaboration button, and you will see the collaboration page
Now you can share the collaboration page with your friends, and you can draw together.

About public network release:

if you want to release your own excalidraw in public network, you should modify the docker-compose.yaml file, Replace the VITE_APP_HTTP_STORAGE_BACKEND_URL and VITE_APP_WS_SERVER_URL with your own domain.

Roadmap

Upgrade Guide

v0.15.0 -> v0.16.1
- replace REACT_APP_ env with VITE_APP_

Q & A

How to deploy on the cloud(aws etc)

The docker-compose.yaml file is for local deploy, if you want to deploy on the cloud, you should prepare 2 Load Balancer(with HTTPS cert), one for websocket server, one for storage server.

The VITE_APP_HTTP_STORAGE_BACKEND_URL is for the Load Balancer URL(HTTPS) for storage, and the VITE_APP_WS_SERVER_URL is for the Load Balancer URL(HTTPS) for websocket.

Here is a conversation about how to deploy on the aws: #22

generateKey problem

Error message:

TypeError: Cannot read properties of undefined (reading 'generateKey')

Why: The excalidraw is using crypto module of Javascript, the HTTPS is required.

How to solve: use HTTPS to access the page, or use http://localhost instead.

excalidraw-collaboration's People

Contributors

Stargazers

Watchers

excalidraw-collaboration's Issues

Images not working when "Export to Link" was used

First things first: Thanks for your work!!

I got the collaboration mode to work, but there are some anomalies when dealing with images:

Images working fine in the collaboration mode:

Until someone did a save using "Export to Link". When using the link, only a placeholder for the image will be shown:

When using the room-share link after doing the "Export to Link" the images wont be shown too.

When doing a "Save to disk", the images are referenced in "elements", but the "files" are empty.

Ways to reproduce:

1) Export to Link

Create a new drawing and pasting an image into it.
Do a "Export to Link"
Using the export-link: Now, only the placeholder will be shown

2) Export to Link after starting a Live Collaboration

Create a new drawing and pasting an image into it.
Starting a "Live collaboration": Image will be shown, when using the collaboration-link
Do a "Export to Link"
Using the collaboration-link: Now, only the placeholder will be shown (the same when using the export-link)

3) Export to Link before starting a Live Collaboration

Create a new drawing and pasting an image into it.
Do a "Export to Link"
Using the export-link: Now, only the placeholder will be shown
NOW start a "Live collaboration"
Using the collaboration-link: Now, the image (!) will be shown
Do another "Export to Link"
Using the collaboration-link again: Now, only the placeholder (!) will be shown

Summary

As soon as a "Export to link" was done, images will be shown only as a placeholder. Beside the one special case in 3), when a collaboration session was`t started, it will work until the next "Export to link" for the collaboration mode.

Btw: When restarting all the services, images will still be shown when using the collaboration link (until the drawing was "exported to link"). So there is some kind of working image persistence.

I'm using alswl/excalidraw:v0.17.0-fork-b2, alswl/excalidraw-storage-backend:v2023.11.11 and excalidraw/excalidraw-room:sha-49bf529. But same behavior when using excalidraw/excalidraw-room.

I tried this with redis, postgres and mongodb.

通过docker-compose.yaml配置excalidraw环境

大佬好！
可不可以通过docker-compose.yaml来配置excalidraw环境变量，这样方便在不同的环境部署，不用重复构建，下面是我的yaml，我这样写了，但是没有用，请大佬解惑，谢谢！

services:
  frontend:
    image: excalidraw:v0.1.0-5b2dbad-dirty
    environment:
      - REACT_APP_BACKEND_V2_GET_URL=https://draw.gc-boy.com/api/v2/
      - REACT_APP_BACKEND_V2_POST_URL=https://draw.gc-boy.com/api/v2/post/
      - REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
      - REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
      - REACT_APP_HTTP_STORAGE_BACKEND_URL=https://draw.gc-boy.com/api/v2
      - REACT_APP_STORAGE_BACKEND=http
      - REACT_APP_PORTAL_URL=null
      - REACT_APP_WS_SERVER_URL=https://draw.gc-boy.com
      - REACT_APP_FIREBASE_CONFIG="{}"
      - REACT_APP_GOOGLE_ANALYTICS_ID=foo
      - REACT_APP_PLUS_APP=https://app.excalidraw.com
    ports:
      - 80:80

  storage:
    image: excalidraw-storage-backend:v0.1.0-5b2dbad-dirty
    restart: always
    environment: # docs https://github.com/alswl/excalidraw-storage-backend#environement-variables
      - PORT=8081
    ports:
      - 8081:8081

  room:
    image: excalidraw-room:v0.1.0-5b2dbad-dirty
    ports:
      - 8082:80

Support for v0.16.0?

This fork will be updated to complain with v0.16.0 breaking changes?

v0.16.1-fork-b1版本部署后实时协作存在异常

本以为是自己部署的问题，发现live 的也是一样的问题，回滚到上个版本后清空缓存正常

TypeError: Cannot read properties of undefined (reading 'generateKey')

不知作者是否知道这个bug怎么解决：

/app/dist $ cat /home/node/.npm/_logs/2023-01-04T11_25_31_093Z-debug-0.log
0 verbose cli /usr/local/bin/node /usr/local/bin/npm
1 info using [email protected]
2 info using [email protected]
3 timing npm:load:whichnode Completed in 1ms
4 timing config:load:defaults Completed in 4ms
5 timing config:load:file:/usr/local/lib/node_modules/npm/npmrc Completed in 2ms
6 timing config:load:builtin Completed in 3ms
7 timing config:load:cli Completed in 7ms
8 timing config:load:env Completed in 0ms
9 timing config:load:file:/app/.npmrc Completed in 9ms
10 timing config:load:project Completed in 14ms
11 timing config:load:file:/home/node/.npmrc Completed in 5ms
12 timing config:load:user Completed in 5ms
13 timing config:load:file:/usr/local/etc/npmrc Completed in 1ms
14 timing config:load:global Completed in 1ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:credentials Completed in 2ms
17 timing config:load:setEnvs Completed in 4ms
18 timing config:load Completed in 51ms
19 timing npm:load:configload Completed in 51ms
20 timing npm:load:mkdirpcache Completed in 4ms
21 timing npm:load:mkdirplogs Completed in 1ms
22 verbose title npm run start:prod
23 verbose argv "run" "start:prod"
/app/dist $ cat /home/node/.npm/_logs/2023-01-04T11_25_31_093Z-debug-0.log
0 verbose cli /usr/local/bin/node /usr/local/bin/npm
1 info using [email protected]
2 info using [email protected]
3 timing npm:load:whichnode Completed in 1ms
4 timing config:load:defaults Completed in 4ms
5 timing config:load:file:/usr/local/lib/node_modules/npm/npmrc Completed in 2ms
6 timing config:load:builtin Completed in 3ms
7 timing config:load:cli Completed in 7ms
8 timing config:load:env Completed in 0ms
9 timing config:load:file:/app/.npmrc Completed in 9ms
10 timing config:load:project Completed in 14ms
11 timing config:load:file:/home/node/.npmrc Completed in 5ms
12 timing config:load:user Completed in 5ms
13 timing config:load:file:/usr/local/etc/npmrc Completed in 1ms
14 timing config:load:global Completed in 1ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:credentials Completed in 2ms
17 timing config:load:setEnvs Completed in 4ms
18 timing config:load Completed in 51ms
19 timing npm:load:configload Completed in 51ms
20 timing npm:load:mkdirpcache Completed in 4ms
21 timing npm:load:mkdirplogs Completed in 1ms
22 verbose title npm run start:prod
23 verbose argv "run" "start:prod"
24 timing npm:load:setTitle Completed in 4ms
25 timing config:load:flatten Completed in 7ms
26 timing npm:load:display Completed in 9ms
27 verbose logfile logs-max:10 dir:/home/node/.npm/_logs
28 verbose logfile /home/node/.npm/_logs/2023-01-04T11_25_31_093Z-debug-0.log
29 timing npm:load:logFile Completed in 21ms
30 timing npm:load:timers Completed in 0ms
31 timing npm:load:configScope Completed in 0ms
32 timing npm:load Completed in 96ms
33 silly logfile done cleaning log files
34 http fetch GET 200 https://registry.npmjs.org/npm 1028ms (cache miss)
35 timing command:run Completed in 521991ms
36 notice
36 notice New major version of npm available! 8.19.3 -> 9.2.0
36 notice Changelog: <https://github.com/npm/cli/releases/tag/v9.2.0>
36 notice Run `npm install -g [email protected]` to update!
36 notice
37 verbose stack Error: command failed
37 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/@npmcli/promise-spawn/lib/index.js:63:27)
37 verbose stack     at ChildProcess.emit (node:events:513:28)
37 verbose stack     at maybeClose (node:internal/child_process:1100:16)
37 verbose stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:304:5)
38 verbose pkgid [email protected]
39 verbose cwd /app
40 verbose Linux 5.15.79.1-microsoft-standard-WSL2
41 verbose node v16.19.0
42 verbose npm  v8.19.3
43 error path /app
44 error command failed
45 error signal SIGTERM
46 error command sh -c -- node dist/main
47 verbose exit 1
48 timing npm Completed in 522118ms
49 verbose code 1
50 error A complete log of this run can be found in:
50 error     /home/node/.npm/_logs/2023-01-04T11_25_31_093Z-debug-0.log
/app/dist $

Fallback for excalidraw.com/collab-server using fork

Hi!

I've done a fork of https://github.com/alswl/excalidraw to be able to adjust to a custom logo at start page but when I use the fork for excalidraw-frontend the collaboration feature is not working and is pointing to https://portal.excalidraw.com/collab-server. Somehow overriding the value set in "VITE_APP_WS_SERVER_URL".

Are there additional configuration that I've missed?

Hello, may I ask what I should do after the deployment like modifying the style of the front-end page?

大佬可以帮忙上传到dockhub吗？

excalidraw可以升级到官方的新版本吗

首先感谢大佬 @alswl
我用你的代码已经成功部署了excalidraw-collaboration，并且完美支持协作功能，由于不懂开发，希望大佬可以更新一下excalidraw或者提供一下升级思路，非常感谢！！

help setting up external acess with https

I'm trying to setup an colab server with external access, but I'm feeling lost rn hehehe
Saw all issues, but none of them helped me (っ˘̩╭╮˘̩)っ

I'm facing two errors in the browser console:

1: Could not connect to websocket
2: Could not find API path (maybe bc of the ws? or ws not working bc api? idk)

I don't understand why the API is not working, even without my domain. Shouldn't I see something in the browser when I explore, for example: ip:port/api/v2 ?

Anyway, my current setup is as follows:

docker-compose (pls see the # coments):

services:
  frontend:
    image: excalidraw:v0.1.0-b35a2c3-dirty
    ports:
      - 4321:80

  storage:
    image: excalidraw-storage-backend:v0.1.0-b35a2c3-dirty
    restart: always
    environment:
      - PORT=8081 # this should be the same port? I didn't understand that option, mainly because on https://github.com/alswl/excalidraw-storage-backend/tree/e3219306d1ef8db6981e4918d73a3c957c025340#environement-variables it says that the default port is 8080 but in the example you showed the same
      - STORAGE_URI=mysql://user:pass@@10.0.0.217:3306/excalidraw # working just fine (user/pass censored)
    ports:
      - 8081:8081 # when i access ip:8081/api/v2 I see 404 not found

  room:
    image: excalidraw-room:v0.1.0-b35a2c3-dirty
    ports:
      - 8082:80 # when i access ip:8082 I see a small text saying the colab server is running (✿◠‿◠)

So, I got nginx set to port 4321. Like https://excalidraw.mydomain.com.br. It works fine.
nginx set to port 8081 also. Like https://excalidrawbd.mydomain.com.br. The api path does not work either.
And I got nginx set to port 8082. Like https://excalidrawws.mydomain.com.br. It works fine.

.env (pls see the # coments):

REACT_APP_BACKEND_V2_GET_URL=https://test.com/api/v2/
REACT_APP_BACKEND_V2_POST_URL=https://test.com/api/v2/post/

REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries

REACT_APP_HTTP_STORAGE_BACKEND_URL=excalidrawbd.mydomain.com.br/api/v2 # dummy domain (censored mine)
REACT_APP_STORAGE_BACKEND=http

REACT_APP_PORTAL_URL= #should I set something here? IDK if the comments belo are for REACT_APP_WS_SERVER_URL or for REACT_APP_PORTAL_URL
# Fill to set socket server URL used for collaboration.
# Meant for forks only: excalidraw.com uses custom REACT_APP_PORTAL_URL flow
REACT_APP_WS_SERVER_URL=https://excalidrawws.mydomain.com.br. # tried also to put nginx domain like https://excalidraw.mydomain.com.br and ip:8082. Same results.

REACT_APP_FIREBASE_CONFIG='{}'

# production-only vars
REACT_APP_GOOGLE_ANALYTICS_ID=foo

REACT_APP_PLUS_APP=https://app.excalidraw.com

I saw you mentioning port 443 here: #5 (comment) and I think I have the same problem, but have no ideia how to solve it. My nginx config already have the 443:443 configuration. Already joined the 3 containers on nginx network and... stil nothing.

The browser error:

pls help (╥_╥)

Instruction doesn't work as expected

s@vpsmtovsf7:~/draw/server/3$ git clone --recursive [email protected]:alswl/excalidraw-collaboration.git
Cloning into 'excalidraw-collaboration'...
remote: Enumerating objects: 60, done.
remote: Counting objects: 100% (60/60), done.
remote: Compressing objects: 100% (32/32), done.
remote: Total 60 (delta 29), reused 46 (delta 20), pack-reused 0
Receiving objects: 100% (60/60), 252.03 KiB | 886.00 KiB/s, done.
Resolving deltas: 100% (29/29), done.
Submodule 'excalidraw' (https://github.com/alswl/excalidraw.git) registered for path 'excalidraw'
Submodule 'excalidraw-room' (https://github.com/excalidraw/excalidraw-room.git) registered for path 'excalidraw-room'
Submodule 'excalidraw-storage-backend' (https://github.com/alswl/excalidraw-storage-backend.git) registered for path 'excalidraw-storage-backend'
Cloning into '/home/s/draw/server/3/excalidraw-collaboration/excalidraw'...
remote: Enumerating objects: 24231, done.        
remote: Total 24231 (delta 0), reused 0 (delta 0), pack-reused 24231        
Receiving objects: 100% (24231/24231), 33.46 MiB | 10.44 MiB/s, done.
Resolving deltas: 100% (19225/19225), done.
Cloning into '/home/s/draw/server/3/excalidraw-collaboration/excalidraw-room'...
remote: Enumerating objects: 606, done.        
remote: Counting objects: 100% (169/169), done.        
remote: Compressing objects: 100% (59/59), done.        
remote: Total 606 (delta 145), reused 110 (delta 110), pack-reused 437        
Receiving objects: 100% (606/606), 501.97 KiB | 3.10 MiB/s, done.
Resolving deltas: 100% (354/354), done.
Cloning into '/home/s/draw/server/3/excalidraw-collaboration/excalidraw-storage-backend'...
remote: Enumerating objects: 166, done.        
remote: Counting objects: 100% (166/166), done.        
remote: Compressing objects: 100% (75/75), done.        
remote: Total 166 (delta 93), reused 159 (delta 87), pack-reused 0        
Receiving objects: 100% (166/166), 268.78 KiB | 1.88 MiB/s, done.
Resolving deltas: 100% (93/93), done.
Submodule path 'excalidraw': checked out '015bdb1c0a2787c6d9544b9cbd66d9c92443431b'
Submodule path 'excalidraw-room': checked out 'c0bf0ba76c270920427554e8a61511da666bcd5a'
Submodule path 'excalidraw-storage-backend': checked out '2e1412b67177d40385fce360d16d211b2dba3432'
s@vpsmtovsf7:~/draw/server/3$ cd excalidraw-collaboration
s@vpsmtovsf7:~/draw/server/3/excalidraw-collaboration$ git config submodule.excalidraw.ignore all # ignore submodule changes, we will patch them
s@vpsmtovsf7:~/draw/server/3/excalidraw-collaboration$ make patch images
# you can edit excalidraw.env.production to change endpoints
cp excalidraw.env.production excalidraw/.env.production
cp excalidraw.dockerignore excalidraw/.dockerignore
Sending build context to Docker daemon  6.243MB
Step 1/10 : FROM node:14-alpine AS build
 ---> 399cc5685cda
Step 2/10 : WORKDIR /opt/node_app
 ---> Using cache
 ---> 4bf8a9a6755e
Step 3/10 : COPY package.json yarn.lock ./
 ---> Using cache
 ---> 624d68f828cb
Step 4/10 : RUN yarn --ignore-optional
 ---> Using cache
 ---> a3cd7d1346fe
Step 5/10 : ARG NODE_ENV=production
 ---> Using cache
 ---> d4b739c7e5f8
Step 6/10 : COPY . .
 ---> Using cache
 ---> 7196b4aa88aa
Step 7/10 : RUN yarn build:app:docker
 ---> Using cache
 ---> c2b18553843a
Step 8/10 : FROM nginx:1.21-alpine
 ---> b1c3acb28882
Step 9/10 : COPY --from=build /opt/node_app/build /usr/share/nginx/html
 ---> Using cache
 ---> 42fa37aa318e
Step 10/10 : HEALTHCHECK CMD wget -q -O /dev/null http://localhost || exit 1
 ---> Using cache
 ---> a0094c3c56d7
[Warning] One or more build-args [COMMIT] were not consumed
Successfully built a0094c3c56d7
Successfully tagged excalidraw:v0.1.0-bfea939
Sending build context to Docker daemon    298kB
Step 1/9 : FROM node:12-alpine
 ---> bb6d28039b8c
Step 2/9 : WORKDIR /excalidraw-room
 ---> Using cache
 ---> fca46fdfe4ca
Step 3/9 : COPY package.json yarn.lock ./
 ---> Using cache
 ---> 988dfff08dd3
Step 4/9 : RUN yarn
 ---> Using cache
 ---> 7f7012790621
Step 5/9 : COPY tsconfig.json ./
 ---> Using cache
 ---> b6fd43ecb323
Step 6/9 : COPY src ./src
 ---> Using cache
 ---> 61c62507e3aa
Step 7/9 : RUN yarn build
 ---> Using cache
 ---> d1a9e2c4f8f7
Step 8/9 : EXPOSE 80
 ---> Using cache
 ---> 4e304c097c67
Step 9/9 : CMD ["yarn", "start"]
 ---> Using cache
 ---> 7c265e615fa1
[Warning] One or more build-args [COMMIT] were not consumed
Successfully built 7c265e615fa1
Successfully tagged excalidraw-room:v0.1.0-bfea939
Sending build context to Docker daemon  822.3kB
Step 1/18 : FROM node:16-alpine as builder
 ---> 0e1140518c5f
Step 2/18 : RUN npm install -g eslint
 ---> Using cache
 ---> ecd023a40a30
Step 3/18 : RUN npm install -g @nestjs/cli
 ---> Using cache
 ---> fbea00dd858e
Step 4/18 : WORKDIR /app
 ---> Using cache
 ---> 3f4836844c54
Step 5/18 : COPY package.json .
 ---> Using cache
 ---> ad37411e5b9b
Step 6/18 : COPY package-lock.json .
 ---> Using cache
 ---> 872872da5411
Step 7/18 : RUN npm install
 ---> Using cache
 ---> b2d8b46f8a3a
Step 8/18 : COPY . .
 ---> Using cache
 ---> e300af7d11c3
Step 9/18 : RUN npm ci --prod
 ---> Using cache
 ---> c44647d1f96b
Step 10/18 : RUN npx nest build
 ---> Using cache
 ---> b6eaa1dcc9d4
Step 11/18 : FROM node:16-alpine
 ---> 0e1140518c5f
Step 12/18 : WORKDIR /app
 ---> Using cache
 ---> 1a97d84f2ba3
Step 13/18 : COPY --from=builder /app/package.json /app/package.json
 ---> Using cache
 ---> b1b703c79454
Step 14/18 : COPY --from=builder /app/dist /app/dist
 ---> Using cache
 ---> 57152dc71d27
Step 15/18 : COPY --from=builder /app/node_modules /app/node_modules
 ---> Using cache
 ---> 3b9a4abdbc54
Step 16/18 : USER node
 ---> Using cache
 ---> fda90e1f5075
Step 17/18 : EXPOSE 8080
 ---> Using cache
 ---> 756bf888ea91
Step 18/18 : ENTRYPOINT ["npm", "run", "start:prod"]
 ---> Using cache
 ---> 8ed20db198de
[Warning] One or more build-args [COMMIT] were not consumed
Successfully built 8ed20db198de
Successfully tagged excalidraw-storage-backend:v0.1.0-bfea939
s@vpsmtovsf7:~/draw/server/3/excalidraw-collaboration$ git commit -a -m 'feat: new image'
On branch master
Your branch is up to date with 'origin/master'.

nothing to commit, working tree clean
s@vpsmtovsf7:~/draw/server/3/excalidraw-collaboration$ make bump-version
echo v0.1.0-bfea939 > ./VERSION
PLEASE using 'git commit -a' to commit image version changes
s@vpsmtovsf7:~/draw/server/3/excalidraw-collaboration$ docker-compose up
ERROR: The Compose file './docker-compose.yaml' is invalid because:
Unsupported config option for services: 'storage'
s@vpsmtovsf7:~/draw/server/3/excalidraw-collaboration$

"Lock file" error on "Step 10/19" on `make patch images`

Hi.

After running make patch images, on "Step 10/19", an error appears:

Step 10/19 : RUN npm ci --prod
 ---> Running in 950bdcb000bc
npm WARN config production Use `--omit=dev` instead.
npm ERR! code EUSAGE
npm ERR! 
npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
npm ERR! 
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Missing: @mapbox/[email protected] from lock file
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: @npmcli/[email protected] from lock file
npm ERR! Missing: @npmcli/[email protected] from lock file
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: @gar/[email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Missing: [email protected] from lock file
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! 
npm ERR! Clean install a project
npm ERR! 
npm ERR! Usage:
npm ERR! npm ci
npm ERR! 
npm ERR! Options:
npm ERR! [-S|--save|--no-save|--save-prod|--save-dev|--save-optional|--save-peer|--save-bundle]
npm ERR! [-E|--save-exact] [-g|--global] [--global-style] [--legacy-bundling]
npm ERR! [--omit <dev|optional|peer> [--omit <dev|optional|peer> ...]]
npm ERR! [--strict-peer-deps] [--no-package-lock] [--foreground-scripts]
npm ERR! [--ignore-scripts] [--no-audit] [--no-bin-links] [--no-fund] [--dry-run]
npm ERR! [-w|--workspace <workspace-name> [-w|--workspace <workspace-name> ...]]
npm ERR! [-ws|--workspaces] [--include-workspace-root] [--install-links]
npm ERR! 
npm ERR! aliases: clean-install, ic, install-clean, isntall-clean
npm ERR! 
npm ERR! Run "npm help ci" for more info

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2023-07-27T21_27_03_382Z-debug-0.log
The command '/bin/sh -c npm ci --prod' returned a non-zero code: 1

More of the output

# you can edit excalidraw.env.production to change endpoints
cp excalidraw.env.production excalidraw/.env.production
cp excalidraw.dockerignore excalidraw/.dockerignore
Sending build context to Docker daemon    6.9MB
Step 1/10 : FROM node:14-alpine AS build
 ---> 0dac3dc27b1a
Step 2/10 : WORKDIR /opt/node_app
 ---> Using cache
 ---> 25b5736578cd
Step 3/10 : COPY package.json yarn.lock ./
 ---> Using cache
 ---> 4b552c2173c8
Step 4/10 : RUN yarn --ignore-optional --network-timeout 600000
 ---> Using cache
 ---> 229c9e84bb97
Step 5/10 : ARG NODE_ENV=production
 ---> Using cache
 ---> 6888937c6459
Step 6/10 : COPY . .
 ---> Using cache
 ---> 2b48cefe3a5e
Step 7/10 : RUN yarn build:app:docker
 ---> Using cache
 ---> 9e6b5d2a64e4
Step 8/10 : FROM nginx:1.21-alpine
 ---> b1c3acb28882
Step 9/10 : COPY --from=build /opt/node_app/build /usr/share/nginx/html
 ---> Using cache
 ---> 7fbdc91daeb1
Step 10/10 : HEALTHCHECK CMD wget -q -O /dev/null http://localhost || exit 1
 ---> Using cache
 ---> e2322dc297d6
[Warning] One or more build-args [COMMIT] were not consumed
Successfully built e2322dc297d6
Successfully tagged excalidraw:v0.1.0-6c3da92
Sending build context to Docker daemon    298kB
Step 1/9 : FROM node:12-alpine
 ---> bb6d28039b8c
Step 2/9 : WORKDIR /excalidraw-room
 ---> Using cache
 ---> 32e137a17b7c
Step 3/9 : COPY package.json yarn.lock ./
 ---> Using cache
 ---> 11aad932c141
Step 4/9 : RUN yarn
 ---> Using cache
 ---> 27c3841c4608
Step 5/9 : COPY tsconfig.json ./
 ---> Using cache
 ---> 9497a88b95bb
Step 6/9 : COPY src ./src
 ---> Using cache
 ---> dc51d8e9565d
Step 7/9 : RUN yarn build
 ---> Using cache
 ---> 460c002d1b5a
Step 8/9 : EXPOSE 80
 ---> Using cache
 ---> 426ec4a215fe
Step 9/9 : CMD ["yarn", "start"]
 ---> Using cache
 ---> 4aa3c3d44036
[Warning] One or more build-args [COMMIT] were not consumed
Successfully built 4aa3c3d44036
Successfully tagged excalidraw-room:v0.1.0-6c3da92
Sending build context to Docker daemon  822.3kB
Step 1/19 : FROM node:16-alpine as builder
 ---> d22e42cbfdbb
Step 2/19 : RUN apk add --update python3 make g++
 ---> Using cache
 ---> 5f1f7db154b3
Step 3/19 : RUN npm install -g eslint
 ---> Using cache
 ---> 6ca5fe7af870
Step 4/19 : RUN npm install -g @nestjs/cli
 ---> Using cache
 ---> fb9ec2c7bb45
Step 5/19 : WORKDIR /app
 ---> Using cache
 ---> 5258004fa2a5
Step 6/19 : COPY package.json .
 ---> Using cache
 ---> d987d0c6c618
Step 7/19 : COPY package-lock.json .
 ---> Using cache
 ---> b562279862ee
Step 8/19 : RUN npm install
 ---> Using cache
 ---> 0d81d5692ac7
Step 9/19 : COPY . .
 ---> Using cache
 ---> 5a7e4ead41b3
Step 10/19 : RUN npm ci --prod
 ---> Running in 950bdcb000bc
npm WARN config production Use `--omit=dev` instead.
npm ERR! code EUSAGE
npm ERR! 
npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
npm ERR! 
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Missing: @mapbox/[email protected] from lock file
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: @npmcli/[email protected] from lock file
npm ERR! Missing: @npmcli/[email protected] from lock file
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: @gar/[email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Missing: [email protected] from lock file
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! 
npm ERR! Clean install a project
npm ERR! 
npm ERR! Usage:
npm ERR! npm ci
npm ERR! 
npm ERR! Options:
npm ERR! [-S|--save|--no-save|--save-prod|--save-dev|--save-optional|--save-peer|--save-bundle]
npm ERR! [-E|--save-exact] [-g|--global] [--global-style] [--legacy-bundling]
npm ERR! [--omit <dev|optional|peer> [--omit <dev|optional|peer> ...]]
npm ERR! [--strict-peer-deps] [--no-package-lock] [--foreground-scripts]
npm ERR! [--ignore-scripts] [--no-audit] [--no-bin-links] [--no-fund] [--dry-run]
npm ERR! [-w|--workspace <workspace-name> [-w|--workspace <workspace-name> ...]]
npm ERR! [-ws|--workspaces] [--include-workspace-root] [--install-links]
npm ERR! 
npm ERR! aliases: clean-install, ic, install-clean, isntall-clean
npm ERR! 
npm ERR! Run "npm help ci" for more info

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2023-07-27T21_27_03_382Z-debug-0.log
The command '/bin/sh -c npm ci --prod' returned a non-zero code: 1

It's Ubuntu 22.04 and Docker 20.10.21.

What could I try doing to resolve the issue?

Help with Build Instructions

Hello this looks nice thanks for your efforts!

I'm getting this error. Not sure if I'm missing some dependencies that are needed to run this?

make patch images
# you can edit excalidraw.env.production to change endpoints
cp excalidraw.env.production excalidraw/.env.production
cp excalidraw.dockerignore excalidraw/.dockerignore
#1 [internal] load build definition from Dockerfile
#1 transferring dockerfile: 2B done
#1 DONE 0.0s

#2 [internal] load .dockerignore
#2 transferring context: 157B done
#2 DONE 0.0s
ERROR: failed to solve: failed to read dockerfile: open /var/lib/docker/tmp/buildkit-mount3991967487/Dockerfile: no such file or directory
#1 [internal] load build definition from Dockerfile
#1 transferring dockerfile: 2B done
#1 DONE 0.0s

#2 [internal] load .dockerignore
#2 transferring context: 2B done
#2 DONE 0.0s
ERROR: failed to solve: failed to read dockerfile: open /var/lib/docker/tmp/buildkit-mount1692067687/Dockerfile: no such file or directory
#1 [internal] load build definition from Dockerfile
#1 transferring dockerfile: 2B done
#1 DONE 0.0s

#2 [internal] load .dockerignore
#2 transferring context: 2B done
#2 DONE 0.0s
ERROR: failed to solve: failed to read dockerfile: open /var/lib/docker/tmp/buildkit-mount250717985/Dockerfile: no such file or directory
make: *** [Makefile:65: images] Error 1

git recursive pulling failed, Permission denied (publickey)

Title said the observation.

Docker compose up does not work out of the box

Running docker compose up end up with complain on master:

Error response from daemon: pull access denied for excalidraw, repository does not exist or may require 'docker login': denied: requested access to the resource is denied

Respectively, the patch complains on remote absence make patch images:

unable to prepare context: unable to evaluate symlinks in Dockerfile path: lstat /home/matbgn/Dev/excalidraw-collaboration/excalidraw/Dockerfile: no such file or directory
unable to prepare context: unable to evaluate symlinks in Dockerfile path: lstat /home/matbgn/Dev/excalidraw-collaboration/excalidraw-room/Dockerfile: no such file or directory
unable to prepare context: unable to evaluate symlinks in Dockerfile path: lstat /home/matbgn/Dev/excalidraw-collaboration/excalidraw-storage-backend/Dockerfile: no such file or directory
make: *** [Makefile:65: images] Error 1

Sharing and storing in DB doesn't work.

Hi,

does not work when using haproxy and trusted SSL certificates (all three components configured with HTTPS).

Do you have any working example of docker-compose.yaml and .env for public internet domains ?

privileges missing?

Just tried to install via the README steps.

I execute the following and get what looks like repository access permission errors?

$ sudo git clone --recursive [email protected]:alswl/excalidraw-collaboration.git
Cloning into 'excalidraw-collaboration'...
[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

got any idea's whats going on.

thanks
brian

Excalidraw image update

Hello!

Thanks for your great work! Do you have any plans for updating the Excalidraw version?

We saw that there are more support added for pen erasing: excalidraw/excalidraw#7496

There seems to be a problem with the collaboration function

support for kubernetes

Has anyone tried this setup on kubernetes? I think it would be much easier if there was kubernetes support.

make patch images时出错？如何解决？谢谢

#14 [builder 9/10] RUN npm ci --prod
#14 0.942 npm WARN config production Use `--omit=dev` instead.
#14 2.542 npm ERR! code EINVAL
#14 2.544 npm ERR! syscall rmdir
#14 2.545 npm ERR! path /app/node_modules/.bin
#14 2.548 npm ERR! errno -22
#14 2.550 npm ERR! EINVAL: invalid argument, rmdir '/app/node_modules/.bin'
#14 2.553
#14 2.553 npm ERR! A complete log of this run can be found in:
#14 2.554 npm ERR! /root/.npm/_logs/2023-02-08T12_37_38_527Z-debug-0.log
#14 ERROR: process "/bin/sh -c npm ci --prod" did not complete successfully: exit code: 234

[builder 9/10] RUN npm ci --prod:
#14 0.942 npm WARN config production Use --omit=dev instead.
#14 2.542 npm ERR! code EINVAL
#14 2.544 npm ERR! syscall rmdir
#14 2.545 npm ERR! path /app/node_modules/.bin
#14 2.548 npm ERR! errno -22
#14 2.550 npm ERR! EINVAL: invalid argument, rmdir '/app/node_modules/.bin'
#14 2.553
#14 2.553 npm ERR! A complete log of this run can be found in:
#14 2.554 npm ERR! /root/.npm/_logs/2023-02-08T12_37_38_527Z-debug-0.log

Dockerfile:13

11 |
12 | COPY . .
13 | >>> RUN npm ci --prod
14 | RUN npx nest build
15 |

ERROR: failed to solve: process "/bin/sh -c npm ci --prod" did not complete successfully: exit code: 234
make: *** [Makefile:65: images] Error 1

issue with collaboration

layering doesn't always work
add three elements one on top of the other
right click on the top one and send to back
this doesnt update the view and doesnt always sends the element to the back

room function not working

I followed the " Build and Run step ", bet I can't use the room function.

The browser console show this

console

javascript source

encryption.ts:16 
        
       Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'generateKey')
    at encryption.ts:16:42
    at f (regeneratorRuntime.js:44:17)
    at Generator.<anonymous> (regeneratorRuntime.js:125:22)
    at Generator.next (regeneratorRuntime.js:69:21)
    at r (asyncToGenerator.js:3:20)
    at l (asyncToGenerator.js:22:9)
    at asyncToGenerator.js:27:7
    at new Promise (<anonymous>)
    at asyncToGenerator.js:19:12
    at encryption.ts:11:35

my excalidraw.env.production

REACT_APP_BACKEND_V2_GET_URL=https://test.com/api/v2/
REACT_APP_BACKEND_V2_POST_URL=https://test.com/api/v2/post/

REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries

REACT_APP_HTTP_STORAGE_BACKEND_URL=http://192.168.100.77:5081/api/v2
REACT_APP_STORAGE_BACKEND=http

REACT_APP_PORTAL_URL=
# Fill to set socket server URL used for collaboration.
# Meant for forks only: excalidraw.com uses custom REACT_APP_PORTAL_URL flow
REACT_APP_WS_SERVER_URL=http://192.168.100.77:5082

REACT_APP_FIREBASE_CONFIG='{}'

# production-only vars
REACT_APP_GOOGLE_ANALYTICS_ID=foo

REACT_APP_PLUS_APP=https://app.excalidraw.com

Whether exists any docker image with room function I can use it directly?

无法保存到后端数据库。如果问题持续存在，您应该保存文件到本地，以确保您的工作不会丢失。

这是我的docker-compose.yaml
version: "3.8"

services:
frontend:
image: alswl/excalidraw:v0.17.0-fork-b2
environment:
- VITE_APP_BACKEND_V2_GET_URL=https://test.com/api/v2/
- VITE_APP_BACKEND_V2_POST_URL=https://test.com/api/v2/post/
- VITE_APP_WS_SERVER_URL=http://huatu.iris-sci.cn:8082
- VITE_APP_FIREBASE_CONFIG={}
- VITE_APP_HTTP_STORAGE_BACKEND_URL=http://huatu.iris-sci.cn:8081/api/v2
- VITE_APP_STORAGE_BACKEND=http
ports:
- 8085:80

storage:
image: alswl/excalidraw-storage-backend:v2023.11.11
restart: always
environment:
- PORT=8081
- STORAGE_URI=redis://redis:6379
ports:
- 8081:8081

room:
image: excalidraw/excalidraw-room:sha-49bf529
ports:
- 8082:80

redis:
image: redis
ports:
- "6378:6379"
volumes:
- ./redis_data/data:/data

FirebaseError: "projectId" not provided in firebase.initializeApp.

# sample comes from https://github.com/docker/awesome-compose
# https://github.com/alswl/excalidraw-collaboration/tree/master
#
version: "3"
services:
  frontend:
    image: alswl/excalidraw:v0.17.3-fork-b1
    environment:
      - VITE_APP_BACKEND_V2_GET_URL=https://whiteboard1.test.com/api/v2/scenes/
      - VITE_APP_BACKEND_V2_POST_URL=https://whiteboard1.test.com/api/v2/scenes/
      - VITE_APP_WS_SERVER_URL=https://whiteboard2.test.com
      - VITE_APP_FIREBASE_CONFIG={}
      # alswl'fork env
      # forked excalidraw can use env https://github.com/alswl/excalidraw/pull/5
      - VITE_APP_HTTP_STORAGE_BACKEND_URL=https://whiteboard1.test.com/api/v2
      - VITE_APP_STORAGE_BACKEND=https
    ports:
      - 3010:80

  storage:
    image: alswl/excalidraw-storage-backend:v2023.11.11
    restart: always
    environment: # docs https://github.com/alswl/excalidraw-storage-backend#environement-variables
      - PORT=8081
    ports:
      - 3011:8081

  room:
    image: excalidraw/excalidraw-room:sha-49bf529
    ports:
      - 3012:80

对应的 npm 的映射我也做好了，但是当我点击协作的时候就会出现上图所示的错误

数据存储

好像redis数据库中存的是base64格式的数据，那后端服务器上有什么地方存着这种截图中的数据吗，或者base64可以解析出这种类型的数据吗。

License is missing

Hi.

The license seems missing. Could You provide it? Right now it's not clear for me if there are any usage limitations.

Thank You for developing and sharing this by the way!

URL to open a local file? or export a preview?

This is amazing!

Is there a way to construct a url or http request to open a file at a known path? e.g. 127.0.0.1/Untitled-2023-02-18-0800.excalidraw that opens this file in the browser?

I am able to open from the excalidraw window, but since I know where it is, I would like to be able to just open the file.

It would also be very helpful to be able to generate a request/url that generates an svg preview.

内网部署主页未成功加载

大佬好，我在内网环境用成功运行容器后，使用chrome浏览器访问主页，发现是一片空白，没有加载出来。f12看了一下network，有一个lastest.js文件需要联网请求，Request URL是https://www.scripts.simpleanalyticscdn/latest.js，请问有没有什么办法让整个项目完全离线运行到服务器上？期待您的回复！

Couldn't save to backend database, backend storage cant be accessed

I always get this Error in collab mode. This is my docker-compose which I deploy in Portainer

services:
  frontend:
    image: alswl/excalidraw:v0.17.0-fork-b1
    environment:
      - PORT=8081
      - VITE_APP_BACKEND_V2_GET_URL=https://test.com/api/v2/
      - VITE_APP_BACKEND_V2_POST_URL=https://test.com/api/v2/post/
      - VITE_APP_WS_SERVER_URL=http://127.0.0.1:8082
      - VITE_APP_FIREBASE_CONFIG={}
      # alswl'fork env
      # forked excalidraw can use env https://github.com/alswl/excalidraw/pull/5
      - VITE_APP_HTTP_STORAGE_BACKEND_URL=http://127.0.0.1:8081/api/v2
      - VITE_APP_STORAGE_BACKEND=http
    ports:
      - 18912:80
    networks:
     - excalidraw

  storage:
    image: alswl/excalidraw-storage-backend:v2023.11.11
    restart: always
    environment: # docs https://github.com/alswl/excalidraw-storage-backend#environement-variables
      - PORT=8081
    ports:
      - 8081:8081
    networks:
     - excalidraw

  room:
    image: excalidraw/excalidraw-room:sha-49bf529
    ports:
     - 8082:80
    networks:
     - excalidraw

networks:
 excalidraw:
  name: excalidraw
  external: true

When I check the log for StorageBackend there is a warning

WARN [StorageService] STORAGE_URI is undefined, will use non persistant in memory storage

I tried serveral things to integrate the STORAGE_URI into the docker-compose but it's not working. Here someone had the same issue and he has redis in his docker-compose. I tried this but it's not working for me or I did something wrong.

Any idea how I can solve this?

Collaboration Features Not Working

Trying to get this to work on an Ubuntu 20.04 EC2 instance. I have a subdomain I'd like to use.

docker-compose.yaml

services:
  frontend:
    image: excalidraw:v0.1.0-b35a2c3-dirty
    ports:
      - 80:80

  storage:
    image: excalidraw-storage-backend:v0.1.0-b35a2c3-dirty
    restart: always
    environment: # docs https://github.com/alswl/excalidraw-storage-backend#environement-variables
      - PORT=8081
    ports:
      - 8081:8081

  room:
    image: excalidraw-room:v0.1.0-b35a2c3-dirty
    ports:
      - 8082:80

excalidraw.env.production

REACT_APP_BACKEND_V2_GET_URL=https://0.0.0.0/api/v2/
REACT_APP_BACKEND_V2_POST_URL=https://0.0.0.0/api/v2/po>

REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidra>

REACT_APP_HTTP_STORAGE_BACKEND_URL=http://0.0.0.0:8081/>
REACT_APP_STORAGE_BACKEND=http

REACT_APP_PORTAL_URL=                           
# Fill to set socket server URL used for collaboration.
# Meant for forks only: excalidraw.com uses custom REAC>
REACT_APP_WS_SERVER_URL=http://0.0.0.0:8082

REACT_APP_FIREBASE_CONFIG='{}'

# production-only vars
REACT_APP_GOOGLE_ANALYTICS_ID=foo

REACT_APP_PLUS_APP=https://app.excalidraw.com

Here's my output:

$ sudo docker compose up
[+] Running 3/0
 ✔ Container excalidraw-collaboration-frontend-1  Created0.0s 
 ✔ Container excalidraw-collaboration-room-1      Running0.0s 
 ✔ Container excalidraw-collaboration-storage-1   Running0.0s 
Attaching to excalidraw-collaboration-frontend-1, excalidraw-collaboration-room-1, excalidraw-collaboration-storage-1
excalidraw-collaboration-frontend-1  | /docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
excalidraw-collaboration-frontend-1  | /docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
excalidraw-collaboration-frontend-1  | /docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
excalidraw-collaboration-frontend-1  | 10-listen-on-ipv6-by-default.sh: info: IPv6 listen already enabled
excalidraw-collaboration-frontend-1  | /docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
excalidraw-collaboration-frontend-1  | /docker-entrypoint.sh: Launching /docker-entrypoint.d/30-tune-worker-processes.sh
excalidraw-collaboration-frontend-1  | /docker-entrypoint.sh: Configuration complete; ready for start up
excalidraw-collaboration-frontend-1  | 2023/09/03 11:43:29 [notice] 1#1: using the "epoll" event method
excalidraw-collaboration-frontend-1  | 2023/09/03 11:43:29 [notice] 1#1: nginx/1.21.6
excalidraw-collaboration-frontend-1  | 2023/09/03 11:43:29 [notice] 1#1: built by gcc 10.3.1 20211027 (Alpine 10.3.1_git20211027) 
excalidraw-collaboration-frontend-1  | 2023/09/03 11:43:29 [notice] 1#1: OS: Linux 5.15.0-1043-aws
excalidraw-collaboration-frontend-1  | 2023/09/03 11:43:29 [notice] 1#1: getrlimit(RLIMIT_NOFILE): 1048576:1048576
excalidraw-collaboration-frontend-1  | 2023/09/03 11:43:29 [notice] 1#1: start worker processes
excalidraw-collaboration-frontend-1  | 2023/09/03 11:43:29 [notice] 1#1: start worker process 25
excalidraw-collaboration-frontend-1  | 2023/09/03 11:43:29 [notice] 1#1: start worker process 26
excalidraw-collaboration-frontend-1  | 127.0.0.1 - - [03/Sep/2023:11:43:59 +0000] "GET / HTTP/1.1" 200 3751 "-" "Wget" "-"

服务器部署SSL

请问在线协作的数据可以持久化吗？

请问在线协作的数据可以持久化吗？
我想将在线协作的数据挂载出来备份

405 (Method Not Allowed)

Hi and thank you for your amazing work, really! Excalidraw is beautiful, but at the same time when it's coming to self-host it's a mess and your work is incredibly valuable in that sense.

After reading up all across the issues, I came to a partially working state. Everything is accessible online behind a Caddy reverse proxy on TLS certificated, the collaborative part is fully functional and reactive, but the storage does not work. Everything else is (I mean vector drawings works unitl reload or image upload).

Any clue on this error?

       GET https://whiteboard.example.com/api/v2/rooms/cce8fbeb3e5a183484a5 404 (Not Found)
tq @ httpStorage.ts:66
(anonymous) @ Collab.tsx:242
await in (anonymous) (async)
Nq.zs.leading @ Collab.tsx:802
h @ index.js:160
S @ index.js:240
(anonymous) @ Collab.tsx:782
h @ index.tsx:566
componentDidUpdate @ App.tsx:2091
lw @ react-dom.production.min.js:261
O8 @ react-dom.production.min.js:260
OP @ react-dom.production.min.js:259
$P @ react-dom.production.min.js:283
fs @ react-dom.production.min.js:281
D8 @ react-dom.production.min.js:270
S @ scheduler.production.min.js:13
O @ scheduler.production.min.js:14
httpStorage.ts:248

Seems weird that GET, will not be recognized noop?

Here my Caddyfile

whiteboard.example.com {
	reverse_proxy 192.168.3.202:8880
}

whiteboard.example.com/api/v2 {
	reverse_proxy 192.168.3.202:8881
}

whiteboard.example.com/socket.io/ {
	reverse_proxy 192.168.3.202:8882
}

And here the compose.yaml

services:
  frontend:
    image: alswl/excalidraw:v0.17.0-fork-b2
    environment:
      - VITE_APP_BACKEND_V2_GET_URL=https://whiteboard.example.com/api/v2/
      - VITE_APP_BACKEND_V2_POST_URL=https://whiteboard.example.com/api/v2/post/
      - VITE_APP_WS_SERVER_URL=https://whiteboard.example.com
      - VITE_APP_FIREBASE_CONFIG={}
      - VITE_APP_HTTP_STORAGE_BACKEND_URL=https://whiteboard.example.com/api/v2
      - VITE_APP_STORAGE_BACKEND=http
    ports:
      - 8880:80
  storage:
    image: alswl/excalidraw-storage-backend:v2023.11.11
    restart: always
    environment:
      # docs https://github.com/alswl/excalidraw-storage-backend#environement-variables
      - PORT=8081
    ports:
      - 8881:8081
  room:
    image: excalidraw/excalidraw-room:sha-49bf529
    ports:
      - 8882:80
networks: {}

Using an unprivileged port/user

In order to run your solution on a secure infrastructure, we need a docker image using an unprivileged port/user.
In fact, I'm using my personal CI/CD to build the excalidraw image: https://github.com/thomas-illiet/docker-excalidraw-unprivileged

Are you planning to integrate this feature into your project ?

when i run "make patch images", how to solve?

无法保存到后端数据库。如果问题持续存在，您应该保存文件到本地，以确保您的工作不会丢失。

Getting 404 when create 'Shareable link' from the 'Save to' menu and resolved it with no idea why it resolved

Just to report an issue I had after setup external access with https [#22 #17 ] <-- These were great help, the collaboration feature works after re package the project (make images) based on the instructions ٩(ˊᗜˋ*)و✧

Problem: When I created 'Shareable link' in the 'Save to' menu, an error prompt: "Couldn't create share link".

My solution: I edited the excalidraw.env.production file
from this

REACT_APP_BACKEND_V2_GET_URL=https://test.com/api/v2/
REACT_APP_BACKEND_V2_POST_URL=https://test.com/api/v2/post/

to this

REACT_APP_BACKEND_V2_GET_URL=https://test.com/**api/v2/scenes/**
REACT_APP_BACKEND_V2_POST_URL=https://test.com/**api/v2/scenes/**

After repackage the project using 'make patch images' and 'make update-docker-compose-version', the 'Share Link' is working now. ✧✧

Why would I add the /scenes to the url? I was referring to this alswl/excalidraw-storage-backend. The BACKEND_V2_GET_URL and BACKEND_V2_POST_URL are:

BACKEND_V2_GET_URL: http://localhost:8080/api/v2/scenes/
BACKEND_V2_POST_URL: http://localhost:8080/api/v2/scenes/

The strangest part is that the /api/v2/post url was sticking there till I did the repackage project a few times in order to apply the changes to the excalidraw, I tried make patch image , make images .

Nevertheless, thanks for sharing this excalidraw-collaboration project with us, it really amazing and work like magic now~ ✧

unknown flag: --progress

excalidraw-collaboration/Makefile

Line 71 in c303948

--progress=plain \

DEPRECATED: The legacy builder is deprecated and will be removed in a future release.
            Install the buildx component to build images with BuildKit:
            https://docs.docker.com/go/buildx/

unknown flag: --progress
See 'docker build --help'.

I solved this problem by deleting the line

Couldn't save to backend database, backend storage cant be accessed.

I have managed to get collaboration room working, but I cant have backend storage up there, I got 404 error when trying to access the backend in browser.

I have read past issues and did all tricks but have no luck, I have reverse proxy of 3 ports (https:8006->http:8000, 8007->8001, 8008->8002) on my NAS to use https, still not working, I have noticed there is no redis container in my docker ps, could that be the problem?

Local LAN collaboration does require HTTPS setup

Hello, is the current setup suitable for local collaboration in the LAN network?

When running your setup I get an error due to unavailable window.crypto.subtle.generateKey
It looks like the collab feature should only be accessible via https...

updates

hi,

Will this get upstream upgrades? Like upgrades from upstream excalidraw

Problem with connecting with storage backend

Hi!
I'm recieving this error message when trying the collaboration feature and connecting to storage:

"Couldn't save to the backend database. If problems persist, you should save your file locally to ensure you don't lose your work."

When Accessing Storage Backend Url I get 404:
https://excalistorage-devspace.domain/api/v2

The Storage backend config is as follows:

- name: VITE_APP_HTTP_STORAGE_BACKEND_URL
  value: https://excalistorage-devspace.domain/api/v2     
- name: VITE_APP_STORAGE_BACKEND              
 value: https://excalistorage-devspace.domain/api/v2

WebSocket connection to 'ws://127.0.0.1:8082/socket.io/

I am setting up Excalidraw with Docker so that it can be accessed externally through an Nginx Proxy Manager. Most of it works fine, but there must be some configuration file not included in the Docker Compose that redirects the client to the localhost 127.0.0.1

My Docker Compose:

My Nginx Proxy Manager configuration:

My webtool kit for the one who creates the room:

My webtool kit for the one who joins the room:

The main issue, as I see it, which I believe is causing the failure, is that when the client tries to join the room, it attempts to connect to the localhost 127.0.0.1 for some reason

iframe Excalidraw

I don't want to cause any inconvenience.
I wanted to integrate excalidraw in an existing php app but using an iframe doesn't seem to work, or at least collaboration is not working when excalidraw is in an iframe.
Do you know if that would be possible? Maybe you could give me some pointers.
Anyway, thanks in advance.

不能协作不能导出link

如题请问怎么修改呢？

配置如下；

还有 - STORAGE_URI=redis://172.16.99.45:6379这里为何写成- STORAGE_URI=redis://localhost:6379会提示ECONNREFUSED 127.0.0.1:6379 [StorageService] Connection Error

host bitest.ts.com 172.16.99.6 client
nginx

   server {
        listen       443 ssl;
        server_name  localhost;
        ssl_certificate      C:\Users\Administrator\Downloads\ui\web\chain.crt;
        ssl_certificate_key  C:\Users\Administrator\Downloads\ui\web\key.key;
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on; 
        location / {
            proxy_pass http://172.16.99.45/;
        }  
    }
        server {
        listen       8081 ssl;
        server_name  localhost;
        ssl_certificate      C:\Users\Administrator\Downloads\ui\web\chain.crt;
        ssl_certificate_key  C:\Users\Administrator\Downloads\ui\web\key.key;
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on; 
        location / {
            proxy_pass http://172.16.99.45:8081;
        }  
    }
        server {
        listen       8082 ssl;
        server_name  localhost;
        ssl_certificate      C:\Users\Administrator\Downloads\ui\web\chain.crt;
        ssl_certificate_key  C:\Users\Administrator\Downloads\ui\web\key.key;
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on; 
        location / {
            proxy_pass http://172.16.99.45:8082;
        }  
    }

serv 172.16.99.45
docker

docker-compose.yaml

sample comes from https://github.com/docker/awesome-compose

services:
frontend:
image: alswl/excalidraw:v0.17.0-fork-b1
environment:
- PORT=8081
- VITE_APP_BACKEND_V2_GET_URL=https://bitest.ts.com/api/v2/
- VITE_APP_BACKEND_V2_POST_URL=https://bitest.ts.com/api/v2/post/
- VITE_APP_WS_SERVER_URL=https://bitest.ts.com:8082
- VITE_APP_FIREBASE_CONFIG={}
# alswl'fork env
# forked excalidraw can use env alswl/excalidraw#5
- VITE_APP_HTTP_STORAGE_BACKEND_URL=https://bitest.ts.com:8081/api/v2
- VITE_APP_STORAGE_BACKEND=http
ports:
- 80:80

storage:
image: alswl/excalidraw-storage-backend:v2023.11.11
restart: always
environment: # docs https://github.com/alswl/excalidraw-storage-backend#environement-variables
- STORAGE_URI=redis://172.16.99.45:6379
- PORT=8081
ports:
- 8081:8081

room:
image: excalidraw/excalidraw-room:sha-49bf529
ports:
- 8082:80
rediss1:
image: redis
ports:
- 6379:6379

Embedding YouTube in a collaborative session doesn't seem to work

I have managed to get things up and running behind Traefik 2.
I run the main application on excalidraw.mydomain.com, the storage backend is replying to excalidraw.mydomain.com/storagehandler/... (to quickly get around CORS I have Traefik enforcing) and the rooms are running on excalidrawrooms.mydomain.com, since that didn't seem to like being on a path under the main domain.

I can collaborate, paste images that are stored correctly to the storage backend and shown to the collaborators etc.

But if I take a YouTube URL and paste it I get a never ending flow of

If I'm not in a collaborative session this does not happen and the preview shows up fine.

alswl / excalidraw-collaboration Goto Github PK

excalidraw-collaboration's Introduction

excalidraw-collaboration

Deploy

Roadmap

Upgrade Guide

Q & A

How to deploy on the cloud(aws etc)

generateKey problem

excalidraw-collaboration's People

Contributors

Stargazers

Watchers

Forkers

excalidraw-collaboration's Issues

Ways to reproduce:

1) Export to Link

2) Export to Link after starting a Live Collaboration

3) Export to Link before starting a Live Collaboration

Summary

docker-compose (pls see the # coments):

.env (pls see the # coments):

Dockerfile:13

11 | 12 | COPY . . 13 | >>> RUN npm ci --prod 14 | RUN npx nest build 15 |

The browser console show this

docker-compose.yaml

excalidraw.env.production

sample comes from https://github.com/docker/awesome-compose

Recommend Projects

Recommend Topics

Recommend Org

11 |
12 | COPY . .
13 | >>> RUN npm ci --prod
14 | RUN npx nest build
15 |