Live Dashboard behind a reverse proxy not working under a namespace

Phoenix Forum Questions / Help
1

this is the standard definition in a phoenix 1.6.2 project

socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]]

in livedashboard docs it asks to add socket "/live", Phoenix.LiveView.Socket

and in live dashboard source it has <html lang="en" phx-socket="/live">

my phoenix app is behind a reverse proxy and has a scope app defined all pathe works as /app/<some request> so /live/websocket does not work from the live dashboard.

I tried changing it to socket "/app/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]] but it still tries to connect to /live/websocket. Is there any other setting required to make this live view socket work under a namespace as I would be setting up some page with live view and they would also require the correct scoped paths.

2

found in app.js
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
changed to
let liveSocket = new LiveSocket("/app/live", Socket, {params: {_csrf_token: csrfToken}})

still fails so some place else as well needs update ?

3

i am a bit lost as this socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]] doesn’t seem to have any link to the socket defined in app.js and also i can define multiple socket in my endpoints.ex. So a beginner with live view what am i missing on, any links or guides to read ? :grimacing:

4

also are there any guides on running live dashboard under a namespace like /app/live instead of hardwired /live

5

First of all, this is about general liveView, not live Dashboard, right? Live Dashboard is usually mounted on /dashboard

To mount live view in a non-standard position you need to change both the server side and the client side:

I would recommend not to change the route. Also, you may want to avoiding hard coding the liveview path in javascript, because you most likely still want the liveview to work at root path in dev. My solution is to stash the url to a data attribute in the html and let the javascript side find it.

6

by adding path: "/app" to the :url the socket path works as /app/live but on Live Dashboard it updates the url in browser window with a duplicated /app
localhost/app/dashboard → localhost/app/app/dashboard

7

I am following this adding path to url config solves the socket issue but the routes being generated in Live Dashboard kind of “break” with duplicated subdirectory in them. I can access the Live Dashboard at /app/dashboard so request is going well from nginx to phoenix and router matches and loads the dashboard but then the url generated in dashboard are not as they should be

8

defining a new socket for /app/live and use a socket /live for LiveDashboard seem to make both work with dashboard under the namespace. for now will just use that . Thanks @derek-zhou for your input

9

Would you mind sharing the relevant part of the code/config? I’m facing a similar issue (Phoenix application behind AWS ALB) and I think it will help me.

Thanks!

10

endpoint.ex

  socket "/live", Phoenix.LiveView.Socket,
    websocket: [connect_info: [session: @session_options]]#,
    # longpoll: true

  socket "/app/live", Phoenix.LiveView.Socket,
    websocket: [connect_info: [session: @session_options]]#,
    # longpoll: true

app.js

et liveSocket = new LiveSocket("/app/live", Socket, {params: {_csrf_token: csrfToken}//,
//transport: LongPoll})

route.ex

  import Phoenix.LiveDashboard.Router

  scope "/app" do
    pipe_through [:browser, :log, :basic_auth]

    live_dashboard "/dashboard",
      metrics: AppWeb.Telemetry,
      ecto_repos: [App.Repo],
      ecto_psql_extras_options: [long_running_queries: [threshold: "200 milliseconds"]]
  end
1 Like