Dev Container: can't run playground or book (can run website)

[richb-hanover]

trafficstars

What happened?

Using PRQL commit 9095495 in a Docker container on macOS on Intel (latest Docker: 4.30.0):

With the update to MSRV, I decided to rebuild. I removed all images, volumes, and containers related to PRQL. I then rebuilt the container. task web:run-website works exactly as expected. However both these commands give problems:

• task web:run-playground and
• task web:run-book

Both tasks seem to run in the terminal window as usual, however, going to the associated web page only displays a blank page. The browser looks as if it's waiting indefinitely.

Using curl shows that no response comes from the web server (see below). What other diagnostic info could I provide?

?130 ExceLint-addin % curl -v  http://localhost:5173/playground/playground
*   Trying [::1]:5173...
* connect to ::1 port 5173 failed: Connection refused
*   Trying 127.0.0.1:5173...
* Connected to localhost (127.0.0.1) port 5173
> GET /playground/playground HTTP/1.1
> Host: localhost:5173
> User-Agent: curl/8.4.0
> Accept: */*
>

PRQL input

N/A

SQL output

N/A

Expected SQL output

N/A

MVCE confirmation

• [ ] Minimal example
• [X] New issue

Anything else?

No response

[max-sixty]

I just tried it and it does work for me — does "Dev Containers: Rebuild Dev Container" work?

  VITE v5.2.6  ready in 871 ms

  ➜  Local:   http://localhost:5173/playground/playground
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

[richb-hanover]

I did rebuild the Dev Container. To be clear, it compiles/runs fine. The problem is that the web interface doesn't appear for either the playground or book. Here's a video:

https://youtu.be/P2YMasD-LXk

[max-sixty]

Thanks for the video!

My message wasn't that clear — I get that text but I also get a working playground in my browser. (FWIW it takes a while to load, but sounds like that's not the problem here...)

To the extent you want to look more — does the running docker container map the ports correctly?

[richb-hanover]

I waited ~10 minutes for the playground and it didn't appear... Same (10 minutes) for the book. But the website pops right up in under a second.

Curiously, the Website port 1313 comes and goes: when I'm running the website, it appears. When I ^C, it goes away (from the bar at the bottom of VSCode).

Both ports 5173 & 3000 show as forwarded all the time. I wonder if that's an important difference.

[max-sixty]

One more idea — does curl-ing the address from within the container work? (which I think we get if we run within a VS Code terminal)

[richb-hanover]

COOOOOOL... Nice debugging technique!

Yes - both playground and book are available (say, with curl http://localhost:3000) from a new Terminal session within the Dev Container.

Now - what to do with that information?

[max-sixty]

Sounds like there's a docker issue then; admittedly I'm not sure what...

[richb-hanover]

@eitsupi or @vanillajonathan - any thoughts on this behavior? Thanks

[vanillajonathan]

No, I have no thoughts on this.

[eitsupi]

IIUC, are you running something like curl http://localhost:3000 from the container? That's just looking at the port of the container, not the port of the host machine where the browser is open. You might want to check the port of the host machine.

[richb-hanover]

IIUC, are you running something like curl http://localhost:3000 from the container?

When I run that command from the container, it works. I see the HTML text that I expect. Sample:

vscode ➜ /workspaces/prql (main) $ curl -v http://localhost:5173/playground/playground
*   Trying ::1:5173...
* Connected to localhost (::1) port 5173 (#0)
> GET /playground/playground HTTP/1.1
> Host: localhost:5173
> User-Agent: curl/7.74.0
> Accept: */*
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Access-Control-Allow-Origin: *
< Content-Type: text/html
< Cache-Control: no-cache
< Etag: W/"697-EKewUC0nT9Jz+p9MN2hrqbpAPh4"
< Date: Tue, 21 May 2024 15:12:24 GMT
< Connection: keep-alive
< Keep-Alive: timeout=5
< Content-Length: 1687
< 
<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module">
import RefreshRuntime from "/playground/playground/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>

    <script type="module" src="/playground/playground/@vite/client"></script>

    <meta charset="utf-8" />
    <link rel="icon" href="/playground/playground/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#222222" />
    <meta name="description" content="PRQL Playground" />
    <link rel="apple-touch-icon" href="/playground/playground/icon192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="/playground/playground/manifest.json" />
    <title>PRQL Playground</title>
  </head>

  <body>
   ....

When I run that same command from a terminal (not in the Dev Container), I do not get any output. Sample:

√ ~ % curl -v http://localhost:5173/playground/playground
*   Trying [::1]:5173...
* connect to ::1 port 5173 failed: Connection refused
*   Trying 127.0.0.1:5173...
* Connected to localhost (127.0.0.1) port 5173
> GET /playground/playground HTTP/1.1
> Host: localhost:5173
> User-Agent: curl/8.4.0
> Accept: */*
>

[eitsupi]

I see. If you're doing port forwarding properly, I think it's a VSCode Devcontainer issue

[richb-hanover]

I don't know how the port forwarding even works. Hints appreciated...

By default the PRQL Dev Container has ports 5173 and 3000 open, as shown in the bottom of the window - screen shot:

Those are the two ports that don't work. When I web:run-website, a third port (1313) opens, as shown in the bottom.

I don't know if this is useful info.

[max-sixty]

Do you see something like this in your Ports panel?

[richb-hanover]

Yes I see this. A couple differences:

1. I see port 5173 for the playground
2. I originally saw two ports automatically suggested (5173 & 3000). I clicked the "X" in the Port column, and each was removed. Quitting and restarting VSCode showed zero ports forwarded.
3. Running the Playground adds port 5173 to the list of ports. Stopping it (^C) removes it, leaving the Ports list empty

[max-sixty]

OK — sounds like the ports are working from within the container, and VS Code is attempting to forward the ports but somehow something is getting in the way. It doesn't seem to be a PRQL-specific issue though...

To the extent you want to pursue further, it could be worth trying to see whether a non-PRQL webserver works; e.g. python -m http.server

[richb-hanover]

Update: I have a Win11 box that also has Docker (version 4.29.0) installed.

I pulled the latest PRQL commit (22May) and tested: all three (Playground, Book, Website) worked as expected.

I saw that Docker had an update (to 4.30.0) and installed that. I then re-ran the test (using the same commit of PRQL), and it fails as described above: neither Playground nor Book appear in the browser window; the Website works as expected.

I have submitted a support request at Docker and will report back if I hear anything interesting.

[eitsupi]

Again, I think this is a VSCode Devcontainer issue, not a Docker issue.

[richb-hanover]

Ahah... I now understand the importance of your prior comment.

How could we get help with this? I'm happy to ask on some other forum... Thanks.

[richb-hanover]

Several more clues/observations - some might be important. See my questions below:

1. When I first open VSCode with Docker Desktop 4.30.0, the "ports" at the bottom show only port 1313 is open/Auto Forwarded. This is the only port that works (website). The Playground (5173) and Book (3000) do not.
2. When I use task web:run-playground
   • Port 5173 is added to the port list as "Auto Forwarded"
   • "Open in browser" window sends browser to http://localhost:5173/ (shorter URL)
   • Cmd-clicking the link in the VSCode terminal sends the browser to http://localhost:5173/playground/playground. That is the expected URL, and was provided when using Docker Desktop 4.29.0
3. I confirmed on a third system (macOS 14.4.1, M2 processor) that upgrading from Docker Desktop 4.29.0 to 4.30.0 is the trigger for this problem.
4. In the Port List, the address that works is 127.0.0.1:1313; the non-working ports are both localhost:3000 and localhost:5173.
5. But there doesn't seem to be a difference between using 127.0.0.1 and localhost. I tried entering both values in the browser with no change in behavior: Playground and Book failed; Website worked fine with either.

Questions:

• Where are the "Auto Forwarded" ports configured? (I searched the entire project for 1313 and 5173 with no results)
• Why is the Playground URL incorrect in the "Open in Browser" window?
• What forum(s) might be able to provide guidance on this problem

Thanks as always.

[vanillajonathan]

Maybe the blog post announcing Docker Desktop 4.30 can give some hints? https://www.docker.com/blog/docker-desktop-4-30/#Dev-Environments

[max-sixty]

Will close since it's not a PRQL issue but feel free to continue any discussions....

[richb-hanover]

Update: To keep all these together, this note lists my posts to the Docker Forum and on Stack Overflow...

Docker Forum: https://forums.docker.com/t/docker-desktop-4-30-0-upgrade-breaks-web-based-container/141603 Stack Overflow: https://stackoverflow.com/questions/78556748/docker-desktop-4-30-0-upgrade-breaks-web-services-in-devcontainer

[richb-hanover]

Solution: I solved this by binding to address 0.0.0.0 in the DevContainer commands to run each of the components. (Previously, each of the commands used some variety of "localhost", "127.0.0.1", etc.) Forcing them to use 0.0.0.0 works great.

Thanks to https://stackoverflow.com/a/78534816/1827982 for a hint.

New PR coming later today