feat: move variables to the backendD

2024-09-18 00:02:06 +07:00 · 2024-09-18 00:02:06 +07:00 · 6de19e4a8b
parent 10363131e6
commit 6de19e4a8b
42 changed files with 260 additions and 165 deletions
--- a/apps/frontend/next.config.js
+++ b/apps/frontend/next.config.js
@ -20,12 +20,7 @@ const nextConfig = {
        hostname: '**',
      },
    ],
-  },
-  env: {
-    isBillingEnabled: String(!!process.env.STRIPE_PUBLISHABLE_KEY),
-    isGeneral: String(!!process.env.IS_GENERAL),
-    frontendUrl: String(process.env.FRONTEND_URL),
-  },
+  }
 };

 const plugins = [
--- a/apps/frontend/src/app/(site)/analytics/page.tsx
+++ b/apps/frontend/src/app/(site)/analytics/page.tsx
@ -1,20 +1,19 @@
-import { isGeneral } from '@gitroom/react/helpers/is.general';
-
 export const dynamic = 'force-dynamic';

 import { AnalyticsComponent } from '@gitroom/frontend/components/analytics/analytics.component';
 import { Metadata } from 'next';
 import { PlatformAnalytics } from '@gitroom/frontend/components/platform-analytics/platform.analytics';
+import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';

 export const metadata: Metadata = {
-  title: `${isGeneral() ? 'Postiz' : 'Gitroom'} Analytics`,
+  title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Analytics`,
  description: '',
 };

 export default async function Index() {
  return (
    <>
-      {isGeneral() ? <PlatformAnalytics /> : <AnalyticsComponent />}
+      {isGeneralServerSide() ? <PlatformAnalytics /> : <AnalyticsComponent />}
    </>
  );
 }
--- a/apps/frontend/src/app/(site)/billing/lifetime/page.tsx
+++ b/apps/frontend/src/app/(site)/billing/lifetime/page.tsx
@ -3,10 +3,10 @@ import { LifetimeDeal } from '@gitroom/frontend/components/billing/lifetime.deal
 export const dynamic = 'force-dynamic';

 import { Metadata } from 'next';
-import { isGeneral } from '@gitroom/react/helpers/is.general';
+import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';

 export const metadata: Metadata = {
-  title: `${isGeneral() ? 'Postiz' : 'Gitroom'} Lifetime deal`,
+  title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Lifetime deal`,
  description: '',
 };

--- a/apps/frontend/src/app/(site)/billing/page.tsx
+++ b/apps/frontend/src/app/(site)/billing/page.tsx
@ -1,12 +1,12 @@
-import { isGeneral } from '@gitroom/react/helpers/is.general';

 export const dynamic = 'force-dynamic';

 import { BillingComponent } from '@gitroom/frontend/components/billing/billing.component';
 import { Metadata } from 'next';
+import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';

 export const metadata: Metadata = {
-  title: `${isGeneral() ? 'Postiz' : 'Gitroom'} Billing`,
+  title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Billing`,
  description: '',
 };

--- a/apps/frontend/src/app/(site)/launches/page.tsx
+++ b/apps/frontend/src/app/(site)/launches/page.tsx
@ -1,12 +1,12 @@
-import { isGeneral } from '@gitroom/react/helpers/is.general';

 export const dynamic = 'force-dynamic';

 import {LaunchesComponent} from "@gitroom/frontend/components/launches/launches.component";
 import {Metadata} from "next";
+import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';

 export const metadata: Metadata = {
-  title: `${isGeneral() ? 'Postiz Calendar' : 'Gitroom Launches'}`,
+  title: `${isGeneralServerSide() ? 'Postiz Calendar' : 'Gitroom Launches'}`,
  description: '',
 }

--- a/apps/frontend/src/app/(site)/marketplace/buyer/page.tsx
+++ b/apps/frontend/src/app/(site)/marketplace/buyer/page.tsx
@ -2,10 +2,10 @@ import { Buyer } from '@gitroom/frontend/components/marketplace/buyer';

 export const dynamic = 'force-dynamic';
 import { Metadata } from 'next';
-import { isGeneral } from '@gitroom/react/helpers/is.general';
+import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';

 export const metadata: Metadata = {
-  title: `${isGeneral() ? 'Postiz' : 'Gitroom'} Marketplace`,
+  title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Marketplace`,
  description: '',
 };
 export default async function Index({
--- a/apps/frontend/src/app/(site)/marketplace/page.tsx
+++ b/apps/frontend/src/app/(site)/marketplace/page.tsx
@ -1,12 +1,12 @@
-import { isGeneral } from '@gitroom/react/helpers/is.general';

 export const dynamic = 'force-dynamic';
 import { Metadata } from 'next';
 import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';
+import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';

 export const metadata: Metadata = {
-  title: `${isGeneral() ? 'Postiz' : 'Gitroom'} Marketplace`,
+  title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Marketplace`,
  description: '',
 };
 export default async function Index({
--- a/apps/frontend/src/app/(site)/marketplace/seller/page.tsx
+++ b/apps/frontend/src/app/(site)/marketplace/seller/page.tsx
@ -2,10 +2,10 @@ import { Seller } from '@gitroom/frontend/components/marketplace/seller';

 export const dynamic = 'force-dynamic';
 import { Metadata } from 'next';
-import { isGeneral } from '@gitroom/react/helpers/is.general';
+import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';

 export const metadata: Metadata = {
-  title: `${isGeneral() ? 'Postiz' : 'Gitroom'} Marketplace`,
+  title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Marketplace`,
  description: '',
 };
 export default async function Index({
--- a/apps/frontend/src/app/(site)/messages/[id]/page.tsx
+++ b/apps/frontend/src/app/(site)/messages/[id]/page.tsx
@ -3,10 +3,10 @@ import { Messages } from '@gitroom/frontend/components/messages/messages';
 export const dynamic = 'force-dynamic';

 import { Metadata } from 'next';
-import { isGeneral } from '@gitroom/react/helpers/is.general';
+import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';

 export const metadata: Metadata = {
-  title: `${isGeneral() ? 'Postiz' : 'Gitroom'} Messages`,
+  title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Messages`,
  description: '',
 };

--- a/apps/frontend/src/app/(site)/messages/page.tsx
+++ b/apps/frontend/src/app/(site)/messages/page.tsx
@ -1,11 +1,11 @@
-import { isGeneral } from '@gitroom/react/helpers/is.general';

 export const dynamic = 'force-dynamic';

 import {Metadata} from "next";
+import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';

 export const metadata: Metadata = {
-  title: `${isGeneral() ? 'Postiz' : 'Gitroom'} Messages`,
+  title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Messages`,
  description: '',
 }

--- a/apps/frontend/src/app/(site)/settings/page.tsx
+++ b/apps/frontend/src/app/(site)/settings/page.tsx
@ -1,5 +1,3 @@
-import { isGeneral } from '@gitroom/react/helpers/is.general';
-
 export const dynamic = 'force-dynamic';

 import { SettingsComponent } from '@gitroom/frontend/components/settings/settings.component';
@ -7,9 +5,10 @@ import { internalFetch } from '@gitroom/helpers/utils/internal.fetch';
 import { redirect } from 'next/navigation';
 import { RedirectType } from 'next/dist/client/components/redirect';
 import { Metadata } from 'next';
+import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';

 export const metadata: Metadata = {
-  title: `${isGeneral() ? 'Postiz' : 'Gitroom'} Settings`,
+  title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Settings`,
  description: '',
 };
 export default async function Index({
--- a/apps/frontend/src/app/auth/activate/[code]/page.tsx
+++ b/apps/frontend/src/app/auth/activate/[code]/page.tsx
@ -1,12 +1,12 @@
-import { isGeneral } from '@gitroom/react/helpers/is.general';

 export const dynamic = 'force-dynamic';

 import { Metadata } from 'next';
 import { AfterActivate } from '@gitroom/frontend/components/auth/after.activate';
+import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';

 export const metadata: Metadata = {
-  title: `${isGeneral() ? 'Postiz' : 'Gitroom'} - Activate your account`,
+  title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} - Activate your account`,
  description: '',
 };

--- a/apps/frontend/src/app/auth/activate/page.tsx
+++ b/apps/frontend/src/app/auth/activate/page.tsx
@ -1,12 +1,12 @@
-import { isGeneral } from '@gitroom/react/helpers/is.general';

 export const dynamic = 'force-dynamic';

 import {Metadata} from "next";
 import { Activate } from '@gitroom/frontend/components/auth/activate';
+import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';

 export const metadata: Metadata = {
-  title: `${isGeneral() ? 'Postiz' : 'Gitroom'} - Activate your account`,
+  title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} - Activate your account`,
  description: '',
 };

--- a/apps/frontend/src/app/auth/forgot/[token]/page.tsx
+++ b/apps/frontend/src/app/auth/forgot/[token]/page.tsx
@ -1,12 +1,12 @@
-import { isGeneral } from '@gitroom/react/helpers/is.general';

 export const dynamic = 'force-dynamic';

 import { ForgotReturn } from '@gitroom/frontend/components/auth/forgot-return';
 import { Metadata } from 'next';
+import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';

 export const metadata: Metadata = {
-  title: `${isGeneral() ? 'Postiz' : 'Gitroom'} Forgot Password`,
+  title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Forgot Password`,
  description: '',
 };
 export default async function Auth(params: { params: { token: string } }) {
--- a/apps/frontend/src/app/auth/forgot/page.tsx
+++ b/apps/frontend/src/app/auth/forgot/page.tsx
@ -1,12 +1,12 @@
-import { isGeneral } from '@gitroom/react/helpers/is.general';

 export const dynamic = 'force-dynamic';

 import {Forgot} from "@gitroom/frontend/components/auth/forgot";
 import {Metadata} from "next";
+import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';

 export const metadata: Metadata = {
-  title: `${isGeneral() ? 'Postiz' : 'Gitroom'} Forgot Password`,
+  title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Forgot Password`,
  description: '',
 };

--- a/apps/frontend/src/app/auth/layout.tsx
+++ b/apps/frontend/src/app/auth/layout.tsx
@ -1,11 +1,10 @@
-import { isGeneral } from '@gitroom/react/helpers/is.general';
-
 export const dynamic = 'force-dynamic';

 import { ReactNode } from 'react';
 import Image from 'next/image';
 import clsx from 'clsx';
 import loadDynamic from 'next/dynamic';
+import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';
 const ReturnUrlComponent = loadDynamic(() => import('./return.url.component'));

 export default async function AuthLayout({
@ -22,15 +21,15 @@ export default async function AuthLayout({
          <div className="w-full relative">
            <div className="custom:fixed custom:text-left custom:left-[20px] custom:justify-start custom:top-[20px] absolute -top-[100px] text-textColor justify-center items-center w-full flex gap-[10px]">
              <Image
-                src={isGeneral() ? '/postiz.svg' : '/logo.svg'}
+                src={isGeneralServerSide() ? '/postiz.svg' : '/logo.svg'}
                width={55}
                height={53}
                alt="Logo"
              />
              <div
-                className={clsx(!isGeneral() ? 'mt-[12px]' : 'min-w-[80px]')}
+                className={clsx(!isGeneralServerSide() ? 'mt-[12px]' : 'min-w-[80px]')}
              >
-                {isGeneral() ? (
+                {isGeneralServerSide() ? (
                  <svg
                    width="80"
                    height="36.5"
--- a/apps/frontend/src/app/auth/login/page.tsx
+++ b/apps/frontend/src/app/auth/login/page.tsx
@ -1,12 +1,12 @@
-import { isGeneral } from '@gitroom/react/helpers/is.general';

 export const dynamic = 'force-dynamic';

 import {Login} from "@gitroom/frontend/components/auth/login";
 import {Metadata} from "next";
+import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';

 export const metadata: Metadata = {
-  title: `${isGeneral() ? 'Postiz' : 'Gitroom'} Login`,
+  title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Login`,
  description: '',
 };

--- a/apps/frontend/src/app/auth/page.tsx
+++ b/apps/frontend/src/app/auth/page.tsx
@ -1,12 +1,12 @@
-import { isGeneral } from '@gitroom/react/helpers/is.general';

 export const dynamic = 'force-dynamic';

 import { Register } from '@gitroom/frontend/components/auth/register';
 import { Metadata } from 'next';
+import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';

 export const metadata: Metadata = {
-  title: `${isGeneral() ? 'Postiz' : 'Gitroom'} Register`,
+  title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Register`,
  description: '',
 };

--- a/apps/frontend/src/app/layout.tsx
+++ b/apps/frontend/src/app/layout.tsx
@ -7,9 +7,9 @@ import '@copilotkit/react-ui/styles.css';
 import LayoutContext from '@gitroom/frontend/components/layout/layout.context';
 import { ReactNode } from 'react';
 import { Chakra_Petch } from 'next/font/google';
-import { isGeneral } from '@gitroom/react/helpers/is.general';
 import PlausibleProvider from 'next-plausible';
 import clsx from 'clsx';
+import { VariableContextComponent } from '@gitroom/react/helpers/variable.context';

 const chakra = Chakra_Petch({ weight: '400', subsets: ['latin'] });

@ -19,14 +19,26 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
      <head>
        <link
          rel="icon"
-          href={!isGeneral() ? '/favicon.png' : '/postiz-fav.png'}
+          href={!!process.env.IS_GENERAL ? '/favicon.png' : '/postiz-fav.png'}
          sizes="any"
        />
      </head>
      <body className={clsx(chakra.className, 'text-primary dark')}>
-        <PlausibleProvider domain={isGeneral() ? "postiz.com" : "gitroom.com"}>
-          <LayoutContext>{children}</LayoutContext>
-        </PlausibleProvider>
+        <VariableContextComponent
+          backendUrl={process.env.NEXT_PUBLIC_BACKEND_URL!}
+          plontoKey={process.env.NEXT_PUBLIC_POLOTNO!}
+          billingEnabled={!!process.env.STRIPE_PUBLISHABLE_KEY}
+          discordUrl={process.env.NEXT_PUBLIC_DISCORD_SUPPORT!}
+          frontEndUrl={process.env.FRONTEND_URL!}
+          isGeneral={!!process.env.IS_GENERAL}
+          uploadDirectory={process.env.NEXT_PUBLIC_UPLOAD_STATIC_DIRECTORY!}
+        >
+          <PlausibleProvider
+            domain={!!process.env.IS_GENERAL ? 'postiz.com' : 'gitroom.com'}
+          >
+            <LayoutContext>{children}</LayoutContext>
+          </PlausibleProvider>
+        </VariableContextComponent>
      </body>
    </html>
  );
--- a/apps/frontend/src/components/auth/login.tsx
+++ b/apps/frontend/src/components/auth/login.tsx
@ -10,8 +10,8 @@ import { classValidatorResolver } from '@hookform/resolvers/class-validator';
 import { LoginUserDto } from '@gitroom/nestjs-libraries/dtos/auth/login.user.dto';
 import { GithubProvider } from '@gitroom/frontend/components/auth/providers/github.provider';
 import interClass from '@gitroom/react/helpers/inter.font';
-import { isGeneral } from '@gitroom/react/helpers/is.general';
 import { GoogleProvider } from '@gitroom/frontend/components/auth/providers/google.provider';
+import { useVariables } from '@gitroom/react/helpers/variable.context';

 type Inputs = {
  email: string;
@ -22,6 +22,7 @@ type Inputs = {

 export function Login() {
  const [loading, setLoading] = useState(false);
+  const {isGeneral} = useVariables();
  const resolver = useMemo(() => {
    return classValidatorResolver(LoginUserDto);
  }, []);
@ -61,7 +62,7 @@ export function Login() {
          </h1>
        </div>

-        {!isGeneral() ? <GithubProvider /> : <GoogleProvider />}
+        {!isGeneral ? <GithubProvider /> : <GoogleProvider />}
        <div className="h-[20px] mb-[24px] mt-[24px] relative">
          <div className="absolute w-full h-[1px] bg-fifth top-[50%] -translate-y-[50%]" />
          <div
--- a/apps/frontend/src/components/billing/faq.component.tsx
+++ b/apps/frontend/src/components/billing/faq.component.tsx
@ -1,30 +1,35 @@
+'use client';
+
 import { FC, useCallback, useState } from 'react';
 import clsx from 'clsx';
 import interClass from '@gitroom/react/helpers/inter.font';
-import { isGeneral } from '@gitroom/react/helpers/is.general';
+import { useVariables } from '@gitroom/react/helpers/variable.context';

-const list = [
-  {
-    title: `Can I trust ${isGeneral() ? 'Postiz' : 'Gitroom'}?`,
-    description: `${isGeneral() ? 'Postiz' : 'Gitroom'} is proudly open-source! We believe in an ethical and transparent culture, meaning Postiz will live forever. You can check the entire code / or use it for your personal use. You can check the open-source repository click here.`,
-  },
-  {
-    title: 'What are channels?',
-    description: `${
-      isGeneral() ? 'Postiz' : 'Gitroom'
-    } allows you to schedule your posts between different channels.
+const useFaqList = () => {
+  const {isGeneral} = useVariables();
+  return [
+    {
+      title: `Can I trust ${isGeneral ? 'Postiz' : 'Gitroom'}?`,
+      description: `${isGeneral ? 'Postiz' : 'Gitroom'} is proudly open-source! We believe in an ethical and transparent culture, meaning Postiz will live forever. You can check the entire code / or use it for your personal use. You can check the open-source repository click here.`,
+    },
+    {
+      title: 'What are channels?',
+      description: `${
+        isGeneral ? 'Postiz' : 'Gitroom'
+      } allows you to schedule your posts between different channels.
 A channel is a publishing platform where you can schedule your posts.
 For example, you can schedule your posts on Twitter, Linkedin, DEV and Hashnode`,
-  },
-  {
-    title: 'What are team members?',
-    description: `If you have a team with multiple members, you can invite them to your workspace to collaborate on your posts and add their personal channels`,
-  },
-  {
-    title: 'What is AI auto-complete?',
-    description: `We automate ChatGPT to help you write your social posts and articles`,
-  },
-];
+    },
+    {
+      title: 'What are team members?',
+      description: `If you have a team with multiple members, you can invite them to your workspace to collaborate on your posts and add their personal channels`,
+    },
+    {
+      title: 'What is AI auto-complete?',
+      description: `We automate ChatGPT to help you write your social posts and articles`,
+    },
+  ];
+}

 export const FAQSection: FC<{ title: string; description: string }> = (
  props
@ -98,6 +103,7 @@ export const FAQSection: FC<{ title: string; description: string }> = (
 };

 export const FAQComponent: FC = () => {
+  const list = useFaqList();
  return (
    <div>
      <h3 className="text-[24px] text-center mt-[81px] mb-[40px]">
--- a/apps/frontend/src/components/billing/main.billing.component.tsx
+++ b/apps/frontend/src/components/billing/main.billing.component.tsx
@ -19,7 +19,7 @@ import { useSWRConfig } from 'swr';
 import { useUser } from '@gitroom/frontend/components/layout/user.context';
 import interClass from '@gitroom/react/helpers/inter.font';
 import { useRouter } from 'next/navigation';
-import { isGeneral } from '@gitroom/react/helpers/is.general';
+import { useVariables } from '@gitroom/react/helpers/variable.context';

 export interface Tiers {
  month: Array<{
@ -153,6 +153,7 @@ export const MainBillingComponent: FC<{
  sub?: Subscription;
 }> = (props) => {
  const { sub } = props;
+  const {isGeneral} = useVariables();
  const { mutate } = useSWRConfig();
  const fetch = useFetch();
  const toast = useToaster();
@ -329,7 +330,7 @@ export const MainBillingComponent: FC<{
      </div>
      <div className="flex gap-[16px]">
        {Object.entries(pricing)
-          .filter((f) => !isGeneral() || f[0] !== 'FREE')
+          .filter((f) => !isGeneral || f[0] !== 'FREE')
          .map(([name, values]) => (
            <div
              key={name}
@ -411,7 +412,7 @@ export const MainBillingComponent: FC<{
      {!!subscription?.id && (
        <div className="flex justify-center mt-[20px] gap-[10px]">
          <Button onClick={updatePayment}>Update Payment Method</Button>
-          {isGeneral() && !subscription?.cancelAt && (
+          {isGeneral && !subscription?.cancelAt && (
            <Button
              className="bg-red-500"
              loading={loading}
@ -422,7 +423,7 @@ export const MainBillingComponent: FC<{
          )}
        </div>
      )}
-      {subscription?.cancelAt && isGeneral() && (
+      {subscription?.cancelAt && isGeneral && (
        <div className="text-center">
          Your subscription will be cancel at{' '}
          {dayjs(subscription.cancelAt).local().format('D MMM, YYYY')}
--- a/apps/frontend/src/components/launches/add.provider.component.tsx
+++ b/apps/frontend/src/components/launches/add.provider.component.tsx
@ -10,7 +10,7 @@ import { classValidatorResolver } from '@hookform/resolvers/class-validator';
 import { ApiKeyDto } from '@gitroom/nestjs-libraries/dtos/integrations/api.key.dto';
 import { useRouter } from 'next/navigation';
 import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.title.component';
-import { isGeneral } from '@gitroom/react/helpers/is.general';
+import { useVariables } from '@gitroom/react/helpers/variable.context';

 const resolver = classValidatorResolver(ApiKeyDto);

@ -133,6 +133,7 @@ export const AddProviderComponent: FC<{
  update?: () => void;
 }> = (props) => {
  const { update } = props;
+  const {isGeneral} = useVariables();

  const fetch = useFetch();
  const modal = useModals();
@ -215,7 +216,7 @@ export const AddProviderComponent: FC<{
          ))}
        </div>
      </div>
-      {!isGeneral() && (
+      {!isGeneral && (
        <div className="flex flex-col">
          <h2 className="pb-[10px]">Articles</h2>
          <div className="grid grid-cols-3 gap-[10px]">
--- a/apps/frontend/src/components/launches/calendar.context.tsx
+++ b/apps/frontend/src/components/launches/calendar.context.tsx
@ -12,11 +12,10 @@ import {
  useState,
 } from 'react';
 import dayjs from 'dayjs';
-import useSWR, { useSWRConfig } from 'swr';
+import useSWR from 'swr';
 import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 import { Post, Integration } from '@prisma/client';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { isGeneral } from '@gitroom/react/helpers/is.general';
+import { useSearchParams } from 'next/navigation';
 import isoWeek from 'dayjs/plugin/isoWeek';
 import weekOfYear from 'dayjs/plugin/weekOfYear';

--- a/apps/frontend/src/components/launches/helpers/new.image.component.tsx
+++ b/apps/frontend/src/components/launches/helpers/new.image.component.tsx
@ -7,6 +7,7 @@ import {
  TextAreaTextApi,
 } from '@uiw/react-md-editor';
 import { showMediaBox } from '@gitroom/frontend/components/media/media.component';
+import { loadVars } from '@gitroom/react/helpers/variable.context';

 export const newImage: ICommand = {
  name: 'image',
@ -27,6 +28,7 @@ export const newImage: ICommand = {
    </svg>
  ),
  execute: (state: ExecuteState, api: TextAreaTextApi) => {
+    const {uploadDirectory, backendUrl} = loadVars();
    let newSelectionRange = selectWord({
      text: state.text,
      selection: state.selection,
@ -70,7 +72,7 @@ export const newImage: ICommand = {
            prefix: '![',
            suffix: `](${
              media.path.indexOf('http') === -1
-                ? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${process.env.NEXT_PUBLIC_UPLOAD_STATIC_DIRECTORY}`
+                ? `${backendUrl}/${uploadDirectory}`
                : ``
            }${media.path})`,
          });
@ -85,7 +87,7 @@ export const newImage: ICommand = {
          prefix: '![image',
          suffix: `](${
            media.path.indexOf('http') === -1
-              ? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${process.env.NEXT_PUBLIC_UPLOAD_STATIC_DIRECTORY}`
+              ? `${backendUrl}/${uploadDirectory}`
              : ``
          }${media.path})`,
        });
--- a/apps/frontend/src/components/launches/polonto.tsx
+++ b/apps/frontend/src/components/launches/polonto.tsx
@ -1,3 +1,5 @@
+'use client';
+
 import {
  createContext,
  FC,
@ -17,9 +19,12 @@ import { Button } from '@gitroom/react/form/button';
 import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 import { PictureGeneratorSection } from '@gitroom/frontend/components/launches/polonto/polonto.picture.generation';
 import { useUser } from '@gitroom/frontend/components/layout/user.context';
+import { loadVars } from '@gitroom/react/helpers/variable.context';

 const store = createStore({
-  key: process.env.NEXT_PUBLIC_POLOTNO!,
+  get key() {
+    return loadVars().plontoKey;
+  },
  showCredit: false,
 });

--- a/apps/frontend/src/components/layout/layout.context.tsx
+++ b/apps/frontend/src/components/layout/layout.context.tsx
@ -5,6 +5,7 @@ import { FetchWrapperComponent } from '@gitroom/helpers/utils/custom.fetch';
 import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
 import { isGeneral } from '@gitroom/react/helpers/is.general';
 import { useReturnUrl } from '@gitroom/frontend/app/auth/return.url.component';
+import { useVariables } from '@gitroom/react/helpers/variable.context';

 export default function LayoutContext(params: { children: ReactNode }) {
  if (params?.children) {
@ -16,6 +17,7 @@ export default function LayoutContext(params: { children: ReactNode }) {
 }
 function LayoutContextInner(params: { children: ReactNode }) {
  const returnUrl = useReturnUrl();
+  const {backendUrl, isGeneral} = useVariables();

  const afterRequest = useCallback(
    async (url: string, options: RequestInit, response: Response) => {
@ -32,7 +34,7 @@ function LayoutContextInner(params: { children: ReactNode }) {
      }

      if (response?.headers?.get('onboarding')) {
-        window.location.href = isGeneral()
+        window.location.href = isGeneral
          ? '/launches?onboarding=true'
          : '/analytics?onboarding=true';

@ -70,7 +72,7 @@ function LayoutContextInner(params: { children: ReactNode }) {

  return (
    <FetchWrapperComponent
-      baseUrl={process.env.NEXT_PUBLIC_BACKEND_URL!}
+      baseUrl={backendUrl}
      afterRequest={afterRequest}
    >
      {params?.children || <></>}
--- a/apps/frontend/src/components/layout/layout.settings.tsx
+++ b/apps/frontend/src/components/layout/layout.settings.tsx
@ -25,13 +25,13 @@ import { SettingsComponent } from '@gitroom/frontend/components/layout/settings.
 import { Onboarding } from '@gitroom/frontend/components/onboarding/onboarding';
 import { Support } from '@gitroom/frontend/components/layout/support';
 import { ContinueProvider } from '@gitroom/frontend/components/layout/continue.provider';
-import { isGeneral } from '@gitroom/react/helpers/is.general';
 import { CopilotKit } from '@copilotkit/react-core';
 import { Impersonate } from '@gitroom/frontend/components/layout/impersonate';
 import clsx from 'clsx';
 import { BillingComponent } from '@gitroom/frontend/components/billing/billing.component';
 import dynamic from 'next/dynamic';
 import { NewSubscription } from '@gitroom/frontend/components/layout/new.subscription';
+import { useVariables } from '@gitroom/react/helpers/variable.context';
 const ModeComponent = dynamic(
  () => import('@gitroom/frontend/components/layout/mode.component'),
  { ssr: false }
@ -44,6 +44,8 @@ dayjs.extend(isBetween);

 export const LayoutSettings = ({ children }: { children: ReactNode }) => {
  const fetch = useFetch();
+  const {isGeneral} = useVariables();
+  const {backendUrl, billingEnabled} = useVariables();
  const load = useCallback(async (path: string) => {
    return await (await fetch(path)).json();
  }, []);
@ -62,7 +64,7 @@ export const LayoutSettings = ({ children }: { children: ReactNode }) => {
    <ContextWrapper user={user}>
      <CopilotKit
        credentials="include"
-        runtimeUrl={process.env.NEXT_PUBLIC_BACKEND_URL + '/copilot/chat'}
+        runtimeUrl={backendUrl + '/copilot/chat'}
      >
        <ContextWrapper user={user}>
          <MantineWrapper>
@ -84,7 +86,7 @@ export const LayoutSettings = ({ children }: { children: ReactNode }) => {
                >
                  <div className="min-w-[55px]">
                    <Image
-                      src={isGeneral() ? '/postiz.svg' : '/logo.svg'}
+                      src={isGeneral ? '/postiz.svg' : '/logo.svg'}
                      width={55}
                      height={53}
                      alt="Logo"
@ -92,10 +94,10 @@ export const LayoutSettings = ({ children }: { children: ReactNode }) => {
                  </div>
                  <div
                    className={clsx(
-                      !isGeneral() ? 'mt-[12px]' : 'min-w-[80px]'
+                      !isGeneral ? 'mt-[12px]' : 'min-w-[80px]'
                    )}
                  >
-                    {isGeneral() ? (
+                    {isGeneral ? (
                      <svg
                        width="80"
                        height="167"
@ -125,7 +127,7 @@ export const LayoutSettings = ({ children }: { children: ReactNode }) => {
                    )}
                  </div>
                </Link>
-                {user?.orgId && (user.tier !== 'FREE' || !isGeneral() || process.env.isBillingEnabled === "false") ? (
+                {user?.orgId && (user.tier !== 'FREE' || !isGeneral || !billingEnabled) ? (
                  <TopMenu />
                ) : (
                  <div />
@ -139,7 +141,7 @@ export const LayoutSettings = ({ children }: { children: ReactNode }) => {
              </div>
              <div className="flex-1 flex">
                <div className="flex-1 rounded-3xl px-[23px] py-[17px] flex flex-col">
-                  {(user.tier === 'FREE' && isGeneral()) && process.env.isBillingEnabled === "true" ? (
+                  {(user.tier === 'FREE' && isGeneral) && billingEnabled ? (
                    <>
                      <div className="text-center mb-[20px] text-xl">
                        <h1 className="text-3xl">
--- a/apps/frontend/src/components/layout/logout.component.tsx
+++ b/apps/frontend/src/components/layout/logout.component.tsx
@ -1,10 +1,13 @@
-import { isGeneral } from '@gitroom/react/helpers/is.general';
+'use client';
+
 import { useCallback } from 'react';
 import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
 import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
+import { useVariables } from '@gitroom/react/helpers/variable.context';

 export const LogoutComponent = () => {
  const fetch = useFetch();
+  const {isGeneral} = useVariables();
  const logout = useCallback(async () => {
    if (await deleteDialog('Are you sure you want to logout?', 'Yes logout')) {
      await fetch('/user/logout', {
@ -15,5 +18,5 @@ export const LogoutComponent = () => {
    }
  }, []);

-  return <div className="text-red-400 cursor-pointer" onClick={logout}>Logout from {isGeneral() ? 'Postiz' : 'Gitroom'}</div>;
+  return <div className="text-red-400 cursor-pointer" onClick={logout}>Logout from {isGeneral ? 'Postiz' : 'Gitroom'}</div>;
 };
--- a/apps/frontend/src/components/layout/settings.component.tsx
+++ b/apps/frontend/src/components/layout/settings.component.tsx
@ -1,3 +1,5 @@
+'use client';
+
 import { useModals } from '@mantine/modals';
 import React, { FC, Ref, useCallback, useEffect, useMemo } from 'react';
 import { Input } from '@gitroom/react/form/input';
@ -12,12 +14,13 @@ import { useToaster } from '@gitroom/react/toaster/toaster';
 import { useSWRConfig } from 'swr';
 import clsx from 'clsx';
 import { TeamsComponent } from '@gitroom/frontend/components/settings/teams.component';
-import { isGeneral } from '@gitroom/react/helpers/is.general';
 import { useUser } from '@gitroom/frontend/components/layout/user.context';
 import { LogoutComponent } from '@gitroom/frontend/components/layout/logout.component';
 import { useSearchParams } from 'next/navigation';
+import { useVariables } from '@gitroom/react/helpers/variable.context';

 export const SettingsPopup: FC<{ getRef?: Ref<any> }> = (props) => {
+  const {isGeneral} = useVariables();
  const { getRef } = props;
  const fetch = useFetch();
  const toast = useToaster();
@ -191,7 +194,7 @@ export const SettingsPopup: FC<{ getRef?: Ref<any> }> = (props) => {
              <Button type="submit">Save</Button>
            </div>
          )}
-          {!!user?.tier?.team_members && isGeneral() && <TeamsComponent />}
+          {!!user?.tier?.team_members && isGeneral && <TeamsComponent />}
          {showLogout && <LogoutComponent />}
        </div>
      </form>
--- a/apps/frontend/src/components/layout/support.tsx
+++ b/apps/frontend/src/components/layout/support.tsx
@ -2,11 +2,13 @@

 import { EventEmitter } from 'events';
 import { useEffect, useState } from 'react';
+import { useVariables } from '@gitroom/react/helpers/variable.context';

 export const supportEmitter = new EventEmitter();

 export const Support = () => {
  const [show, setShow] = useState(true);
+  const {discordUrl} = useVariables();

  useEffect(() => {
    supportEmitter.on('change', setShow);
@ -15,11 +17,11 @@ export const Support = () => {
    }
  }, []);

-  if (!process.env.NEXT_PUBLIC_DISCORD_SUPPORT || !show) return null
+  if (!discordUrl || !show) return null
  return (
    <div
      className="bg-customColor39 w-[194px] h-[58px] fixed right-[20px] bottom-[20px] z-[500] text-[16px] text-customColor40 rounded-[30px] !rounded-br-[0] cursor-pointer flex justify-center items-center gap-[10px]"
-      onClick={() => window.open(process.env.NEXT_PUBLIC_DISCORD_SUPPORT)}
+      onClick={() => window.open(discordUrl)}
    >
      <div>
        <svg
--- a/apps/frontend/src/components/layout/title.tsx
+++ b/apps/frontend/src/components/layout/title.tsx
@ -2,10 +2,11 @@

 import {usePathname} from "next/navigation";
 import {useMemo} from "react";
-import {menuItems} from "@gitroom/frontend/components/layout/top.menu";
+import { useMenuItems } from '@gitroom/frontend/components/layout/top.menu';

 export const Title = () => {
    const path = usePathname();
+    const menuItems = useMenuItems();
    const currentTitle = useMemo(() => {
        return menuItems.find(item => path.indexOf(item.path) > -1)?.name;
    }, [path]);
--- a/apps/frontend/src/components/layout/top.menu.tsx
+++ b/apps/frontend/src/components/layout/top.menu.tsx
@ -5,36 +5,36 @@ import Link from 'next/link';
 import clsx from 'clsx';
 import { usePathname } from 'next/navigation';
 import { useUser } from '@gitroom/frontend/components/layout/user.context';
-import { isGeneral } from '@gitroom/react/helpers/is.general';
+import { useVariables } from '@gitroom/react/helpers/variable.context';

-const general = isGeneral();
-
-export const menuItems = [
-  ...(!general
-    ? [
+export const useMenuItems = () => {
+  const {isGeneral} = useVariables();
+  return [
+    ...(!isGeneral
+      ? [
        {
          name: 'Analytics',
          icon: 'analytics',
          path: '/analytics',
        },
      ]
-    : []),
-  {
-    name: isGeneral() ? 'Calendar' : 'Launches',
-    icon: 'launches',
-    path: '/launches',
-  },
-  ...(general
-    ? [
+      : []),
+    {
+      name: isGeneral ? 'Calendar' : 'Launches',
+      icon: 'launches',
+      path: '/launches',
+    },
+    ...(isGeneral
+      ? [
        {
          name: 'Analytics',
          icon: 'analytics',
          path: '/analytics',
        },
      ]
-    : []),
-  ...(!general
-    ? [
+      : []),
+    ...(!isGeneral
+      ? [
        {
          name: 'Settings',
          icon: 'settings',
@ -42,36 +42,39 @@ export const menuItems = [
          role: ['ADMIN', 'SUPERADMIN'],
        },
      ]
-    : []),
-  {
-    name: 'Marketplace',
-    icon: 'marketplace',
-    path: '/marketplace',
-  },
-  {
-    name: 'Messages',
-    icon: 'messages',
-    path: '/messages',
-  },
-  {
-    name: 'Billing',
-    icon: 'billing',
-    path: '/billing',
-    role: ['ADMIN', 'SUPERADMIN'],
-    requireBilling: true,
-  },
-];
+      : []),
+    {
+      name: 'Marketplace',
+      icon: 'marketplace',
+      path: '/marketplace',
+    },
+    {
+      name: 'Messages',
+      icon: 'messages',
+      path: '/messages',
+    },
+    {
+      name: 'Billing',
+      icon: 'billing',
+      path: '/billing',
+      role: ['ADMIN', 'SUPERADMIN'],
+      requireBilling: true,
+    },
+  ];
+}

 export const TopMenu: FC = () => {
  const path = usePathname();
  const user = useUser();
+  const {billingEnabled} = useVariables();
+  const menuItems = useMenuItems();

  return (
    <div className="flex flex-col h-full animate-normalFadeDown">
      <ul className="gap-5 flex flex-1 items-center text-[18px]">
        {menuItems
          .filter((f) => {
-            if (f.requireBilling && process.env.isBillingEnabled === 'false') {
+            if (f.requireBilling && !billingEnabled) {
              return false;
            }
            if (f.role) {
--- a/apps/frontend/src/components/onboarding/connect.channels.tsx
+++ b/apps/frontend/src/components/onboarding/connect.channels.tsx
@ -1,3 +1,5 @@
+'use client';
+
 import React, {
  FC,
  useCallback,
@ -15,10 +17,11 @@ import Image from 'next/image';
 import { Menu } from '@gitroom/frontend/components/launches/menu/menu';
 import { ApiModal } from '@gitroom/frontend/components/launches/add.provider.component';
 import { useRouter } from 'next/navigation';
-import { isGeneral } from '@gitroom/react/helpers/is.general';
+import { useVariables } from '@gitroom/react/helpers/variable.context';

 export const ConnectChannels: FC = () => {
  const fetch = useFetch();
+  const {isGeneral} = useVariables();
  const router = useRouter();
  const [identifier, setIdentifier] = useState<any>(undefined);
  const [popup, setPopups] = useState<undefined | string[]>(undefined);
@ -158,7 +161,7 @@ export const ConnectChannels: FC = () => {
              ))}
            </div>
          </div>
-          {!isGeneral() && (
+          {!isGeneral && (
            <div className="flex-1 flex flex-col p-[16px] gap-[10px]">
              <div className="text-[18px]">Publishing Platforms</div>
              <div className="grid grid-cols-3 gap-[16px]">
--- a/apps/frontend/src/components/onboarding/onboarding.tsx
+++ b/apps/frontend/src/components/onboarding/onboarding.tsx
@ -8,8 +8,7 @@ import { GithubOnboarding } from '@gitroom/frontend/components/onboarding/github
 import { SettingsPopup } from '@gitroom/frontend/components/layout/settings.component';
 import { Button } from '@gitroom/react/form/button';
 import { ConnectChannels } from '@gitroom/frontend/components/onboarding/connect.channels';
-import { isGeneral } from '@gitroom/react/helpers/is.general';
-import { AddAccount } from '@gitroom/frontend/components/marketplace/seller';
+import { useVariables } from '@gitroom/react/helpers/variable.context';

 export const Step: FC<{
  step: number;
@ -116,7 +115,8 @@ const SkipOnboarding: FC = () => {
 };
 const Welcome: FC = () => {
  const [seller, setSeller] = useState(false);
-  const [lastStep, setLastStep] = useState(isGeneral() ? 3 : 4);
+  const {isGeneral} = useVariables();
+  const [lastStep, setLastStep] = useState(isGeneral ? 3 : 4);
  const [step, setStep] = useState(1);
  const ref = useRef();
  const router = useRouter();
@ -148,7 +148,7 @@ const Welcome: FC = () => {

  const sellPosts = useCallback(() => {
    nextStep()();
-    setLastStep(isGeneral() ? 4 : 5);
+    setLastStep(isGeneral ? 4 : 5);
    setSeller(true);
  }, [step]);

@ -162,7 +162,7 @@ const Welcome: FC = () => {
      <div className="flex">
        <Step title="Profile" step={1} currentStep={step} lastStep={lastStep} />
        <StepSpace />
-        {!isGeneral() && (
+        {!isGeneral && (
          <>
            <Step
              title="Connect Github"
@ -175,18 +175,18 @@ const Welcome: FC = () => {
        )}
        <Step
          title="Connect Channels"
-          step={3 - (isGeneral() ? 1 : 0)}
+          step={3 - (isGeneral ? 1 : 0)}
          currentStep={step}
          lastStep={4}
        />
        <StepSpace />
-        <Step title="Finish" step={4 - (isGeneral() ? 1 : 0)} currentStep={step} lastStep={lastStep} />
+        <Step title="Finish" step={4 - (isGeneral ? 1 : 0)} currentStep={step} lastStep={lastStep} />
        {seller && (
          <>
            <StepSpace />
            <Step
              title="Sell Posts"
-              step={5- (isGeneral() ? 1 : 0)}
+              step={5- (isGeneral ? 1 : 0)}
              currentStep={step}
              lastStep={lastStep}
            />
@ -204,7 +204,7 @@ const Welcome: FC = () => {
          </div>
        </>
      )}
-      {step === 2 && !isGeneral() && (
+      {step === 2 && !isGeneral && (
        <div>
          <GithubOnboarding />
          <div className="flex justify-end gap-[8px]">
@ -213,7 +213,7 @@ const Welcome: FC = () => {
          </div>
        </div>
      )}
-      {step === 3 - (isGeneral() ? 1 : 0) && (
+      {step === 3 - (isGeneral ? 1 : 0) && (
        <div>
          <ConnectChannels />
          <div className="flex justify-end gap-[8px]">
@ -222,7 +222,7 @@ const Welcome: FC = () => {
          </div>
        </div>
      )}
-      {step === 4 - (isGeneral() ? 1 : 0) && (
+      {step === 4 - (isGeneral ? 1 : 0) && (
        <div className="items-center justify-center flex flex-col gap-[24px]">
          <div className="items-center justify-center flex flex-col">
            <img src="/success.svg" alt="success" />
@ -231,8 +231,8 @@ const Welcome: FC = () => {
            You are done, from here you can:
          </div>
          <div className="flex flex-col gap-[8px]">
-            <div className={clsx(isGeneral() ? "grid" : "grid grid-cols-2 gap-[8px]")}>
-              {!isGeneral() && (
+            <div className={clsx(isGeneral ? "grid" : "grid grid-cols-2 gap-[8px]")}>
+              {!isGeneral && (
                <Button onClick={goToAnalytics}>View Analytics</Button>
              )}
              <Button onClick={goToLaunches}>Schedule a new post</Button>
@ -245,7 +245,7 @@ const Welcome: FC = () => {
          </div>
        </div>
      )}
-      {step === 5 - (isGeneral() ? 1 : 0) && (
+      {step === 5 - (isGeneral ? 1 : 0) && (
        <div>
          <div className="text-[24px] mb-[24px]">To sell posts you would have to:</div>
          <ul>
@ -254,7 +254,7 @@ const Welcome: FC = () => {
          </ul>

          <div className="grid grid-cols-2 gap-[8px] mt-[24px]">
-            <Button onClick={() => setStep(isGeneral() ? 2 : 3)}>Go back to connect channels</Button>
+            <Button onClick={() => setStep(isGeneral ? 2 : 3)}>Go back to connect channels</Button>
            <Button onClick={connectBankAccount}>Move to the seller page to connect you bank</Button>
          </div>
        </div>
--- a/apps/frontend/src/components/settings/settings.component.tsx
+++ b/apps/frontend/src/components/settings/settings.component.tsx
@ -8,11 +8,10 @@ import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 import useSWR from 'swr';
 import { LoadingComponent } from '@gitroom/frontend/components/layout/loading';
 import { useRouter } from 'next/navigation';
-import { isGeneral } from '@gitroom/react/helpers/is.general';
-
-const general = isGeneral();
+import { useVariables } from '@gitroom/react/helpers/variable.context';

 export const SettingsComponent = () => {
+  const {isGeneral} = useVariables();
  const user = useUser();
  const router = useRouter();

@ -53,7 +52,7 @@ export const SettingsComponent = () => {

  return (
    <div className="flex flex-col gap-[68px]">
-      {!general && (
+      {!isGeneral && (
        <div className="flex flex-col">
          <h3 className="text-[20px]">Your Git Repository</h3>
          <div className="text-customColor18 mt-[4px]">
--- a/apps/frontend/src/middleware.ts
+++ b/apps/frontend/src/middleware.ts
@ -2,7 +2,6 @@ import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
 import { fetchBackend } from '@gitroom/helpers/utils/custom.fetch.func';
 import { removeSubdomain } from '@gitroom/helpers/subdomain/subdomain.management';
-import { isGeneral } from '@gitroom/react/helpers/is.general';

 // This function can be marked `async` if using `await` inside
 export async function middleware(request: NextRequest) {
@ -92,7 +91,7 @@ export async function middleware(request: NextRequest) {

    if (nextUrl.pathname === '/') {
      return NextResponse.redirect(
-        new URL(isGeneral() ? '/launches' : `/analytics`, nextUrl.href)
+        new URL(!!process.env.IS_GENERAL ? '/launches' : `/analytics`, nextUrl.href)
      );
    }

--- a/libraries/helpers/src/utils/custom.fetch.func.ts
+++ b/libraries/helpers/src/utils/custom.fetch.func.ts
@ -1,3 +1,5 @@
+import { loadVars } from '@gitroom/react/helpers/variable.context';
+
 export interface Params {
  baseUrl: string;
  beforeRequest?: (url: string, options: RequestInit) => Promise<RequestInit>;
@ -45,5 +47,7 @@ export const customFetch = (
 };

 export const fetchBackend = customFetch({
-  baseUrl: process.env.NEXT_PUBLIC_BACKEND_URL!,
+  get baseUrl() {
+    return loadVars().backendUrl;
+  },
 });
--- a/libraries/helpers/src/utils/is.general.server.side.ts
+++ b/libraries/helpers/src/utils/is.general.server.side.ts
@ -0,0 +1,3 @@
+export const isGeneralServerSide = () => {
+  return !!process.env.IS_GENERAL;
+}
--- a/libraries/react-shared-libraries/src/helpers/is.general.tsx
+++ b/libraries/react-shared-libraries/src/helpers/is.general.tsx
@ -1,3 +1,5 @@
+import { loadVars } from './variable.context';
+
 export const isGeneral = () => {
-  return process.env.isGeneral === 'true';
+  return typeof process.env.IS_GENERAL === 'undefined' ? !!process.env.IS_GENERAL : loadVars?.()?.isGeneral;
 }
--- a/libraries/react-shared-libraries/src/helpers/use.media.directory.ts
+++ b/libraries/react-shared-libraries/src/helpers/use.media.directory.ts
@ -1,11 +1,13 @@
 import {useCallback} from "react";
+import { useVariables } from './variable.context';

 export const useMediaDirectory = () => {
+    const {backendUrl, uploadDirectory} = useVariables();
    const set = useCallback((path: string) => {
        if (path.indexOf('https') === 0) {
            return path;
        }
-        return `${process.env.NEXT_PUBLIC_BACKEND_URL}/${process.env.NEXT_PUBLIC_UPLOAD_STATIC_DIRECTORY}${path}`;
+        return `${backendUrl}/${uploadDirectory}${path}`;
    }, []);

    return {
--- a/libraries/react-shared-libraries/src/helpers/variable.context.tsx
+++ b/libraries/react-shared-libraries/src/helpers/variable.context.tsx
@ -0,0 +1,48 @@
+'use client';
+
+import { createContext, FC, ReactNode, useContext, useEffect } from 'react';
+
+interface VariableContextInterface {
+  billingEnabled: boolean;
+  isGeneral: boolean;
+  frontEndUrl: string;
+  plontoKey: string;
+  backendUrl: string;
+  discordUrl: string;
+  uploadDirectory: string;
+}
+const VariableContext = createContext({
+  billingEnabled: false,
+  isGeneral: true,
+  frontEndUrl: '',
+  plontoKey: '',
+  backendUrl: '',
+  discordUrl: '',
+  uploadDirectory: '',
+} as VariableContextInterface);
+
+export const VariableContextComponent: FC<
+  VariableContextInterface & { children: ReactNode }
+> = (props) => {
+  const { children, ...otherProps } = props;
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      // @ts-ignore
+      window.vars = otherProps;
+    }
+  }, []);
+  return (
+    <VariableContext.Provider value={otherProps}>
+      {children}
+    </VariableContext.Provider>
+  );
+};
+
+export const useVariables = () => {
+  return useContext(VariableContext);
+}
+
+export const loadVars = () => {
+  // @ts-ignore
+  return window.vars as VariableContextInterface;
+}