fix(builder): 🐛 Add public env var in runtime config

apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx

@@ -17,6 +17,11 @@ import { BaseEmoji, emojiIndex } from 'emoji-mart'
 import { emojis } from './emojis'
 import { Input } from '../Textbox/Input'
 import { isEmpty } from 'utils'
+import getConfig from 'next/config'
+
+const {
+  publicRuntimeConfig: { NEXT_PUBLIC_GIPHY_API_KEY },
+} = getConfig()
 
 type Props = {
   url?: string
@@ -183,12 +188,10 @@ const EmojiContent = ({
 }
 
 const GiphyContent = ({ onNewUrl }: ContentProps) => {
-  if (isEmpty(process.env.NEXT_PUBLIC_GIPHY_API_KEY))
+  if (isEmpty(NEXT_PUBLIC_GIPHY_API_KEY))
     return <Text>NEXT_PUBLIC_GIPHY_API_KEY is missing in environment</Text>
   return (
-    <SearchContextManager
+    <SearchContextManager apiKey={NEXT_PUBLIC_GIPHY_API_KEY}>
-      apiKey={process.env.NEXT_PUBLIC_GIPHY_API_KEY as string}
-    >
       <GiphySearch onSubmit={onNewUrl} />
     </SearchContextManager>
   )

apps/builder/components/theme/GeneralSettings/FontSelector/FontSelector.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { Text, HStack } from '@chakra-ui/react'
 import { SearchableDropdown } from '../../../shared/SearchableDropdown'
 import { isEmpty } from 'utils'
+import getConfig from 'next/config'
 
 type FontSelectorProps = {
   activeFont?: string
@@ -20,9 +21,12 @@ export const FontSelector = ({
   }, [])
 
   const fetchPopularFonts = async () => {
-    if (isEmpty(process.env.NEXT_PUBLIC_GOOGLE_API_KEY)) return []
+    const {
+      publicRuntimeConfig: { NEXT_PUBLIC_GOOGLE_API_KEY },
+    } = getConfig()
+    if (isEmpty(NEXT_PUBLIC_GOOGLE_API_KEY)) return []
     const response = await fetch(
-      `https://www.googleapis.com/webfonts/v1/webfonts?key=${process.env.NEXT_PUBLIC_GOOGLE_API_KEY}&sort=popularity`
+      `https://www.googleapis.com/webfonts/v1/webfonts?key=${NEXT_PUBLIC_GOOGLE_API_KEY}&sort=popularity`
     )
     return (await response.json()).items.map(
       (item: { family: string }) => item.family

apps/builder/next.config.js

@@ -6,6 +6,11 @@ const moduleExports = {
     outputStandalone: true,
   },
   optimizeFonts: false,
+  publicRuntimeConfig: {
+    NEXT_PUBLIC_GOOGLE_API_KEY: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
+    NEXT_PUBLIC_GIPHY_API_KEY: process.env.NEXT_PUBLIC_GIPHY_API_KEY,
+    NEXT_PUBLIC_STRIPE_PUBLIC_KEY: process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY,
+  },
 }
 
 const sentryWebpackPluginOptions = {

apps/builder/services/stripe.ts

@@ -1,6 +1,7 @@
 import { Plan, User } from 'db'
 import { loadStripe } from '@stripe/stripe-js/pure'
 import { isDefined, isEmpty, sendRequest } from 'utils'
+import getConfig from 'next/config'
 
 type Props = {
   user: User
@@ -39,7 +40,10 @@ const redirectToCheckout = async ({
   plan,
   workspaceId,
 }: Omit<Props, 'customerId'>) => {
-  if (isEmpty(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY))
+  const {
+    publicRuntimeConfig: { NEXT_PUBLIC_STRIPE_PUBLIC_KEY },
+  } = getConfig()
+  if (isEmpty(NEXT_PUBLIC_STRIPE_PUBLIC_KEY))
     throw new Error('NEXT_PUBLIC_STRIPE_PUBLIC_KEY is missing in env')
   const { data, error } = await sendRequest<{ sessionId: string }>({
     method: 'POST',
@@ -53,7 +57,7 @@ const redirectToCheckout = async ({
     },
   })
   if (error || !data) return
-  const stripe = await loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY)
+  const stripe = await loadStripe(NEXT_PUBLIC_STRIPE_PUBLIC_KEY)
   await stripe?.redirectToCheckout({
     sessionId: data?.sessionId,
   })