Git Product home page Git Product logo

Comments (24)

richb-hanover avatar richb-hanover commented on June 16, 2024 2

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

from prql.

vanillajonathan avatar vanillajonathan commented on June 16, 2024 2

No, I have no thoughts on this.

from prql.

max-sixty avatar max-sixty commented on June 16, 2024 1

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

from prql.

richb-hanover avatar richb-hanover commented on June 16, 2024 1

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

from prql.

max-sixty avatar max-sixty commented on June 16, 2024

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

from prql.

max-sixty avatar max-sixty commented on June 16, 2024

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?

from prql.

richb-hanover avatar richb-hanover commented on June 16, 2024

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.

from prql.

max-sixty avatar max-sixty commented on June 16, 2024

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)

from prql.

richb-hanover avatar richb-hanover commented on June 16, 2024

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?

from prql.

max-sixty avatar max-sixty commented on June 16, 2024

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

from prql.

richb-hanover avatar richb-hanover commented on June 16, 2024

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

from prql.

eitsupi avatar eitsupi commented on June 16, 2024

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.

from prql.

richb-hanover avatar richb-hanover commented on June 16, 2024

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: */*
>

from prql.

eitsupi avatar eitsupi commented on June 16, 2024

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

from prql.

richb-hanover avatar richb-hanover commented on June 16, 2024

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:

image

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.

from prql.

max-sixty avatar max-sixty commented on June 16, 2024

Do you see something like this in your Ports panel?

image

from prql.

richb-hanover avatar richb-hanover commented on June 16, 2024

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

from prql.

max-sixty avatar max-sixty commented on June 16, 2024

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

from prql.

richb-hanover avatar richb-hanover commented on June 16, 2024

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.

from prql.

eitsupi avatar eitsupi commented on June 16, 2024

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

from prql.

richb-hanover avatar richb-hanover commented on June 16, 2024

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.

from prql.

richb-hanover avatar richb-hanover commented on June 16, 2024

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
  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.

from prql.

vanillajonathan avatar vanillajonathan commented on June 16, 2024

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

from prql.

richb-hanover avatar richb-hanover commented on June 16, 2024

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

from prql.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.