Does not support non root path in UI

[remy-tiitre]

I tried to add Apache proxy infront of the SelenoidUI, but as the /events uri is hardcoded into JS it does not work. For example if your apache Proxy url is https://some.nice.server.url/selenoid/ that proxys to http://127.0.0.1:8080/ then it doesn't work.

[vania-pooh]

@remy-tiitre just to clarify what is the purpose of adding this proxy?

[remy-tiitre]

URL that developers/testers can remember. Besides when you run things conteinerized the IP can change as often as its needed to migrate it from one place to another.

[vania-pooh]

@remy-tiitre so what would you propose to do? I think we just need to somehow use relative URLs in JS.

[remy-tiitre]

I did not digg into source code very deeply. Just confirmed that the /events was apsolute path hardcoded into code. favicon is also failing which is a lesser of a problem. I think JS code should respect the location where its. Resource loading works just fine. I think that the DOM.fromEventSource does not need this / infront of the events either. So if it was ...DOM.fromEventSource("events",e... then it would work fine. Not 100% sure though. Maybe "./events" would be more correct as you have "./index.js" url in your code.

[remy-tiitre]

Well theres allways an option to use selenoid.nice.urld.name instead of the nice.urld.name/selenoid/

[lanwen]

Actually, hadn't had any thoughts about usage of the UI with non-root path, so it should be fixed :) Will try to do it today.

[lanwen]

Merged in master, so please try latest docker image. If it will not work, pls share your proxy config

[remy-tiitre]

Events are working, but the URLs at the top still assume that you are in a root folder (stats, vnc, logs). I have to check my proxy settings because on the first load it does not show the stats and capabilities block. I can see that the events come through though. When I click stats links it will show the blocks but goes to root folder.

[lanwen]

Its react router logic - it changes the url in browser without reload. Don't know how to make this changes relative

[lanwen]

@remy-tiitre some investigation says that it not so easy to implement. React-router doesn't provide out-of-the-box solution with a dynamic base path. So it will be much easier to use root location.

[remy-tiitre]

I don't think that its a serious issue as the incorrect URL does not hit the backend unless you go to address bar and hit enter. But it seems that I still have some issues with the proxy configuration. Not sure what it is. Will let you know.

[remy-tiitre]

There is one option I think, if you could configure the base href with config parameter. For example when you start selenoid-ui with -base=/selenoid/ parameter then the html that it generates has: head base href="/selenoid/" head added. This should fix those React-router links as well. At least its something you can test.

[lanwen]

Please provide environment to reproduce your case

[remy-tiitre]

What do you mean by environment. Right now Selenoid UI can't be run in non-root context. The events queue has been fixed but the UI still relies on being in root path. Check React Router documentation - https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string

I don't think that the basename can be detected dynamically. So one solution would be to provide it as environment variable when you start the container. That was the idea of my previous post.

[lanwen]

I mean how to setup proxy with non-root context. (Generally speaking, I know how to do this, but I don't remember exact configs and I ask you to simplify the setup process for me). Without such environment, I can't modify routes as it can break something

[lanwen]

Should be resolved with hash-based routing. Please reopen if not

[taraspos]

Hello. I'm trying to run selenoid-ui behind reverse proxy via traefik and it doesn't work with path-based routing. Everything seems to be fine with the host-based route.

version: '3'
services:
  selenoid:
    image: aerokube/selenoid:latest-release
    volumes:
      - "$PWD:/etc/selenoid"
      - "/var/run/docker.sock:/var/run/docker.sock"
      - "$PWD:/opt/selenoid/video"
    environment:
      - OVERRIDE_VIDEO_OUTPUT_DIR=$PWD
    command: ["-conf", "/etc/selenoid/browsers.json", "-video-output-dir", "/opt/selenoid/video"]
  selenoid-ui:
    image: "aerokube/selenoid-ui"
    command: ["--selenoid-uri", "http://selenoid:4444"]
    labels:
      - "traefik.backend=selenoid"
      - "traefik.frontend.rule=Path:/selenoid"
  jenkins:
    image: "jenkinsci/blueocean"
    environment:
      - SELENOID_URL=http://selenoid:4444
      - JENKINS_OPTS="--prefix=/jenkins"
    labels:
      - "traefik.backend=jenkins"
      - "traefik.frontend.rule=PathPrefix:/jenkins"
  traefik:
    image: traefik
    command: -c /dev/null --api --docker --logLevel=DEBUG
    ports:
      - "80:80"
      - "8080:8080"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock

$ curl  127.0.0.1/selenoid
404 page not found

$ curl  127.0.0.1/selenoid/
<a href="/selenoid">Moved Permanently</a>.

$ curl -v -L 127.0.0.1/selenoid/
...
< HTTP/1.1 301 Moved Permanently
< Location: /selenoid
< HTTP/1.1 404 Not Found

[lanwen]

I'm not really in traefik, but - "traefik.frontend.rule=Path:/selenoid" looks like you forgot some path rewrite and it just pass /selenoid to UI as is. I mean when you call /selenoid on traefik, it proxies this call to UI/selenoid and not to UI

[taraspos]

mm.. Using PathPrefixStrip:/selenoid opens ui, but /events doesn't work Error connecting to SSE http://127.0.0.1/events

Doc for traefik https://docs.traefik.io/basics/#matchers

[lanwen]

Hmm, yes, /events and /ws/ paths are hardcoded here:

• https://github.com/aerokube/selenoid-ui/blob/master/web/src/containers/Viewport/index.js#L125 (updates)
• https://github.com/aerokube/selenoid-ui/blob/master/web/src/components/Log/index.js#L52 (for logs)

and probably here:

• https://github.com/aerokube/selenoid-ui/blob/master/web/src/components/VncCard/VncScreen.js#L54 (for VNC)

should use always relative path then or provide some kind of prefix param to start with.

For now you are forced to handle /events and /ws/ paths as base traefik paths routing them to UI

[bianchi2]

Does anyone have a valid Nginx config to serve Selenoid UI on path like /selenoid?

[patjae]

Does anyone have a valid Nginx config to serve Selenoid UI on path like /selenoid?

+1 for this.

We have one tester here who wants to use Selenoid. Unfortunately it gets painful if we leave a local machine and don't want to expose a single instance setup to the world (in intranet ) and try to integrate it with nginx.

[evra]

Probably it has something to do with the react build configuration described here https://create-react-app.dev/docs/deployment/#building-for-relative-paths

According to this docs an attribute in the package.json may solve the issue

"homepage": ".",

[alkdese]

I'm having same problem when I attempt to expose moonui via Kubernetes ingress. Any workaround? In ingress I have a rule to relative path /moonui.