feat: prepare supporter self-hosting

apps/start/src/components/providers.tsx

@@ -12,21 +12,12 @@ import { ThemeProvider } from './theme-provider';
 export function Providers({ children }: { children: React.ReactNode }) {
   const storeRef = useRef<AppStore>(undefined);
   if (!storeRef.current) {
-    // Create the store instance the first time this renders
     storeRef.current = makeStore();
   }
 
   return (
     <NuqsAdapter>
       <ThemeProvider>
-        {/* {import.meta.env.VITE_OP_CLIENT_ID && (
-          <OpenPanelComponent
-            clientId={import.meta.env.VITE_OP_CLIENT_ID}
-            trackScreenViews
-            trackOutgoingLinks
-            trackAttributes
-          />
-        )} */}
         <ReduxProvider store={storeRef.current}>
           <TooltipProvider delayDuration={200}>
             {children}

apps/start/src/components/sidebar.tsx

@@ -1,13 +1,9 @@
+import { useAppContext } from '@/hooks/use-app-context';
 import { useTRPC } from '@/integrations/trpc/react';
 import { cn } from '@/utils/cn';
 import type { IServiceOrganization } from '@openpanel/db';
 import { useQuery } from '@tanstack/react-query';
-import {
-  Link,
-  useLocation,
-  useParams,
-  useRouteContext,
-} from '@tanstack/react-router';
+import { Link, useLocation, useParams } from '@tanstack/react-router';
 import { MenuIcon, XIcon } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { FeedbackButton } from './feedback-button';
@@ -81,6 +77,7 @@ export function SidebarContainer({
 }: SidebarContainerProps) {
   const [active, setActive] = useState(false);
   const location = useLocation();
+  const { isSelfHosted } = useAppContext();
 
   useEffect(() => {
     setActive(false);
@@ -135,7 +132,7 @@ export function SidebarContainer({
 
           <div className="mt-auto w-full ">
             <FeedbackButton />
-            {import.meta.env.VITE_SELF_HOSTED === 'true' && (
+            {isSelfHosted && (
               <div className={cn('text-sm w-full text-center')}>
                 Self-hosted instance
               </div>

apps/start/src/hooks/use-app-context.ts

@@ -5,12 +5,13 @@ export function useAppContext() {
     strict: false,
   });
 
-  if (!params.apiUrl || !params.dashboardUrl) {
+  if (!params.apiUrl || !params.dashboardUrl || !params.isSelfHosted) {
     throw new Error('API URL or dashboard URL is not set');
   }
 
   return {
     apiUrl: params.apiUrl,
     dashboardUrl: params.dashboardUrl,
+    isSelfHosted: params.isSelfHosted,
   };
 }

apps/start/src/routeTree.gen.ts

@@ -16,6 +16,8 @@ import { Route as PublicRouteImport } from './routes/_public'
 import { Route as LoginRouteImport } from './routes/_login'
 import { Route as AppRouteImport } from './routes/_app'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as ApiHealthcheckRouteImport } from './routes/api/healthcheck'
+import { Route as ApiConfigRouteImport } from './routes/api/config'
 import { Route as PublicOnboardingRouteImport } from './routes/_public.onboarding'
 import { Route as LoginResetPasswordRouteImport } from './routes/_login.reset-password'
 import { Route as LoginLoginRouteImport } from './routes/_login.login'
@@ -112,6 +114,16 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ApiHealthcheckRoute = ApiHealthcheckRouteImport.update({
+  id: '/api/healthcheck',
+  path: '/api/healthcheck',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiConfigRoute = ApiConfigRouteImport.update({
+  id: '/api/config',
+  path: '/api/config',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const PublicOnboardingRoute = PublicOnboardingRouteImport.update({
   id: '/onboarding',
   path: '/onboarding',
@@ -459,6 +471,8 @@ export interface FileRoutesByFullPath {
   '/login': typeof LoginLoginRoute
   '/reset-password': typeof LoginResetPasswordRoute
   '/onboarding': typeof PublicOnboardingRoute
+  '/api/config': typeof ApiConfigRoute
+  '/api/healthcheck': typeof ApiHealthcheckRoute
   '/$organizationId/$projectId': typeof AppOrganizationIdProjectIdRoute
   '/$organizationId/billing': typeof AppOrganizationIdBillingRoute
   '/$organizationId/settings': typeof AppOrganizationIdSettingsRoute
@@ -513,6 +527,8 @@ export interface FileRoutesByTo {
   '/login': typeof LoginLoginRoute
   '/reset-password': typeof LoginResetPasswordRoute
   '/onboarding': typeof PublicOnboardingRoute
+  '/api/config': typeof ApiConfigRoute
+  '/api/healthcheck': typeof ApiHealthcheckRoute
   '/$organizationId/$projectId': typeof AppOrganizationIdProjectIdRoute
   '/$organizationId/billing': typeof AppOrganizationIdBillingRoute
   '/$organizationId/settings': typeof AppOrganizationIdSettingsRoute
@@ -566,6 +582,8 @@ export interface FileRoutesById {
   '/_login/login': typeof LoginLoginRoute
   '/_login/reset-password': typeof LoginResetPasswordRoute
   '/_public/onboarding': typeof PublicOnboardingRoute
+  '/api/config': typeof ApiConfigRoute
+  '/api/healthcheck': typeof ApiHealthcheckRoute
   '/_app/$organizationId/$projectId': typeof AppOrganizationIdProjectIdRoute
   '/_app/$organizationId/billing': typeof AppOrganizationIdBillingRoute
   '/_app/$organizationId/settings': typeof AppOrganizationIdSettingsRoute
@@ -630,6 +648,8 @@ export interface FileRouteTypes {
     | '/login'
     | '/reset-password'
     | '/onboarding'
+    | '/api/config'
+    | '/api/healthcheck'
     | '/$organizationId/$projectId'
     | '/$organizationId/billing'
     | '/$organizationId/settings'
@@ -684,6 +704,8 @@ export interface FileRouteTypes {
     | '/login'
     | '/reset-password'
     | '/onboarding'
+    | '/api/config'
+    | '/api/healthcheck'
     | '/$organizationId/$projectId'
     | '/$organizationId/billing'
     | '/$organizationId/settings'
@@ -736,6 +758,8 @@ export interface FileRouteTypes {
     | '/_login/login'
     | '/_login/reset-password'
     | '/_public/onboarding'
+    | '/api/config'
+    | '/api/healthcheck'
     | '/_app/$organizationId/$projectId'
     | '/_app/$organizationId/billing'
     | '/_app/$organizationId/settings'
@@ -799,6 +823,8 @@ export interface RootRouteChildren {
   LoginRoute: typeof LoginRouteWithChildren
   PublicRoute: typeof PublicRouteWithChildren
   StepsRoute: typeof StepsRouteWithChildren
+  ApiConfigRoute: typeof ApiConfigRoute
+  ApiHealthcheckRoute: typeof ApiHealthcheckRoute
   ShareOverviewShareIdRoute: typeof ShareOverviewShareIdRoute
 }
 
@@ -839,6 +865,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/api/healthcheck': {
+      id: '/api/healthcheck'
+      path: '/api/healthcheck'
+      fullPath: '/api/healthcheck'
+      preLoaderRoute: typeof ApiHealthcheckRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/config': {
+      id: '/api/config'
+      path: '/api/config'
+      fullPath: '/api/config'
+      preLoaderRoute: typeof ApiConfigRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/_public/onboarding': {
       id: '/_public/onboarding'
       path: '/onboarding'
@@ -1631,6 +1671,8 @@ const rootRouteChildren: RootRouteChildren = {
   LoginRoute: LoginRouteWithChildren,
   PublicRoute: PublicRouteWithChildren,
   StepsRoute: StepsRouteWithChildren,
+  ApiConfigRoute: ApiConfigRoute,
+  ApiHealthcheckRoute: ApiHealthcheckRoute,
   ShareOverviewShareIdRoute: ShareOverviewShareIdRoute,
 }
 export const routeTree = rootRouteImport

apps/start/src/routes/__root.tsx

@@ -30,6 +30,7 @@ interface MyRouterContext {
   trpc: TRPCOptionsProxy<AppRouter>;
   apiUrl: string;
   dashboardUrl: string;
+  isSelfHosted: boolean;
 }
 
 export const Route = createRootRouteWithContext<MyRouterContext>()({

apps/start/src/routes/api/config.tsx

@@ -0,0 +1,19 @@
+import { Sidebar } from '@/components/sidebar';
+import { getServerEnvs } from '@/server/get-envs';
+import { Outlet, createFileRoute, redirect } from '@tanstack/react-router';
+
+// Nothing sensitive here, its client environment variables which is good for debugging
+export const Route = createFileRoute('/api/config')({
+  server: {
+    handlers: {
+      GET: async () => {
+        const envs = await getServerEnvs();
+        return new Response(JSON.stringify(envs), {
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        });
+      },
+    },
+  },
+});

apps/start/src/routes/api/healthcheck.tsx

@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/api/healthcheck')({
+  server: {
+    handlers: {
+      GET: async () => {
+        return new Response('OK');
+      },
+    },
+  },
+});

apps/start/src/server/get-envs.ts

@@ -7,6 +7,7 @@ export const getServerEnvs = createServerFn().handler(async () => {
     dashboardUrl: String(
       process.env.DASHBOARD_URL || process.env.NEXT_PUBLIC_DASHBOARD_URL,
     ),
+    isSelfHosted: process.env.SELF_HOSTED !== undefined,
   };
 
   return envs;