fix: make client-side env vriable being loadad at runtime-n

packages/dashboard/next.config.js

@@ -10,11 +10,6 @@ const nextConfig = {
     return config;
   },
   reactStrictMode: true,
-  env: {
-    NEXT_PUBLIC_INTERNAL_IP: INTERNAL_IP,
-    NEXT_PUBLIC_DOMAIN: DOMAIN,
-    NEXT_PUBLIC_PORT: NGINX_PORT,
-  },
   basePath: '/dashboard',
 };
 

packages/dashboard/src/hooks/useCachedRessources.ts

@@ -2,17 +2,20 @@ import { useEffect, useState } from 'react';
 import { ApolloClient } from '@apollo/client';
 import { createApolloClient } from '../core/apollo/client';
 import { useSystemStore } from '../state/systemStore';
+import useSWR, { BareFetcher } from 'swr';
+import { getUrl } from '../core/helpers/url-helpers';
 
 interface IReturnProps {
   client?: ApolloClient<unknown>;
   isLoadingComplete?: boolean;
 }
 
-export default function useCachedResources(): IReturnProps {
-  const ip = process.env.NEXT_PUBLIC_INTERNAL_IP;
-  const domain = process.env.NEXT_PUBLIC_DOMAIN;
-  const port = process.env.NEXT_PUBLIC_PORT;
+const fetcher: BareFetcher<any> = (url: string) => {
+  return fetch(getUrl(url)).then((res) => res.json());
+};
 
+export default function useCachedResources(): IReturnProps {
+  const { data } = useSWR<{ ip: string; domain: string; port: string }>('api/getenv', fetcher);
   const { baseUrl, setBaseUrl, setInternalIp, setDomain } = useSystemStore();
   const [isLoadingComplete, setLoadingComplete] = useState(false);
   const [client, setClient] = useState<ApolloClient<unknown>>();
@@ -31,6 +34,7 @@ export default function useCachedResources(): IReturnProps {
   }
 
   useEffect(() => {
+    const { ip, domain, port } = data || {};
     if (ip && !baseUrl) {
       setInternalIp(ip);
       setDomain(domain);
@@ -45,7 +49,7 @@ export default function useCachedResources(): IReturnProps {
         setBaseUrl(`https://${domain}/api`);
       }
     }
-  }, [baseUrl, setBaseUrl, setInternalIp, setDomain, ip, domain, port]);
+  }, [baseUrl, setBaseUrl, setInternalIp, setDomain, data]);
 
   useEffect(() => {
     if (baseUrl) {

packages/dashboard/src/pages/_app.tsx

@@ -9,12 +9,13 @@ import { ApolloProvider } from '@apollo/client';
 import useCachedResources from '../hooks/useCachedRessources';
 import Head from 'next/head';
 import StatusWrapper from '../components/StatusScreens/StatusWrapper';
+import LoadingScreen from '../components/LoadingScreen';
 
 function MyApp({ Component, pageProps }: AppProps) {
   const { client } = useCachedResources();
 
   if (!client) {
-    return null;
+    return <LoadingScreen />;
   }
 
   return (

packages/dashboard/src/pages/api/getenv.tsx

@@ -0,0 +1,9 @@
+export default function getEnv(_: any, res: any) {
+  const { INTERNAL_IP } = process.env;
+  const { NGINX_PORT } = process.env;
+  const { DOMAIN } = process.env;
+
+  console.log('super env', process.env);
+
+  res.status(200).json({ ip: INTERNAL_IP, domain: DOMAIN, port: NGINX_PORT });
+}