Couldn't connect to the collab server. Please reload the page and try again

[shenlei190810]

I have deployed excalidraw project, run it on my server. Then I try to share with others, I found this info, I need your help, thank you.

[yyj1983]

me too

[nxboo]

me too too

[dwelle]

Hello. Are you running your own collab server (https://github.com/excalidraw/excalidraw-room)? If so, how are you setting up the env variables to point to your collab server?

[yyj1983]

你好。您是否正在运行自己的协作服务器（https://github.com/excalidraw/excalidraw-room）？如果是这样，您如何设置环境变量以指向您的协作服务器？

baiban.fans.fans

[MathiasRenner]

Same here. I have the excalidraw-room/collab server at port 3002 on localhost up and running.
I tried to set the env vars, but still have the error shown in the first post here.

Could you please provide instructions how to set the env vars correctly?

[kucukkanat]

Hi, I had the same issue.
Set REACT_APP_WS_SERVER_URL to http://localhost:3002 solved it for me.
@MathiasRenner

[yyj1983]

Can you tell me which file you changed?

[MathiasRenner]

Same open question as @yyj1983 to @kucukkanat :
I set this variable (REACT_APP_WS_SERVER_URL) in the docker compose file as enviroment around here. Didn't work for me.
Any other hints?

[kucukkanat]

It's been a while but I think I changed this one : https://github.com/excalidraw/excalidraw/blob/master/.env.production

[Alfablos]

Hello,
first thing first this project is awesome!
Then, I have the same issue, setting the variable (tried master and v0.12) does not fix the issue. I've tried both using the prebuilt image from the docker hub and building it from the code as per README.

Here's my docker-compose.yml (one of them):

version: "3.8"

services:
  excalidraw:
    image: excalidraw/excalidraw:latest
#    build:
#      context: .
#      args:
#        - NODE_ENV=development
    container_name: excalidraw
    ports:
      - "3000:80"
    restart: on-failure
    stdin_open: true
    healthcheck:
      disable: true
    environment:
      NODE_ENV: development
      # REACT_APP_WS_SERVER_URL: http://localhost:3002               # Doesn't work either.
      REACT_APP_WS_SERVER_URL: http://excalidraw-room:3002

  excalidraw-room:
    image: excalidraw/excalidraw-room
    environment:
      # Collaboration WebSocket
      PORT: 3002
    ports:
      - "5000:80"
      - "3002:3002"

I checked the logs from the "room" service, nothing gets logged.
However, the logs from the excalidraw service show something interesting:

excalidraw  | 2022/10/22 12:44:17 [error] 32#32: *10 open() "/usr/share/nginx/html/undefined/collab-server" failed (2: No such file or directory), client: 172.21.0.1, server: localhost, request: "GET /undefined/collab-server HTTP/1.1", host: "localhost:3000", referrer: "http://localhost:3000/"

As a matter of fact the file does not exist, also I'm not sure why nginx is trying to access it so I'm just reporting this.

I hope this helps troubleshooting this until the collaboration server gets integrated (which would be awesome!).

Thanks guys!

[adocampo]

Any documentation about this?
I've set my excalidraw client on port 3000 and collab server on port 5000. Woke up both containers and reverse proxied the client with nginx. I can access the URL of the client, but it can't reach the collab server.
my docker-compose is like this

services:
  excalidraw:
    image: excalidraw/excalidraw:latest
    container_name: excalidraw
    ports:
      - "3000:80"
    restart: on-failure
    stdin_open: true
    healthcheck:
      disable: true
    volumes:
      - /data/excalidraw/:/opt/node_app/app:delegated
      - /data/excalidraw/package.json:/opt/node_app/package.json
      - /data/excalidraw/yarn.lock:/opt/node_app/yarn.lock
      - /data/excalidraw/node_modules:/opt/node_app/app/node_modules
    environment:
      - "REACT_APP_WS_SERVER_URL: http://192.168.10.39:5000"

If I open the URL http://192.168.10.39:5000 a page showing

Excalidraw collaboration server is up :)

Appears, but no luck.

Should I need to set on the proxy the collab server as well? is there any nginx example?

Best.

[PappyEric]

Just installed and having this same issue. Was there a solution posted somewhere? Seems odd that a whiteboard collaboration server can't do collaboration.

[tiran133]

In case someone needs this still.

You need to build your own docker image with either ENV VITE_APP_WS_SERVER_URL=http://127.0.0.1:3002 the Dockerfile

OR

change it in .env.production

This is how i did it.

mkdir excalidraw
cd excalidraw
git clone git clone https://github.com/excalidraw/excalidraw-room.git
git clone https://github.com/excalidraw/excalidraw.git
rm excalidraw/.dockerignore
touch docker-compose.yaml

docker-compose.yaml

version: "3.8"

services:
  excalidraw:
    build:
      context: ./excalidraw
      args:
        - NODE_ENV=production
    container_name: excalidraw
    ports:
      - "3000:80"
    restart: on-failure
    stdin_open: true
    healthcheck:
      disable: true
    
  excalidraw-room:
    build:
      context: ./excalidraw-room
    environment:
      # Collaboration WebSocket
      PORT: 3002
    ports:
      - "3002:3002"

Go into excalidraw/.env.production and change VITE_APP_WS_SERVER_URL= to
VITE_APP_WS_SERVER_URL=http://127.0.0.1:3002

Make sure that VITE_APP_WS_SERVER_URL url can be reached from your host. The browser is connecting to it.

docker compose up -d --build

Browse to http://127.0.0.1:3000 and start collaborating.

[Pradur241]

Hi, tiran133. Thanks for your solution. It helps a lot. After deploying according to the way you gave me, I found that I can only access the collaboration feature on the local machine. How do I modify the configuration file section if I want to share it on a local area network in my office? @tiran133

[tiran133]

Since the docker compose file exposes the ports to the host via the ports section.
So there are available on localhost and on the host IP

    ports:
      - "3000:80"
    
     ports:
      - "3002:80"

Instead of VITE_APP_WS_SERVER_URL=http://127.0.0.1:3002 just replace the 127.0.0.1 with the hosts IP.
for ex. VITE_APP_WS_SERVER_URL=http://192.168.1.42:3002

Now you can connect to http://192.168.1.42:3000.
It should work from any computer within the same network.

[Pradur241]

@tiran133 Thanks! I will make a try. And a little question, if I changed the port of excalidraw-client from 3000 to 10000 e.t. Will this affect collaboration?

[tiran133]

No this should be fine as long as you only change the first part of the port in the composer file

 ports:
      - "10000:80"

If you want to change 3002 also you need to adjust the VITE_APP_WS_SERVER_URL accordingly.

[Pradur241]

Thanks a lot!! @tiran133

[flintstones-fred]

@tiran133 Thank you for providing the instructions. When I follow these, however, the build fails. Can you see if I am missing something? Here is the output I get -

docker-compose up -d --build
Building excalidraw
Sending build context to Docker daemon  7.091MB
Step 1/10 : FROM node:18 AS build
 ---> ef847f8b5ae3
Step 2/10 : WORKDIR /opt/node_app
 ---> Using cache
 ---> a8643ec15466
Step 3/10 : COPY package.json yarn.lock ./
 ---> Using cache
 ---> 3332f5298f0a
Step 4/10 : RUN yarn --ignore-optional --network-timeout 600000
 ---> Using cache
 ---> 8253551f785d
Step 5/10 : ARG NODE_ENV=production
 ---> Using cache
 ---> 094d94fdd98f
Step 6/10 : COPY . .
 ---> Using cache
 ---> b619ce293339
Step 7/10 : RUN yarn build:app:docker
 ---> Running in 57aa6628b835
yarn run v1.22.19
$ cross-env VITE_APP_DISABLE_SENTRY=true VITE_APP_DISABLE_TRACKING=true vite build
/bin/sh: 1: cross-env: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The command '/bin/sh -c yarn build:app:docker' returned a non-zero code: 127
ERROR: Service 'excalidraw' failed to build : Build failed

[eakteam]

@tiran133 Thank you for providing the instructions. When I follow these, however, the build fails. Can you see if I am missing something? Here is the output I get -

docker-compose up -d --build
Building excalidraw
Sending build context to Docker daemon  7.091MB
Step 1/10 : FROM node:18 AS build
 ---> ef847f8b5ae3
Step 2/10 : WORKDIR /opt/node_app
 ---> Using cache
 ---> a8643ec15466
Step 3/10 : COPY package.json yarn.lock ./
 ---> Using cache
 ---> 3332f5298f0a
Step 4/10 : RUN yarn --ignore-optional --network-timeout 600000
 ---> Using cache
 ---> 8253551f785d
Step 5/10 : ARG NODE_ENV=production
 ---> Using cache
 ---> 094d94fdd98f
Step 6/10 : COPY . .
 ---> Using cache
 ---> b619ce293339
Step 7/10 : RUN yarn build:app:docker
 ---> Running in 57aa6628b835
yarn run v1.22.19
$ cross-env VITE_APP_DISABLE_SENTRY=true VITE_APP_DISABLE_TRACKING=true vite build
/bin/sh: 1: cross-env: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The command '/bin/sh -c yarn build:app:docker' returned a non-zero code: 127
ERROR: Service 'excalidraw' failed to build : Build failed

I have the same issue. Did you find any solution to this?

[eakteam]

@tiran133 Thank you for providing the instructions. When I follow these, however, the build fails. Can you see if I am missing something? Here is the output I get -

docker-compose up -d --build
Building excalidraw
Sending build context to Docker daemon  7.091MB
Step 1/10 : FROM node:18 AS build
 ---> ef847f8b5ae3
Step 2/10 : WORKDIR /opt/node_app
 ---> Using cache
 ---> a8643ec15466
Step 3/10 : COPY package.json yarn.lock ./
 ---> Using cache
 ---> 3332f5298f0a
Step 4/10 : RUN yarn --ignore-optional --network-timeout 600000
 ---> Using cache
 ---> 8253551f785d
Step 5/10 : ARG NODE_ENV=production
 ---> Using cache
 ---> 094d94fdd98f
Step 6/10 : COPY . .
 ---> Using cache
 ---> b619ce293339
Step 7/10 : RUN yarn build:app:docker
 ---> Running in 57aa6628b835
yarn run v1.22.19
$ cross-env VITE_APP_DISABLE_SENTRY=true VITE_APP_DISABLE_TRACKING=true vite build
/bin/sh: 1: cross-env: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The command '/bin/sh -c yarn build:app:docker' returned a non-zero code: 127
ERROR: Service 'excalidraw' failed to build : Build failed

@tiran133 any idea?

[mckennajones]

@eakteam I found this PR from @JannikStreek that addresses the issue: #7502

I copied the changes to the Dockerfile from that branch into my excalidraw Dockerfile and it builds successfully. Thanks @JannikStreek!

[eakteam]

@eakteam I found this PR from @JannikStreek that addresses the issue: #7502

I copied the changes to the Dockerfile from that branch into my excalidraw Dockerfile and it builds successfully. Thanks @JannikStreek!

Thanks for your help. The build succedd but after running docker I can't connect to it in port 3000 with connection refused.

Docker is running also, here is the output of docker container ls -a:

root@excalidraw:~/excalidraw# docker container ls -a
CONTAINER ID   IMAGE                        COMMAND                  CREATED         STATUS         PORTS                                               NAMES
ad3792add7ae   excalidraw-excalidraw-room   "docker-entrypoint.s…"   2 minutes ago   Up 2 minutes   80/tcp, 0.0.0.0:3002->3002/tcp, :::3002->3002/tcp   excalidraw-excalidraw-room-1
a5889d746bec   excalidraw-excalidraw        "docker-entrypoint.s…"   2 minutes ago   Up 2 minutes   0.0.0.0:3000->80/tcp, :::3000->80/tcp               excalidraw

root@excalidraw:~/excalidraw# curl 127.0.0.1:3002
Excalidraw collaboration server is up :)

root@excalidraw:~/excalidraw# curl 127.0.0.1:3000
curl: (56) Recv failure: Connection reset by peer

netstat -an|grep LISTENroot@excalidraw:~/excalidraw# netstat -an|grep LISTEN
tcp        0      0 0.0.0.0:3002            0.0.0.0:*               LISTEN
tcp        0      0 0.0.0.0:3000            0.0.0.0:*               LISTEN
tcp        0      0 127.0.0.53:53           0.0.0.0:*               LISTEN
tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN
tcp        0      0 127.0.0.1:6010          0.0.0.0:*               LISTEN
tcp6       0      0 :::3002                 :::*                    LISTEN
tcp6       0      0 :::3000                 :::*                    LISTEN
tcp6       0      0 :::22                   :::*                    LISTEN
tcp6       0      0 ::1:6010                :::*                    LISTEN

Any idea? Thanks :)

[eakteam]

For everyone who is having troubles here he an awesome repository which works like a charm :)

https://github.com/Nenodema/excalidraw-self-hosted-stack

[DineshCodeFlow]

For everyone who is having troubles here he an awesome repository which works like a charm :)

https://github.com/Nenodema/excalidraw-self-hosted-stack

Broken link!

[d3xt3r01]

So there's no way other than rebuilding the whole container?
I'd imagine the current image would just read the ENV on start and use that. Why rebuild everything for an url env change?

[wiktormalyska]

Since the docker compose file exposes the ports to the host via the ports section. So there are available on localhost and on the host IP

ports:
  - "3000:80"

 ports:
  - "3002:80"

Instead of VITE_APP_WS_SERVER_URL=http://127.0.0.1:3002 just replace the 127.0.0.1 with the hosts IP. for ex. VITE_APP_WS_SERVER_URL=http://192.168.1.42:3002

Now you can connect to http://192.168.1.42:3000. It should work from any computer within the same network.

Hi what if i use docker network?

services:
  excalidraw:
    container_name: excalidraw
    build:
      context: ./excalidraw
      args:
        - NODE_ENV=production
    restart: on-failure
    stdin_open: true
    healthcheck:
      disable: true
    networks:
      - xcaddy
      - excalidraw
  excalidraw-room:
    container_name: excalidraw-room
    build:
      context: ./excalidraw-room
    environment:
      PORT: 3002
    networks:
      - excalidraw
networks:
  excalidraw: null
  xcaddy:
    external: true

I also use xcaddy for proxy and i've set .env.production VITE_APP_WS_SERVER_URL=http://excalidraw-room:3002