HTML doesn't work in docker livebook

[lambdaofgod]

I run livebook inside a docker container (I tried with and without edge tag)

When I try to display HTML livebook doesn't display anything (screenshot).

I tried to downgrade livebook to the version that works locally for me (0.9.3) but the error persists.
I also tried changing kino versions 0.9, 0.9.3 and 0.10 to no avail.

I tested this in brave browser and firefox, both have the same issue (I also checked this in a private session).

[josevalim]

Can you please provide more information? How are you running the Docker image? Which ports are you exposing? Any error in the terminal? What is the URL you are accessing?

[lambdaofgod]

My docker-compose - I go to http://< HOST >:8089/

version: "3.9"

services:
  livebook:
    image: ghcr.io/livebook-dev/livebook:0.9.3
    ports:
      - 8089:8080
    volumes:
      - ./livebook_prompting_ui:/data

This is extremely confusing: when I run docker container on my local machine with livebook:0.9.3 and kino 0.9.3 it works but it fails on my remote machine... I disabled all the browser plugins and tried both brave and firefox and the problem is still here

Is there any chance something different is going on when connecting to an external server compared to running it on localhost? The same code and docker container works on localhost

[josevalim]

There are two ports you need to consider. See the steps here: https://github.com/livebook-dev/livebook#docker. If you change the second port (8081) you will have to mirror it using LIVEBOOK_IFRAME_PORT. Let me know once it works and we can add a sample docker compose to our README. :)

[lambdaofgod]

How do I do that?

I tried both

livebook:
    image: ghcr.io/livebook-dev/livebook:0.9.3
    ports:
      - 8089:8080
      - 8090:8081
    volumes:
      - ./livebook_prompting_ui:/data
    environment:
      - LIVEBOOK_IFRAME_PORT=8090

and

livebook:
    image: ghcr.io/livebook-dev/livebook:0.9.3
    ports:
      - 8089:8080
      - 8090:8081
    volumes:
      - ./livebook_prompting_ui:/data
    environment:
      - LIVEBOOK_IFRAME_URL=http://livebook:8090

And I still can't see rendered HTML

[josevalim]

What if you map 8080:8080 and 8081:8081? And do you see any errors in your browser console? It should be trying to access some URLs.

[lambdaofgod]

I can't map them in such a way because there's already something else running on 8080 :(

[josevalim]

Can you keep only 8081:8081 then? Or temporarily stop port 8080 only to try it out?

[jonatanklosko]

Hey @lambdaofgod, either of these config should work:

services:
  livebook:
    image: ghcr.io/livebook-dev/livebook:0.10.0
    ports:
      - 8089:8080
      - 8090:8081
    environment:
      - LIVEBOOK_IFRAME_URL=http://localhost:8090/iframe/v4.html

services:
  livebook:
    image: ghcr.io/livebook-dev/livebook:0.10.0
    ports:
      - 8089:8080
      - 8090:8090
    environment:
      - LIVEBOOK_IFRAME_PORT=8090

The second is preferable, because we don't need the exact iframe version :)

[josevalim]

I pushed those examples to our README. Thanks @jonatanklosko !