[BUG] Devtools cannot be used outside of `localhost`

[rassie]

Describe the bug

I would like use Devtools in my Refine project. I'm running my development in Docker containers and since Devtools bind exclusively on localhost, Devtools client cannot reach the server.

Steps To Reproduce

1. Start a new Devtools project
2. Observe it's binding on localhost and no other network interface
3. Look for a configuration option for defining binding IP.
4. Fail to find anything and cry a little in despair :)

Expected behavior

Binding interface (and port) should be configurable.

Screenshot

No response

Desktop

No response

Mobile

No response

Additional Context

There has been some attempts to implement port configuration, which have been reverted in https://github.com/refinedev/refine/pull/5056, with a promise to provide a solution in the future.

[BatuhanW]

Hello @rassie thanks for the issue, and sorry for the despair :)

We need to clarify some things:

• Could you share your dockerfile (minimal version)?
• Are you running devtools and your app separately / in different containers?
• Is your app running at 127.0.0.1?
• Maybe you can put all of them into the same network
• If your app/devtools not exposed to your machine, could you try --network=host option? https://docs.docker.com/engine/reference/run/#network-host

[rassie]

Hi, thanks for the reply.

I would very much like to avoid running anything on the host network. For starters, I'm not running pure Docker, it was more or less a simplification for the issue tracker. I'm running a minimal Kubernetes cluster (based on k3s/k3d), so host networking is way more difficult that just setting --network=host (besides, some team mates are running Windows with WSL2, which does not support host networking). Running Devtools and the app on the same network wouldn't normally do anything, since Devtools would still be listening only on localhost.

On the other point: my application (running with vite) is running with the --host 0.0.0.0 option, so that I can reach it from outside the container. In general, the problem is similar: if I want to run my development in container, I cannot do so with pure vite, which would bind itself to localhost by default, I need to add that option to actually expose ports. Which is totally fine, localhost is a sane default, there just needs to be an override option.

The docker-compose.yaml (there is no Dockerfile) corresponding to my Kubernetes config would look something like this:

services:
  web:
    image: "node:18"
    volumes:
      - "./:/app"
    working_dir: /app
    ports:
      - 5173:5173
    command: ["sh", "-c", "npm install && npm run dev -- --host"]

I would normally run the devtools in the same container by default, but I'm also open to starting a separate container.

[BatuhanW]

Hello @rassie, we'll try to explore our options and get back to you, as this one is a bit complicated issue. We'll see what we can do about it.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[rassie]

It's not stale.

@BatuhanW could you elaborate what's the difficult part of this issue? I wanted to take a stab at it myself and haven't seen anything inherently difficult apart from the "working with unknown code" part for me.

[BatuhanW]

Hello @rassie, sorry for the late reply! Your notification got lost in GitHub's bloated notification UI.

The main problem is, DevTools authentication server only allows localhost:5001 and 127.0.0.1:5001 origins for security reasons. So running it in the container will have invalid origin issue.

One solution could be to run proxy server, running in 5001 port, proxying requests from container to host, and the auth server.

[rassie]

Can you make the origin overridable? I understand that the "normal" use case is to develop on localhost, however remote development instances are not that unusual anymore and those won't be called localhost in most cases.

[BatuhanW]

Allowed origin configuration is dictated on the backend with white-list approach. We are using ORY Kratos for authorization server and kratos doesn't even allow using localhost or 127.0.0.1 as origin: https://www.ory.sh/docs/guides/cors

So we have our forked version of self-hosted ory kratos, behind Ory's Oathkeeper reverse proxy.

Since we can't have a growing list of allowed origins there, only solution seems to have wildcard for allowed origins, but I need to check with the team if we can do that. cc @omeraplak

[BatuhanW]

Hello @rassie, a quick update. We discussed with @omeraplak and agreed to allow any port from localhost and 127.0.0.1 origins. We can also allow certain origins like GitHub codespaces if needed.

I tried to use wildcard for port as defined in OAuth spec and Google's match patterns doc, but it didn't work.

I'll take a look at it next week.

[godkama]

Hi! I'm having the same error and it would definitely help to allow GitHub codespaces as an origin.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[rassie]

@BatuhanW I still would like to have this, thank you!

[Om-GG]

I'm sending some love for this issue to be solved 💜🙏🏽

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[dhmw]

This issue is not stale - I'm also looking at running refine dev in a container next to my APIs all in the same compose stack. This is preventing the devtools from working.

Regards, Doug

[ShuviSchwarze]

Bumping this. My current development environment does not allow the project to be ran locally, options to expose the devtools like the --host option from vite would be nice

[aliemir]

We've released an update to the related Devtools packages and @refinedev/cli to allow Devtools to be used outside of localhost, with a custom port or a domain. 🙏