Deploying Tableau Noir with Traefik

[jrenoux]

Hi,

I am currently trying to deploy tableau noir with Traefik, and while I manage to have buttons and the top bar appearing, I cannot draw or interact with it in any way. When I place my mouse in the zone where I'm supposed to draw, it disappears, but I can't draw.
I do not see any error messages in traefik or docker logs. I am only using the frontend for now, as I don't need to share the boards.
Here is my modified docker-compose file.

version: '3.8'                                                                                                                                                                                                                                                                                                                                                                                                                          
services:                                                                                                                                                                                                                                                                                                                                                                                                                               
  tableaunoir:                                                                                                                                                                                                                                                                                                                                                                                                                          
    container_name: tableaunoir                                                                                                                                                                                                                                                                                                                                                                                                         
    image: tableaunoir:latest                                                                                                                                                                                                                                                                                                                                                                                                           
    restart: unless-stopped                                                                                                                                                                                                                                                                                                                                                                                                             
    environment:                                                                                                                                                                                                                                                                                                                                                                                                                        
      - EXTERNAL_WS_URL="ws://tableaunoir.my-server.com:8181"                                                                                                                                                                                                                                                                                                                                                                           
      - EXTERNAL_HTTP_URL="http://tableaunoir.my-server.com:8182"                                                                                                                                                                                                                                                                                                                                                                       
    volumes:                                                                                                                                                                                                                                                                                                                                                                                                                            
      - /tableaunoir                                                                                                                                                                                                                                                                                                                                                                                                                    
    networks:                                                                                                                                                                                                                                                                                                                                                                                                                           
      - tableaunoir                                                                                                                                                                                                                                                                                                                                                                                                                     
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
  frontend:                                                                                                                                                                                                                                                                                                                                                                                                                             
    container_name: frontend                                                                                                                                                                                                                                                                                                                                                                                                            
    image: nginx:1.19                                                                                                                                                                                                                                                                                                                                                                                                                   
    restart: unless-stopped                                                                                                                                                                                                                                                                                                                                                                                                             
    volumes_from:                                                                                                                                                                                                                                                                                                                                                                                                                       
      - tableaunoir:ro                                                                                                                                                                                                                                                                                                                                                                                                                  
    volumes:                                                                                                                                                                                                                                                                                                                                                                                                                            
      - ./docker/templates/frontend:/etc/nginx/templates:ro                                                                                                                                                                                                                                                                                                                                                                             
    ports:                                                                                                                                                                                                                                                                                                                                                                                                                              
      - 8182:80                                                                                                                                                                                                                                                                                                                                                                                                                         
    environment:                                                                                                                                                                                                                                                                                                                                                                                                                        
      - NGINX_HOST=tableaunoir.my-server.com
      - NGINX_PORT=80                                                                                                                                                                                                                                                                                                                                                                                                                   
    networks:                                                                                                                                                                                                                                                                                                                                                                                                                           
      - tableaunoir                                                                                                                                                                                                                                                                                                                                                                                                                     
      - traefik-proxy                                                                                                                                                                                                                                                                                                                                                                                                                   
    labels:                                                                                                                                                                                                                                                                                                                                                                                                                             
      - "traefik.enable=true"                                                                                                                                                                                                                                                                                                                                                                                                           
      - "traefik.docker.network=traefik-proxy"                                                                                                                                                                                                                                                                                                                                                                                          
      - "traefik.port=80"                                                                                                                                                                                                                                                                                                                                                                                                               
      # Entrypoint and TLS                                                                                                                                                                                                                                                                                                                                                                                                              
      - "traefik.http.routers.tableaunoir.entrypoints=https"                                                                                                                                                                                                                                                                                                                                                                            
      - "traefik.http.routers.tableaunoir.rule=Host(`tableaunoir.my-server.com`)"                                                                                                                                                                                              
      - "traefik.http.routers.tableaunoir.tls.certresolver=namecheap"                                                                                                                                                                                                                                                                                                                                                                   
      # Middlewares:                                                                                                                                                                                                                                                                                                                                                                                                                    
      - "traefik.http.routers.tableaunoir.middlewares=tableaunoir@docker"                                                                                                                                                                                                                                                                                                                                                               
      # Middleware cloud adds additional headers:                                                                                                                                                                                                                                                                                                                                                                                       
      - "traefik.http.middlewares.tableaunoir.headers.customFrameOptionsValue=SAMEORIGIN"                                                                                                                                                                                                                                                                                                                                               
      - "traefik.http.middlewares.tableaunoir.headers.framedeny=true"                                                                                                                                                                                                                                                                                                                                                                   
      - "traefik.http.middlewares.tableaunoir.headers.sslredirect=true"                                                                                                                                                                                                                                                                                                                                                                 
      - "traefik.http.middlewares.tableaunoir.headers.stsIncludeSubdomains=true"                                                                                                                                                                                                                                                                                                                                                        
      - "traefik.http.middlewares.tableaunoir.headers.stsPreload=true"                                                                                                                                                                                                                                                                                                                                                                  
networks:                                                                                                                                                                                                                                                                                                                                                                                                                               
    tableaunoir:                                                                                                                                                                                                                                                                                                                                                                                                                        
    traefik-proxy:                                                                                                                                                                                                                                                                                                                                                                                                                      
      external:                                                                                                                                                                                                                                                                                                                                                                                                                         
        name: traefik-proxy 

Do you see anything that could be the issue?
Thanks for the help.

[francoisschwarzentruber]

Hello,
thank you for posting the issue.
I must confess that I am not a specialist of Docker or Traefik. Here are some thoughts that may help in solving your issue:

• if you do not share boards, you can use Tableaunoir offline. Just git clone + compile + open index.html in a Web browser
• does Tableaunoir say something? Do you have a particular error in the console?
• is your web browser recent?
• The mouse cursor disappears... so you do not see the chalk cursor at all?
• Maybe some add-ons or extension that may be conflicting with Tableaunoir? (for instance Adblockers, night mode add-ons?)

[jrenoux]

Thanks for the really quick answer!

* if you do not share boards, you can use Tableaunoir offline. Just git clone + compile + open index.html in a Web browser

I have a server at home, and I wanted to be able to use it from various computer (work and home), but I would be the only one using it... I thought I would not need the backend, but maybe I misunderstood. In any case, when I tried to add the backend I got the same issue

* does Tableaunoir say something? Do you have a particular error in the console?

Nope, the output seems good:

tableaunoir  | EXTERNAL_WS_URL="ws://tableaunoir.my-server.com:8181"
tableaunoir  | EXTERNAL_HTTP_URL="http://tableaunoir.my-server.com:8182"
tableaunoir  | WELCOME TO TABLEAUNOIR!
tableaunoir  | creation of the socket server...
tableaunoir  | normal server on port 8080
tableaunoir  | 

* is your web browser recent?

Firefox 112 on Ubuntu 22.04

* The mouse cursor disappears... so you do not see the chalk cursor at all?

Nope, actually I don't seem to see the whole "blackboard" area at all. Here is what I get:

* Maybe some add-ons or extension that may be conflicting with Tableaunoir? (for instance Adblockers, night mode add-ons?)

I tried with Firefox in troubleshooting mode, but no luck.

Thanks for trying to help. I'll keep digging, and if I find a solution I'll post it in case others would find it useful.
I must admit I'm a bit confused by the docker-compose file, which seems to start two Nginx containers, one for the frontend and one for the backend, both listening to port 80? How is this then transmitted to tableaunoir? Maybe understanding this would help me figure out the right Traefik configuration.

[francoisschwarzentruber]

I have a server at home, and I wanted to be able to use it from various computer (work and home), but I would be the only one using it...

If you work alone, you just need to have a classical server to deploy HTML page. Actually, even https://tableaunoir.github.io/ should be sufficient for your needs. Loading and save is performed locally. (in the menu "My board", then "Load" or "Save"). So you do not need to run server for storing data. The node.js server side does not store data, and is only used when you share boards with others.

• does Tableaunoir say something? Do you have a particular error in the console?

Sorry, I was not precise. Does the console of your web browser (Firefox or Chrome or whatever) say something? If the screen seems stuck with a gray panel it seems that something wrong happened when loading Tableaunoir.

Actually, does the URL https://tableaunoir.github.io/ work for you? Can you draw on it?

Another thing. Have you compiled Tableaunoir? The index.html provided in the src folder is not enough, you need to compile with npm run build and then open index.html in the dist folder.

[Bluebottel]

It looks like you've compiled the frontend since the images are working so that's good. I recognize the symptoms since I've ran into them myself. What triggered it for me was using a web server which didn't set the MIME types properly causing the tableaunoir.js not to load which breaks the app in this manner.

Do I understand you correctly if I say that you've

1. Installed node
2. Ran npm install in the project directory
3. Ran npm run build which produces /dist
4. Served the content of the /dist folder to the internet

..?

[jrenoux]

I am deploying using the docker file and compose, but I checked, and indeed when building the image from the Dockerfile it:

1. Install node 18 (I actually had to change the DockerFile that initially used 15, but then got an error message that this version wasn't supported)
2. run npm install
3. run npm run build and creates the dist folder
4. I guess this might be the tricky part. In the suggested docker-compose, there is the nginx config that uses the nginx template that serves the /dist, so I guess it's working, but I am not 100% sure it's configured ok.

The firefox console has indeed an error message:

EDIT: Yes, https://tableaunoir.github.io/ works fine for me.

[francoisschwarzentruber]

Thank you for posting your firefox console error message.

• Do you get this message directly when you open the index.html from your browser?
• Do you obtain this error message with a URL like https://tableaunoir.github.io/ (URL without an id)?

This is weird since JSON.parse(...) is used to parse the message coming from the server. And normally a Tableaunoir instance starts receiving such messages only if you try to connect to a shared board, or if you create a shared board.

[francoisschwarzentruber]

Any news? Does it work now?