OP1.js on self-hosted instances

[supun-io]

The web script uses https://openpanel.dev/op1.js, and it would be ideal if there were a way to serve the .js file from our own domain. However, https://example-openpanel-instance.org/op1.js returns 404. Any workaround?

[coderabbitai[bot]]

A summary of the changes CodeRabbit can apply:

• Add a new API handler and route to serve op1.js with CORS and 24h caching (apps/api/src/controllers/misc.controller.ts, apps/api/src/routes/misc.router.ts), copy the built op1.js into the API container via apps/api/Dockerfile, route /op1.js through the self-hosting Caddyfile (self-hosting/caddy/Caddyfile.template), add a helpful onboarding comment (apps/start/src/components/onboarding/connect-web.tsx), and include usage and troubleshooting docs (docs/SELF_HOSTING_TRACKING_SCRIPT.md) so self-hosted OpenPanel instances can reliably serve the tracking script from their own domain.

• Add support for serving the tracking script from self-hosted instances by adding a new serveTrackingScript controller (apps/api/src/controllers/misc.controller.ts), registering a GET /op1.js route (apps/api/src/routes/misc.router.ts), including op1.js in the API Docker image (apps/api/Dockerfile), routing /op1.js through Caddy to the API (self-hosting/caddy/Caddyfile.template), and adding documentation, UI comment, and an implementation summary (docs/SELF_HOSTING_TRACKING_SCRIPT.md, apps/start/src/components/onboarding/connect-web.tsx, IMPLEMENTATION_SUMMARY.md).

• [ ] ✅ Create PR with these edits
• [ ] 📋 Get copyable edits

[lindesvard]

To go around this you could just use @openpanel/web sdk directly. Then this script will be compiled with your bundle.

This script is hosted on our public website (not the dashboard) but might be able to add it to the dashboard public folder as well.

[supun-io]

Thanks. For most deployments, we do use @openpanel/web, but there are some instances where we cannot do that (such as when using a blogging platform to embed the analytics code). So, it might be nice to have this JS file accessible through our self-hosted instance's domain. I wouldn't think it's a priority, but nice to have. Thanks for the awesome software!

[Karnak19]

If you are using NextJS, you can do it like this;

 async rewrites() {
    return [
      {
        source: "/op1.js",
        destination: "https://openpanel.dev/op1.js",
      },
  ]

<OpenPanelComponent
  cdnUrl="/op1.js"
/>

It works great on my side like so

[supun-io]

Hm, not familiar with NextJS, but this looks like proxying. I tried proxying with Caddy, but it did not work since openpanel.dev uses Cloudflare, and Cloudflare blocked those proxy requests. 🤔

[lindesvard]

op1.js script will be included in the next self-hosting dashboard (will be release this or next week)