How to deploy Cross Origin LiveView?

Phoenix Forum Questions / Help
, ,
1

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.

1 Like
2

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
2 Likes
3

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.

4

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?

5

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"
  ]
6

Here is the blog post about it in case it helps someone Superfast Webapps using NextJS, Vercel, LiveView and Fly.io · aswinmohan.me

2 Likes