hyperdx cannot be deployed without rebuilding frontends

[etiennea]

Having to run build-local just to bake some environment vars into the UIs is very annoying. There is no reason the UIs cannot pull these at runtime from env vars like the backend does.

[MikeShi42]

Hi @etiennea definitely agree, unfortunately with Next.js it isn't super straightforward to have the variables baked dynamically and we have yet to find a straightforward solution to do so. We're open to ideas/approaches on how to improve this (or even PRs). We've evaluated using packages such as next-runtime-env and some other workarounds to no success so far.

Just linking this with #12 where we've had some prior conversations around this.

[lindesvard]

Had similar issues with openpanel and solved it with a custom entrypoint. Not the "cleanest" solutions but it works very well.

• Declare variables that will change: https://github.com/Openpanel-dev/openpanel/blob/main/apps/dashboard/Dockerfile#L56-L58
• Custom entrypoint: https://github.com/Openpanel-dev/openpanel/blob/main/apps/dashboard/Dockerfile#L98
• The entrypoint: https://github.com/Openpanel-dev/openpanel/blob/main/apps/dashboard/entrypoint.sh

[MikeShi42]

@lindesvard oh wow - I was thinking about this at one point... but was hoping we didn't need to resort to string replacement (and I was worried that we can't even do it correctly!). That being said that implementation is quite clever! I'm hoping that we can adopt https://github.com/hyperdxio/hyperdx/pull/498 into v2 for this purpose.

[jokester]

I'm guessing the /api/config API endpoint was to expose env variable to frontend, but I can see it has some strange inconsistency in different images.

In hyperdx-local:1.10.0 image the compiled code is:

.next/server/pages/api/config.js:1:"use strict";(()=>{var e={id:589,ids:[589]};e.modules={145:e=>{e.exports=require("next/dist/compiled/next-server/pages-api.runtime.prod.js")},7558:(e,r,s)=>{s.r(r),s.d(r,{config:()=>d,default:()=>p,routeModule:()=>u});var t={};s.r(t),s.d(t,{default:()=>l});var a=s(1802),o=s(7153),i=s(6249);const n=process.env.HYPERDX_API_KEY;process.env.NEXT_PUBLIC_IS_OSS,process.env.NEXT_PUBLIC_IS_LOCAL_MODE;

function l(e,r){r.status(200).json({apiKey:n,apiServerUrl:"http://localhost:8000",collectorUrl:"http://localhost:4318",serviceName:"hdx-oss-dev-app"})}

so env variable is not even read at runtime.

---

But in hyperdx:1.10.0-app image the compiled code below works (not perfectly though, see https://github.com/hyperdxio/hyperdx/issues/420 )

.next/server/pages/api/config.js:1:"use strict";(()=>{var e={id:589,ids:[589]};e.modules={145:e=>{e.exports=require("next/dist/compiled/next-server/pages-api.runtime.prod.js")},7558:(e,r,s)=>{s.r(r),s.d(r,{config:()=>_,default:()=>u,routeModule:()=>E});var o={};s.r(o),s.d(o,{default:()=>d});var t=s(1802),a=s(7153),n=s(6249);

const i=process.env.NEXT_PUBLIC_SERVER_URL||"http://localhost:8000",p=process.env.HYPERDX_API_KEY,l=process.env.NEXT_PUBLIC_OTEL_SERVICE_NAME||"hdx-oss-dev-app",c=process.env.NEXT_PUBLIC_OTEL_EXPORTER_OTLP_ENDPOINT||"http://localhost:4318";process.env.NEXT_PUBLIC_IS_OSS;

function d(e,r){r.status(200).json({apiKey:p,apiServerUrl:i,collectorUrl:c,serviceName:l})}

I wonder what caused the difference.