Issue with OurBoard not functioning properly when locally hosted

[LukeJVinton]

Feature request story or issue

I am trying to run the OurBoard application locally by following the provided docker instructions, but I've encountered an issue where the generated locally hosted webpage does not function properly.

The homepage generates and is viewable in a browser. When trying to create a new board (via any of the buttons in the page or via API request) a blank canvas is generated without the notes functionality.

For instance, the process started by the ./scripts/run_dockerized.sh script shows the following output when creating the tutorail board:

Template tutorial not found
Trying to join board eedb9586-e49b-41c6-bba2-470e6350c9c0 on socket for board null, board host localhost:1337 local hostnames localhost:1337
Purging board eedb9586-e49b-41c6-bba2-470e6350c9c0 from memory

I have made just two changes in order to access the application generated on a linux vm on a windows host machine. These changes are shown by the following git diff:

docker run \
   --init \
   -e SESSION_SIGNING_SECRET=NOTICE________THIS_________IS____NOT___SECURE_____USE_RANDOMIZED____STRING__INSTEAD \
   -e DATABASE_URL=postgres://r-board:secret@host.docker.internal:13338/r-board \
+  --add-host "host.docker.internal:host-gateway" \
   --mount type=bind,source="$(pwd)"/backend/localfiles,target=/usr/src/app/backend/localfiles \
-  -p 127.0.0.1:1337:1337/tcp \
+  -p 0.0.0.0:1337:1337/tcp \
   raimohanska/ourboard

Following these changes I ran the following two commands:

docker-compose up -d

./scripts/run_dockerized.sh 

Screenshot

Please let me know if there are any logs or information I can provide.

Many thanks, Luke

[raimohanska]

Hi! I'm glad you tried it out and of course sad that it didn't work out right away. I may or may not be able to help. Let's find out!

I just checked that it Works On My Machine using the run_dockerized.sh script without any environment variables.

Your server output looks normal, with a couple of notes:

• The "template not found" message is normal and should not prevent it from working
• The "trying to join" message is normal, even though a bit misleading
• Looks like this is not the first time you've started the server. On the first time you should see messages related to database initialization ("Migrating files"...)
• Once a user successfully connects to a board there should be "Loading board f02e3364-ca26-4bee-9783-d09e7146b13c into memory" and after making some notes etc, there should be messages related to saving the board to the database

The UI doesn't look right, obviously. For one thing, the board name is empty and also all controls are missing. I suspect there will be some errors in the console, viewable with browser developer tools. Maybe check them out and paste here as well?

[LukeJVinton]

Hi and thanks for the quick response!

Is the purging board ... from memory line also normal?

For reference on your third point, on the first run, the ./scripts/run_dockerized.sh outputs the following:

Running database migrations
Can't determine timestamp for 001
Can't determine timestamp for 002
Can't determine timestamp for 003
Can't determine timestamp for 004
Can't determine timestamp for 005
Can't determine timestamp for 006
> Migrating files:
> - 001_init
> - 002_add_first_serial
> - 003_refactor_access
> - 004_public_boards_access
> - 005_uuid_extension
> - 006_unique_email
### MIGRATION 001_init (UP) ###
### MIGRATION 002_add_first_serial (UP) ###
### MIGRATION 003_refactor_access (UP) ###
### MIGRATION 004_public_boards_access (UP) ###
### MIGRATION 005_uuid_extension (UP) ###
### MIGRATION 006_unique_email (UP) ###
Completed database migrations
Creating non-empty board default -> bootstrapping history
Listening on port 1337
Statistics: active boards 0, sessions 0

Looking in the browser console I get these errors repeated multiple times:

Firefox can’t establish a connection to the server at ws://localhost:1337/socket/board/edb5035f-7a21-4bca-9be9-fb3fd9191c36. [server-connection.ts:24:82](http://linux-dev:1337/src/store/server-connection.ts)
Web socket error [server-connection.ts:69:24](http://linux-dev:1337/src/store/server-connection.ts)
    d server-connection.ts:69
    (Async: EventListener.handleEvent)
    d server-connection.ts:67
    h server-connection.ts:112
    v server-connection.ts:104
    d server-connection.ts:70
    (Async: EventListener.handleEvent)
    d server-connection.ts:67
    h server-connection.ts:112
    v server-connection.ts:104
    d server-connection.ts:70
    (Async: EventListener.handleEvent)
    d server-connection.ts:67
    h server-connection.ts:112
    v server-connection.ts:104
    d server-connection.ts:70
    (Async: EventListener.handleEvent)
    d server-connection.ts:67
    h server-connection.ts:112
    v server-connection.ts:104
    d server-connection.ts:70
    (Async: EventListener.handleEvent)
    d server-connection.ts:67
    h server-connection.ts:112
    v server-connection.ts:104
    d server-connection.ts:70
    (Async: EventListener.handleEvent)
    d server-connection.ts:67
    h server-connection.ts:112
    v server-connection.ts:104
    d server-connection.ts:70
    (Async: EventListener.handleEvent)
    d server-connection.ts:67
    h server-connection.ts:112
    v server-connection.ts:104
    d server-connection.ts:70
    (Async: EventListener.handleEvent)
    d server-connection.ts:67
    h server-connection.ts:112
    v server-connection.ts:104
    d server-connection.ts:70
    (Async: EventListener.handleEvent)
    d server-connection.ts:67
    h server-connection.ts:112
    v server-connection.ts:104
    d server-connection.ts:70
    (Async: EventListener.handleEvent)
    d server-connection.ts:67
    h server-connection.ts:112
    v server-connection.ts:104
    d server-connection.ts:70
    (Async: EventListener.handleEvent)
    d server-connection.ts:67
    h server-connection.ts:112
    v server-connection.ts:104
    d server-connection.ts:70
Failed to send DOMException: An attempt was made to use an object that is not, or is no longer, usable
    p server-connection.ts:125
    h9 server-connection.ts:52
[server-connection.ts:127:20](http://linux-dev:1337/src/store/server-connection.ts)
    p server-connection.ts:127
    h9 server-connection.ts:52

[raimohanska]

The purging message is normal. I think the issue is that the browser tries websocket connection to localhost which is not the right hostname for your setup.

[raimohanska]

Please try the env vars ROOT_URL and the websocket related ones in readme. Gotta go now, but lemme know if u get it to work!

[raimohanska]

Try adding these lines:

-e ROOT_URL=http://linux-dev:1337 \ -e WS_HOST_DEFAULT=linux-dev:1337 \ -e WS_HOST_LOCAL=linux-dev:1337 \

[raimohanska]

If you pull the latest image (just fresh out of the oven!) you should be good by just setting the ROOT_URL environment variable correctly - the websocket addresses will be derived from that one. Lemme know if this helps. I improved the readme accordingly.

[LukeJVinton]

Hi!

Thank you so much for helping me out and providing instructions. I think I am getting somewhere but still not up and running unfortunately.

After following the instructions I am still having trouble getting the application to run correctly. In the console I noticed there were still references to localhost (for instance Connecting to ws://localhost:1337/socket/board/default), so I made a few steps to try and track down the problem.

I've made the following steps:

• Pulled the latest version of the repo
• In the .env file I now have:

  SESSION_SIGNING_SECRET="NOTICE________THIS_________IS____NOT___SECURE_____USE_RANDOMIZED____STRING__INSTEAD"
  ROOT_URL=http://linux-dev:1337
  WS_HOST_DEFAULT=linux-dev:1337
  WS_HOST_LOCAL=linux-dev:1337
  DATABASE_URL=linux-dev:13338 

• Added console info logging to the board-event-handler.ts for the variables: process.env.{WS_HOST_DEFAULT, WS_HOST_LOCAL, ROOT_URL}
• Rebuilt the image: docker build . -t raimohanska/ourboard:latest
• Re-ran the script: ./scripts/run_dockerized.sh

With the UI now available:

• Clicking "Tutorial Board" gives the following output in the browser console:

  board-store.ts:270 ui.board.join.request -> reset
  server-connection.ts:65 Connecting to ws://localhost:1337/socket/board/af6999c9-d14b-4593-acf2-1535032bcda9
  server-connection.ts:24 WebSocket connection to 'ws://localhost:1337/socket/board/af6999c9-d14b-4593-acf2-1535032bcda9' failed: 
  (anonymous) @ server-connection.ts:24
  d @ server-connection.ts:66
  h @ server-connection.ts:112
  (anonymous) @ server-connection.ts:81
  server-connection.ts:69 Web socket error
  (anonymous) @ server-connection.ts:69
  error (async)
  d @ server-connection.ts:67
  h @ server-connection.ts:112
  (anonymous) @ server-connection.ts:81
  server-connection.ts:89 Socket disconnected
  server-connection.ts:103 reconnecting...

• Also, the conole info logging added to board-event-handler.ts produce undefined for each variable.

It seems like the environment variables set in the .env file are not being picked up?

Please let me know if there is anything else I can provide.

Thanks, Luke

[raimohanska]

Sure, when you run in docker, it does not automatically pick up an env file on the host machine. Instead you can use the -e flags in the script to provide env values.

[raimohanska]

So this I think boils down to understanding how docker works. Anyway, let’s make it work for you and improve documentation for the next guy :)

[LukeJVinton]

Ah! My mistake sorry for the error on my side. I had seen that the /backend dir is copied over in the dockerfile and assumed that meant the .env was picked up!

The application is functioning after adding those additional flags to the docker run command in run_dockerized.sh.

Thank you very much for the help!