I'm trying to implement some apps using the new si...
# proj-extensions
w
I'm trying to implement some apps using the new sidecar architecture, and having some issues Background: • I host my canvas at
<http://canvas.rbren.io|canvas.rbren.io>
• Apps currently serve their SPAs in an iframe, served on a different port • Apps currently serve their backends also on a different port The problem is that agent-server credentials are stored in localStorage, so the iframe window can't access them. I also disallow traffic to arbitrary ports on
<http://canvas.rbren.io|canvas.rbren.io>
, so everything has to be proxied through OpenHands, or a special nginx route has to be set up for each app. Here's my suggestion: • When an app is installed, the backend sets up a proxy for
/apps/$app-name
, pointing to
localhost:$app-port
• This serves both frontend and backend • OpenHands decides the port (so we can avoid conflicts, e.g. two different apps trying to claim 3000). App must respect some env var like $OPENHANDS_PORT during setup • If the app wants to set up both a frontend and a backend, it can start a proxy server
l
Seems interesting, but is this an edge/corner case?
Or is it something that lots of users will encounter? I think we can open an issue but it may be low priority if it’s not something that’ll affect a lot of people
h
I think the shift is also in framing how the apps run. They are authenticated already with the agent server, or should be, so you can run whatever you need in your SPA. It also should not be in an iframe unless designed to be
c
Yes, I don't know why iframe
h
Apps are loaded by
loadCanvasExtensionModule()
. It turns the fetched ESM bundle into a Blob URL and dynamically imports it:
Copy code
await import(/* @vite-ignore */ moduleUrl);
Then the app calls the bundle’s required
activate(host)
export. Pages are injected into their route container through the extension’s registered
mount({ container, ... })
callback.
w
forget the iframe bit 🙂
the main thing is if we're standing up a server at
localhost:3456
to serve the app backend, there are a few issues: • requests are cross-origin • App developer is responsible for authentication • anyone running on a custom domain will need to add custom routing
if the agent-server backend serves as a proxy, a lot of these problems just magically go away
l
Got it, I see the issue. This should probably be handled by the agent-canvas ingress instead of the agent server though? Since we already have an ingress server
w
maybe...I think you want to dynamically provision the proxy though. i.e. if I install an app, start proxying from
/app/$app-name
to a specific port
and I think "app installation" happens in agent-server
l
Yeah, tbh I don’t think we have a great separation of concerns right now. Like why is automations a separate service in the first place?
nod 2
It might be worth thinking of how we architect more broadly
nod 1
c
agreed, in some analysis I made, I had to acknowledge that automations were initially designed for the cloud, and it’s a bit awkward or overkill on other backends