How to deploy Cross Origin LiveView?

TLDR;
How do I deploy a LiveView app such that I want the WebSocket to be hosted on a separate domain than the deployed app? I want my app liveview.com app to access the websockets on wss://notliveview.com/live.

I have changed my app.js to point to the full website, but the LiveView crashes and infinitely refreshes. I have changed the check_origin: policy to false and set session_options as, but still it does not connect. I can see on the network inspector that the cookie is not set when accessing wss://notliveview.com from a website hosted on liveview.com.

  @session_options [
    store: :cookie,
    key: "_app_web_key",
    signing_salt: "ARodNYY",
    same_site: "None",
    secure: true
  ]

Why ?

I have a monolithic Phoenix LiveView that currently serves the landing, privacy policy and terms-of-service from a single server. I also want to create a new blog, and I want to split it from the monolithic app and deploy it as a static site.

I have deployed my Phoenix LiveView app on Fly and the new marketing site (generated using a static site generator on Vercel). I’m planning to use Vercel as the front-facing website. When a person visits your site, it first checks if it matches the Vercel ones and if it doesn’t the rest of the request is reverse proxied through next.config.js: Rewrites | Next.js through to the LiveView app.

It works fine for apps over HTTP, but does not work with Websockets because of the above issue, any pointers would be really helpful.

Entirely different domains will not share cookies, ever. You have 2 choices:

  • set the cookie on a apex domain and check the cookie in a sub-domain
  • forget about cookies and sessions all together
1 Like

I control the domain so I think I can go with the first option. So I have liveview.com as the apex domain on vercel and app.liveview.com as the websocket URL. I have to set the cookie on the apex domain liveview.com and have the cookie read on app.liveview.com.

Do I need to set the cookie by Vercel or can my LiveView create that apex level cookie ? And how do I read that from my liveview app ?

Thanks for the pointers.

I only know how to do it if both are using phoenix. Basically you just use the same secret_key_base on both sides.

In my understanding, vercel is a static site host; you cannot use a cookie session. So I’d think you have to use the second way?

It worked!, Thank you so much, I had been working on this for the past two days and was so close to giving up. I had tried everything except that same domain thing.

The cookie gets automatically set by the live endpoint, and everything works like a charm, Auth, Sessions all. Thanks again :smiley:

Here is the config for the future people

  @session_options [
    store: :cookie,
    key: "_indie_paper_key",
    signing_salt: "eNoZacmO",
    domain: "rootdomain.com"
  ]