Only getting a purple screen

[maeries]

After deploying flame using this docker-compose file

version: '3'
services:
    flame:
        image: pawelmalak/flame:latest
        restart: unless-stopped
        volumes:
            - ./data:/app/data
        networks:
            - caddy_net

networks:
  caddy_net:
    external: true

I only get a purple screen when visiting the URL (I use Caddy2 as a reverse proxy). When I refresh the page I can see

Thursday 10, June 2021
Good Evening

Applications

Bookmarks

for a fraction of a second, before only the background color is shown again.

I tried Firefox and vivaldi and both show the same behaviour

[pawelmalak]

Are you getting any errors in the console?

[maeries]

I started the container 6 now.

Twice I got

~/docker/flame$ docker-compose up
Creating flame_flame_1 ... done
Attaching to flame_flame_1
flame_1  | Socket: listen
flame_1  | Server is running on port 5005 in production mode
flame_1  | Connected to database
flame_1  | All models were synced
flame_1  | Initial config created
^CGracefully stopping... (press Ctrl+C again to force)
Stopping flame_flame_1 ... done

Three times I got

~/docker/flame$ docker-compose up
Creating flame_flame_1 ... done
Attaching to flame_flame_1
flame_1  | Socket: listen
flame_1  | Server is running on port 5005 in production mode
flame_1  | Connected to database
flame_1  | All models were synced
flame_1  | Initial config created
flame_1  | External API request failed
^CGracefully stopping... (press Ctrl+C again to force)
Stopping flame_flame_1 ... done

And once I got

~/docker/flame$ docker-compose up
Starting flame_flame_1 ... done
Attaching to flame_flame_1
flame_1  | Socket: listen
flame_1  | Server is running on port 5005 in production mode
flame_1  | Connected to database
flame_1  | {
flame_1  |   name: 'SequelizeEagerLoadingError',
flame_1  |   message: 'Bookmark is not associated to Category!'
flame_1  | }
flame_1  | SequelizeEagerLoadingError: Bookmark is not associated to Category!
flame_1  | {
flame_1  |   name: 'SequelizeEagerLoadingError',
flame_1  |   message: 'Bookmark is not associated to Category!'
flame_1  | }
flame_1  | SequelizeEagerLoadingError: Bookmark is not associated to Category!
flame_1  | {
flame_1  |   name: 'SequelizeEagerLoadingError',
flame_1  |   message: 'Bookmark is not associated to Category!'
flame_1  | }
flame_1  | SequelizeEagerLoadingError: Bookmark is not associated to Category!
flame_1  | {
flame_1  |   name: 'SequelizeEagerLoadingError',
flame_1  |   message: 'Bookmark is not associated to Category!'
flame_1  | }
flame_1  | SequelizeEagerLoadingError: Bookmark is not associated to Category!
flame_1  | {
flame_1  |   name: 'SequelizeEagerLoadingError',
flame_1  |   message: 'Bookmark is not associated to Category!'
flame_1  | }
flame_1  | SequelizeEagerLoadingError: Bookmark is not associated to Category!
flame_1  | {
flame_1  |   name: 'SequelizeEagerLoadingError',
flame_1  |   message: 'Bookmark is not associated to Category!'
flame_1  | }
flame_1  | SequelizeEagerLoadingError: Bookmark is not associated to Category!
flame_1  | {
flame_1  |   name: 'SequelizeEagerLoadingError',
flame_1  |   message: 'Bookmark is not associated to Category!'
flame_1  | }
flame_1  | SequelizeEagerLoadingError: Bookmark is not associated to Category!
flame_1  | All models were synced
flame_1  | Initial config created
flame_1  | External API request failed
^CGracefully stopping... (press Ctrl+C again to force)
Stopping flame_flame_1 ... done

regarding the first example, it could be that I simply didn't let it run long enough for it to throw the API request message

[roo82]

I'm seeing the same thing when trying to access flame from behind an nginx reverse proxy. It works fine if I hit the site at the docker host:port itself, so I am guessing I'm missing some config or something. I can post my nginx config if that would help.

[pawelmalak]

I have never used reverse proxy before so I will try to setup one, check if I can reproduce this problem and then work from there. I suspect it all comes from this ws:// protocol.

[maeries]

Indeed, it works when not using a reverse proxy

[Lanjelin]

Nginx behind reverse proxy with https, Chrome DevTools / Console spits out the following.

Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://example.com/socket'. This request has been blocked; this endpoint must be available over WSS.

DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

Suppose wss is needed to serve the content securely / via https.

Nginx using http is working perfectly with the following configuration (some of the settings could probably be skipped):

server {
    listen           80;
    listen      [::]:80;
    server_name home.example.com;
    location / {
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://192.168.1.148:5005;
        proxy_http_version 1.1;
        proxy_pass_request_headers on;
        proxy_set_header Connection "upgrade";
        proxy_store off;
    }
}

Bet it's the same thing with #23

[pawelmalak]

So I setup reverse proxy using NginxProxyManager and got the same error on all major browsers.
As expected, the error was caused by use of ws:// protocol with https://.

I've added simple check on WeatherWidget which will connect to either ws or wss based on document.location.protocol so it can be used both in development and on production.

I don't know how it works with other reverse proxy services but here I had to allow for websocket support to get it fully working.

[vmcosco]

@maeries Do you have reverse proxy working on Caddy v2? For me it works on mobile (chrome & safari) but not on desktop (chrome). I just get the purple screen. If so, could you share your Caddyfile?