Revert "fix(docker): 🐛 Runtime public environment"

This reverts commit e03fe9f7d9.
2022-06-22 07:21:02 +02:00
parent e03fe9f7d9
commit 3e47b37c2e
54 changed files with 164 additions and 349 deletions
--- a/apps/builder/.env.docker
+++ b/apps/builder/.env.docker
@@ -1,7 +1,7 @@
 # Don't edit this file
-NEXT_PUBLIC_VIEWER_URL=
-NEXT_PUBLIC_SMTP_FROM=
-NEXT_PUBLIC_GOOGLE_API_KEY=
-NEXT_PUBLIC_GIPHY_API_KEY=
-NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
-NEXT_PUBLIC_SENTRY_DSN=
+NEXT_PUBLIC_VIEWER_URL=DOCKER_NEXT_PUBLIC_VIEWER_URL
+NEXT_PUBLIC_SMTP_FROM=DOCKER_NEXT_PUBLIC_SMTP_FROM
+NEXT_PUBLIC_GOOGLE_API_KEY=DOCKER_NEXT_PUBLIC_GOOGLE_API_KEY
+NEXT_PUBLIC_GIPHY_API_KEY=DOCKER_NEXT_PUBLIC_GIPHY_API_KEY
+NEXT_PUBLIC_STRIPE_PUBLIC_KEY=DOCKER_NEXT_PUBLIC_STRIPE_PUBLIC_KEY
+NEXT_PUBLIC_SENTRY_DSN=DOCKER_NEXT_PUBLIC_SENTRY_DSN
--- a/apps/builder/components/share/ShareContent.tsx
+++ b/apps/builder/components/share/ShareContent.tsx
@@ -20,7 +20,6 @@ import { isDefined, isNotDefined } from 'utils'
 import { CustomDomainsDropdown } from './customDomain/CustomDomainsDropdown'
 import { EditableUrl } from './EditableUrl'
 import { integrationsList } from './integrations/EmbedButton'
-import { env } from 'utils'

 export const ShareContent = () => {
  const { workspace } = useWorkspace()
@@ -59,7 +58,9 @@ export const ShareContent = () => {
          </Heading>
          {typebot && (
            <EditableUrl
-              hostname={env('VIEWER_URL') ?? 'https://typebot.io'}
+              hostname={
+                process.env.NEXT_PUBLIC_VIEWER_URL ?? 'https://typebot.io'
+              }
              pathname={publicId}
              onPathnameChange={handlePublicIdChange}
            />
--- a/apps/builder/components/share/codeSnippets/Chat/EmbedCode.tsx
+++ b/apps/builder/components/share/codeSnippets/Chat/EmbedCode.tsx
@@ -5,7 +5,7 @@ import { BubbleParams } from 'typebot-js'
 import { parseInitBubbleCode, typebotJsHtml } from '../params'
 import { useTypebot } from 'contexts/TypebotContext'
 import { CodeEditor } from 'components/shared/CodeEditor'
-import { env, isEmpty } from 'utils'
+import { isEmpty } from 'utils'

 type ChatEmbedCodeProps = {
  withStarterVariables?: boolean
@@ -21,9 +21,9 @@ export const ChatEmbedCode = ({
  const snippet = prettier.format(
    createSnippet({
      url: `${
-        isEmpty(env('VIEWER_INTERNAL_URL'))
-          ? env('VIEWER_URL')
-          : env('VIEWER_INTERNAL_URL')
+        isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
+          ? process.env.NEXT_PUBLIC_VIEWER_URL
+          : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
      }/${typebot?.publicId}`,
      button,
      proactiveMessage,
--- a/apps/builder/components/share/codeSnippets/Container/EmbedCode.tsx
+++ b/apps/builder/components/share/codeSnippets/Container/EmbedCode.tsx
@@ -5,7 +5,7 @@ import { parseInitContainerCode, typebotJsHtml } from '../params'
 import { IframeParams } from 'typebot-js'
 import { useTypebot } from 'contexts/TypebotContext'
 import { CodeEditor } from 'components/shared/CodeEditor'
-import { env, isEmpty } from 'utils'
+import { isEmpty } from 'utils'

 type ContainerEmbedCodeProps = {
  widthLabel: string
@@ -23,9 +23,9 @@ export const ContainerEmbedCode = ({
  const snippet = prettier.format(
    parseSnippet({
      url: `${
-        isEmpty(env('VIEWER_INTERNAL_URL'))
-          ? env('VIEWER_URL')
-          : env('VIEWER_INTERNAL_URL')
+        isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
+          ? process.env.NEXT_PUBLIC_VIEWER_URL
+          : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
      }/${typebot?.publicId}`,
      heightLabel,
      widthLabel,
--- a/apps/builder/components/share/codeSnippets/Iframe/EmbedCode.tsx
+++ b/apps/builder/components/share/codeSnippets/Iframe/EmbedCode.tsx
@@ -1,7 +1,7 @@
 import { FlexProps } from '@chakra-ui/react'
 import { CodeEditor } from 'components/shared/CodeEditor'
 import { useTypebot } from 'contexts/TypebotContext'
-import { env, isEmpty } from 'utils'
+import { isEmpty } from 'utils'

 type Props = {
  widthLabel: string
@@ -14,9 +14,9 @@ export const IframeEmbedCode = ({
 }: Props & FlexProps) => {
  const { typebot } = useTypebot()
  const src = `${
-    isEmpty(env('VIEWER_INTERNAL_URL'))
-      ? env('VIEWER_URL')
-      : env('VIEWER_INTERNAL_URL')
+    isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
+      ? process.env.NEXT_PUBLIC_VIEWER_URL
+      : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
  }/${typebot?.publicId}`
  const code = `<iframe src="${src}" width="${widthLabel}" height="${heightLabel}" />`

--- a/apps/builder/components/share/codeSnippets/Popup/EmbedCode.tsx
+++ b/apps/builder/components/share/codeSnippets/Popup/EmbedCode.tsx
@@ -4,7 +4,7 @@ import { useTypebot } from 'contexts/TypebotContext'
 import parserHtml from 'prettier/parser-html'
 import prettier from 'prettier/standalone'
 import { PopupParams } from 'typebot-js'
-import { env, isEmpty } from 'utils'
+import { isEmpty } from 'utils'
 import { parseInitPopupCode, typebotJsHtml } from '../params'

 type PopupEmbedCodeProps = {
@@ -18,9 +18,9 @@ export const PopupEmbedCode = ({ delay }: PopupEmbedCodeProps & FlexProps) => {
  const snippet = prettier.format(
    createSnippet({
      url: `${
-        isEmpty(env('VIEWER_INTERNAL_URL'))
-          ? env('VIEWER_URL')
-          : env('VIEWER_INTERNAL_URL')
+        isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
+          ? process.env.NEXT_PUBLIC_VIEWER_URL
+          : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
      }/${typebot?.publicId}`,
      delay,
    }),
--- a/apps/builder/components/share/codeSnippets/ReactCode.tsx
+++ b/apps/builder/components/share/codeSnippets/ReactCode.tsx
@@ -10,7 +10,7 @@ import parserBabel from 'prettier/parser-babel'
 import prettier from 'prettier/standalone'
 import { CodeEditor } from 'components/shared/CodeEditor'
 import { useTypebot } from 'contexts/TypebotContext'
-import { env, isEmpty } from 'utils'
+import { isEmpty } from 'utils'

 type StandardReactDivProps = { widthLabel: string; heightLabel: string }
 export const StandardReactDiv = ({
@@ -21,9 +21,9 @@ export const StandardReactDiv = ({
  const snippet = prettier.format(
    parseContainerSnippet({
      url: `${
-        isEmpty(env('VIEWER_INTERNAL_URL'))
-          ? env('VIEWER_URL')
-          : env('VIEWER_INTERNAL_URL')
+        isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
+          ? process.env.NEXT_PUBLIC_VIEWER_URL
+          : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
      }/${typebot?.publicId}`,
      heightLabel,
      widthLabel,
@@ -73,9 +73,9 @@ export const PopupReactCode = ({ delay }: PopupEmbedCodeProps & FlexProps) => {
  const snippet = prettier.format(
    parsePopupSnippet({
      url: `${
-        isEmpty(env('VIEWER_INTERNAL_URL'))
-          ? env('VIEWER_URL')
-          : env('VIEWER_INTERNAL_URL')
+        isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
+          ? process.env.NEXT_PUBLIC_VIEWER_URL
+          : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
      }/${typebot?.publicId}`,
      delay,
    }),
@@ -124,9 +124,9 @@ export const ChatReactCode = ({
  const snippet = prettier.format(
    parseBubbleSnippet({
      url: `${
-        isEmpty(env('VIEWER_INTERNAL_URL'))
-          ? env('VIEWER_URL')
-          : env('VIEWER_INTERNAL_URL')
+        isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
+          ? process.env.NEXT_PUBLIC_VIEWER_URL
+          : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
      }/${typebot?.publicId}`,
      button,
      proactiveMessage,
--- a/apps/builder/components/share/customDomain/CustomDomainModal.tsx
+++ b/apps/builder/components/share/customDomain/CustomDomainModal.tsx
@@ -18,7 +18,7 @@ import {
 import { useToast } from 'components/shared/hooks/useToast'
 import { useEffect, useRef, useState } from 'react'
 import { createCustomDomain } from 'services/user'
-import { env, isEmpty } from 'utils'
+import { isEmpty } from 'utils'

 const hostnameRegex =
  /^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9])$/
@@ -118,9 +118,9 @@ export const CustomDomainModal = ({
                    <Stack>
                      <Text fontWeight="bold">Value</Text>
                      <Text>
-                        {isEmpty(env('VIEWER_INTERNAL_URL'))
-                          ? env('VIEWER_URL')
-                          : env('VIEWER_INTERNAL_URL')}
+                        {isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
+                          ? process.env.NEXT_PUBLIC_VIEWER_URL
+                          : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL}
                      </Text>
                    </Stack>
                  </HStack>
--- a/apps/builder/components/share/integrations/modals/GtmModal/GtmInstructions.tsx
+++ b/apps/builder/components/share/integrations/modals/GtmModal/GtmInstructions.tsx
@@ -11,7 +11,7 @@ import { PopupEmbedSettings } from 'components/share/codeSnippets/Popup/EmbedSet
 import { CodeEditor } from 'components/shared/CodeEditor'
 import { useState } from 'react'
 import { BubbleParams } from 'typebot-js'
-import { env, isEmpty } from 'utils'
+import { isEmpty } from 'utils'
 import { ModalProps } from '../../EmbedButton'

 type GtmInstructionsProps = {
@@ -41,9 +41,9 @@ const StandardInstructions = ({ publicId }: Pick<ModalProps, 'publicId'>) => {

  const jsCode = parseInitContainerCode({
    url: `${
-      isEmpty(env('VIEWER_INTERNAL_URL'))
-        ? env('VIEWER_URL')
-        : env('VIEWER_INTERNAL_URL')
+      isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
+        ? process.env.NEXT_PUBLIC_VIEWER_URL
+        : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
    }/${publicId}`,
  })
  const headCode = `${typebotJsHtml}
--- a/apps/builder/components/share/integrations/modals/NotionModal.tsx
+++ b/apps/builder/components/share/integrations/modals/NotionModal.tsx
@@ -16,7 +16,7 @@ import {
 } from '@chakra-ui/react'
 import { CopyButton } from 'components/shared/buttons/CopyButton'
 import { PublishFirstInfo } from 'components/shared/Info'
-import { env, isEmpty } from 'utils'
+import { isEmpty } from 'utils'
 import { ModalProps } from '../EmbedButton'

 export const NotionModal = ({
@@ -46,17 +46,17 @@ export const NotionModal = ({
                  pr="4.5rem"
                  type={'text'}
                  defaultValue={`${
-                    isEmpty(env('VIEWER_INTERNAL_URL'))
-                      ? env('VIEWER_URL')
-                      : env('VIEWER_INTERNAL_URL')
+                    isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
+                      ? process.env.NEXT_PUBLIC_VIEWER_URL
+                      : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
                  }/${publicId}`}
                />
                <InputRightElement width="4.5rem">
                  <CopyButton
                    textToCopy={`${
-                      isEmpty(env('VIEWER_INTERNAL_URL'))
-                        ? env('VIEWER_URL')
-                        : env('VIEWER_INTERNAL_URL')
+                      isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
+                        ? process.env.NEXT_PUBLIC_VIEWER_URL
+                        : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
                    }/${publicId}`}
                  />
                </InputRightElement>
--- a/apps/builder/components/share/integrations/modals/ShopifyModal/ShopifyInstructions.tsx
+++ b/apps/builder/components/share/integrations/modals/ShopifyModal/ShopifyInstructions.tsx
@@ -14,7 +14,7 @@ import { BubbleParams } from 'typebot-js'
 import { ModalProps } from '../../EmbedButton'
 import parserHtml from 'prettier/parser-html'
 import prettier from 'prettier/standalone'
-import { env, isEmpty } from 'utils'
+import { isEmpty } from 'utils'

 type ShopifyInstructionsProps = {
  type: 'standard' | 'popup' | 'bubble'
@@ -46,9 +46,9 @@ const StandardInstructions = ({ publicId }: Pick<ModalProps, 'publicId'>) => {

  const jsCode = parseInitContainerCode({
    url: `${
-      isEmpty(env('VIEWER_INTERNAL_URL'))
-        ? env('VIEWER_URL')
-        : env('VIEWER_INTERNAL_URL')
+      isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
+        ? process.env.NEXT_PUBLIC_VIEWER_URL
+        : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
    }/${publicId}`,
  })
  const headCode = prettier.format(
--- a/apps/builder/components/share/integrations/modals/WordpressModal.tsx
+++ b/apps/builder/components/share/integrations/modals/WordpressModal.tsx
@@ -17,7 +17,7 @@ import {
 import { ExternalLinkIcon } from 'assets/icons'
 import { CopyButton } from 'components/shared/buttons/CopyButton'
 import { PublishFirstInfo } from 'components/shared/Info'
-import { env, isEmpty } from 'utils'
+import { isEmpty } from 'utils'
 import { ModalProps } from '../EmbedButton'

 export const WordpressModal = ({
@@ -55,17 +55,17 @@ export const WordpressModal = ({
                  pr="4.5rem"
                  type={'text'}
                  defaultValue={`${
-                    isEmpty(env('VIEWER_INTERNAL_URL'))
-                      ? env('VIEWER_URL')
-                      : env('VIEWER_INTERNAL_URL')
+                    isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
+                      ? process.env.NEXT_PUBLIC_VIEWER_URL
+                      : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
                  }/${publicId}`}
                />
                <InputRightElement width="4.5rem">
                  <CopyButton
                    textToCopy={`${
-                      isEmpty(env('VIEWER_INTERNAL_URL'))
-                        ? env('VIEWER_URL')
-                        : env('VIEWER_INTERNAL_URL')
+                      isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
+                        ? process.env.NEXT_PUBLIC_VIEWER_URL
+                        : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
                    }/${publicId}`}
                  />
                </InputRightElement>
--- a/apps/builder/components/shared/CodeEditor.tsx
+++ b/apps/builder/components/shared/CodeEditor.tsx
@@ -9,7 +9,7 @@ import { useDebouncedCallback } from 'use-debounce'
 import { linter } from '@codemirror/lint'
 import { VariablesButton } from './buttons/VariablesButton'
 import { Variable } from 'models'
-import { env } from 'utils'
+import { isEmpty } from 'utils'

 const linterExtension = linter(jsonParseLinter())

@@ -43,7 +43,7 @@ export const CodeEditor = ({
      setPlainTextValue(value)
      onChange && onChange(value)
    },
-    env('E2E_TEST') === 'enabled' ? 0 : debounceTimeout
+    isEmpty(process.env.NEXT_PUBLIC_E2E_TEST) ? debounceTimeout : 0
  )

  useEffect(
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/SendEmailSettings/SendEmailSettings.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/SendEmailSettings/SendEmailSettings.tsx
@@ -12,7 +12,6 @@ import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
 import { Input, Textarea } from 'components/shared/Textbox'
 import { CredentialsType, SendEmailOptions } from 'models'
 import React, { useState } from 'react'
-import { env } from 'utils'
 import { SmtpConfigModal } from './SmtpConfigModal'

 type Props = {
@@ -97,9 +96,9 @@ export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
          currentCredentialsId={options.credentialsId}
          onCredentialsSelect={handleCredentialsSelect}
          onCreateNewClick={onOpen}
-          defaultCredentialLabel={env('SMTP_FROM')
-            ?.match(/\<(.*)\>/)
-            ?.pop()}
+          defaultCredentialLabel={process.env.NEXT_PUBLIC_SMTP_FROM?.match(
+            /\<(.*)\>/
+          )?.pop()}
          refreshDropdownKey={refreshCredentialsKey}
        />
      </Stack>
--- a/apps/builder/components/shared/ImageUploadContent/GiphySearch.tsx
+++ b/apps/builder/components/shared/ImageUploadContent/GiphySearch.tsx
@@ -4,13 +4,14 @@ import { Grid, SearchContext } from '@giphy/react-components'
 import { GiphyLogo } from 'assets/logos'
 import React, { useContext, useState, useEffect } from 'react'
 import { useDebounce } from 'use-debounce'
-import { env } from 'utils'

 type GiphySearchProps = {
  onSubmit: (url: string) => void
 }

-const giphyFetch = new GiphyFetch(env('GIPHY_API_KEY') as string)
+const giphyFetch = new GiphyFetch(
+  process.env.NEXT_PUBLIC_GIPHY_API_KEY as string
+)

 export const GiphySearch = ({ onSubmit }: GiphySearchProps) => {
  const { fetchGifs, searchKey, setSearch } = useContext(SearchContext)
--- a/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx
+++ b/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx
@@ -16,7 +16,12 @@ import { useTypebot } from 'contexts/TypebotContext'
 import { BaseEmoji, emojiIndex } from 'emoji-mart'
 import { emojis } from './emojis'
 import { Input } from '../Textbox/Input'
-import { env, isEmpty } from 'utils'
+import { isEmpty } from 'utils'
+import getConfig from 'next/config'
+
+const {
+  publicRuntimeConfig: { NEXT_PUBLIC_GIPHY_API_KEY },
+} = getConfig()

 type Props = {
  url?: string
@@ -183,10 +188,10 @@ const EmojiContent = ({
 }

 const GiphyContent = ({ onNewUrl }: ContentProps) => {
-  if (isEmpty(env('GIPHY_API_KEY')))
+  if (isEmpty(NEXT_PUBLIC_GIPHY_API_KEY))
    return <Text>NEXT_PUBLIC_GIPHY_API_KEY is missing in environment</Text>
  return (
-    <SearchContextManager apiKey={env('GIPHY_API_KEY') as string}>
+    <SearchContextManager apiKey={NEXT_PUBLIC_GIPHY_API_KEY}>
      <GiphySearch onSubmit={onNewUrl} />
    </SearchContextManager>
  )
--- a/apps/builder/components/shared/SearchableDropdown.tsx
+++ b/apps/builder/components/shared/SearchableDropdown.tsx
@@ -13,7 +13,7 @@ import {
 import { Variable } from 'models'
 import { useState, useRef, useEffect, ChangeEvent } from 'react'
 import { useDebouncedCallback } from 'use-debounce'
-import { env } from 'utils'
+import { isEmpty } from 'utils'
 import { VariablesButton } from './buttons/VariablesButton'

 type Props = {
@@ -38,7 +38,7 @@ export const SearchableDropdown = ({
  const debounced = useDebouncedCallback(
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    onValueChange ? onValueChange : () => {},
-    env('E2E_TEST') === 'enabled' ? 0 : debounceTimeout
+    isEmpty(process.env.NEXT_PUBLIC_E2E_TEST) ? debounceTimeout : 0
  )
  const [filteredItems, setFilteredItems] = useState([
    ...items
--- a/apps/builder/components/shared/SmartNumberInput.tsx
+++ b/apps/builder/components/shared/SmartNumberInput.tsx
@@ -8,7 +8,7 @@ import {
 } from '@chakra-ui/react'
 import { useEffect, useState } from 'react'
 import { useDebouncedCallback } from 'use-debounce'
-import { env } from 'utils'
+import { isEmpty } from 'utils'

 export const SmartNumberInput = ({
  value,
@@ -23,7 +23,7 @@ export const SmartNumberInput = ({
  const [currentValue, setCurrentValue] = useState(value?.toString() ?? '')
  const debounced = useDebouncedCallback(
    onValueChange,
-    env('E2E_TEST') === 'enabled' ? 0 : debounceTimeout
+    isEmpty(process.env.NEXT_PUBLIC_E2E_TEST) ? debounceTimeout : 0
  )

  useEffect(
--- a/apps/builder/components/shared/Textbox/TextBox.tsx
+++ b/apps/builder/components/shared/Textbox/TextBox.tsx
@@ -7,7 +7,7 @@ import {
 import { Variable } from 'models'
 import React, { ChangeEvent, useEffect, useRef, useState } from 'react'
 import { useDebouncedCallback } from 'use-debounce'
-import { env } from 'utils'
+import { isEmpty } from 'utils'
 import { VariablesButton } from '../buttons/VariablesButton'

 export type TextBoxProps = {
@@ -36,7 +36,7 @@ export const TextBox = ({
    (value) => {
      onChange(value)
    },
-    env('E2E_TEST') === 'enabled' ? 0 : debounceTimeout
+    isEmpty(process.env.NEXT_PUBLIC_E2E_TEST) ? debounceTimeout : 0
  )

  useEffect(() => {
--- a/apps/builder/components/shared/VariableSearchInput.tsx
+++ b/apps/builder/components/shared/VariableSearchInput.tsx
@@ -17,7 +17,7 @@ import cuid from 'cuid'
 import { Variable } from 'models'
 import React, { useState, useRef, ChangeEvent, useEffect } from 'react'
 import { useDebouncedCallback } from 'use-debounce'
-import { byId, env, isNotDefined } from 'utils'
+import { byId, isEmpty, isNotDefined } from 'utils'

 type Props = {
  initialVariableId?: string
@@ -47,7 +47,7 @@ export const VariableSearchInput = ({
      const variable = variables.find((v) => v.name === value)
      if (variable) onSelectVariable(variable)
    },
-    env('E2E_TEST') === 'enabled' ? 0 : debounceTimeout
+    isEmpty(process.env.NEXT_PUBLIC_E2E_TEST) ? debounceTimeout : 0
  )
  const [filteredItems, setFilteredItems] = useState<Variable[]>(
    variables ?? []
--- a/apps/builder/components/theme/GeneralSettings/FontSelector/FontSelector.tsx
+++ b/apps/builder/components/theme/GeneralSettings/FontSelector/FontSelector.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react'
 import { Text, HStack } from '@chakra-ui/react'
 import { SearchableDropdown } from '../../../shared/SearchableDropdown'
-import { env, isEmpty } from 'utils'
+import { isEmpty } from 'utils'
+import getConfig from 'next/config'

 type FontSelectorProps = {
  activeFont?: string
@@ -20,11 +21,12 @@ export const FontSelector = ({
  }, [])

  const fetchPopularFonts = async () => {
-    if (isEmpty(env('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=${env(
-        '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
--- a/apps/builder/contexts/TypebotContext/TypebotContext.tsx
+++ b/apps/builder/contexts/TypebotContext/TypebotContext.tsx
@@ -29,7 +29,7 @@ import {
 } from 'services/typebots/typebots'
 import { fetcher, preventUserFromRefreshing } from 'services/utils'
 import useSWR from 'swr'
-import { env, isDefined, isNotDefined, omit } from 'utils'
+import { isDefined, isEmpty, isNotDefined, omit } from 'utils'
 import { GroupsActions, groupsActions } from './actions/groups'
 import { blocksAction, BlocksActions } from './actions/blocks'
 import { variablesAction, VariablesActions } from './actions/variables'
@@ -395,7 +395,7 @@ export const useFetchedTypebot = ({
    },
    Error
  >(`/api/typebots/${typebotId}`, fetcher, {
-    dedupingInterval: env('E2E_TEST') === 'enabled' ? 0 : undefined,
+    dedupingInterval: isEmpty(process.env.NEXT_PUBLIC_E2E_TEST) ? undefined : 0,
  })
  if (error) onError(error)
  return {
--- a/apps/builder/next.config.js
+++ b/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 = {
--- a/apps/builder/package.json
+++ b/apps/builder/package.json
@@ -4,7 +4,7 @@
  "license": "AGPL-3.0-or-later",
  "scripts": {
    "dx": "yarn dev",
-    "dev": "ENVSH_ENV=.env.local bash ../../env.sh next dev -p 3000",
+    "dev": "next dev -p 3000",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
--- a/apps/builder/pages/_document.tsx
+++ b/apps/builder/pages/_document.tsx
@@ -22,8 +22,6 @@ class MyDocument extends Document {
            rel="stylesheet"
          />
          <meta name="google" content="notranslate" />
-          {/* eslint-disable-next-line @next/next/no-sync-scripts */}
-          <script src="/__env.js" />
        </Head>
        <body>
          <Main />
--- a/apps/builder/pages/api/auth/[...nextauth].ts
+++ b/apps/builder/pages/api/auth/[...nextauth].ts
@@ -11,7 +11,7 @@ import { NextApiRequest, NextApiResponse } from 'next'
 import { withSentry } from '@sentry/nextjs'
 import { CustomAdapter } from './adapter'
 import { User } from 'db'
-import { env, isNotEmpty } from 'utils'
+import { isNotEmpty } from 'utils'

 const providers: Provider[] = []

@@ -23,7 +23,10 @@ if (isNotEmpty(process.env.GITHUB_CLIENT_ID))
    })
  )

-if (isNotEmpty(env('SMTP_FROM')) && process.env.SMTP_AUTH_DISABLED !== 'true')
+if (
+  isNotEmpty(process.env.NEXT_PUBLIC_SMTP_FROM) &&
+  process.env.SMTP_AUTH_DISABLED !== 'true'
+)
  providers.push(
    EmailProvider({
      server: {
@@ -35,7 +38,7 @@ if (isNotEmpty(env('SMTP_FROM')) && process.env.SMTP_AUTH_DISABLED !== 'true')
        },
        ignoreTLS: process.env.SMTP_IGNORE_TLS === 'true',
      },
-      from: env('SMTP_FROM'),
+      from: process.env.NEXT_PUBLIC_SMTP_FROM,
    })
  )

--- a/apps/builder/pages/api/typebots/[typebotId]/invitations.ts
+++ b/apps/builder/pages/api/typebots/[typebotId]/invitations.ts
@@ -8,8 +8,8 @@ import { sendEmailNotification } from 'services/api/emails'
 import { getAuthenticatedUser } from 'services/api/utils'
 import {
  badRequest,
-  env,
  forbidden,
+  isEmpty,
  methodNotAllowed,
  notAuthenticated,
 } from 'utils'
@@ -66,7 +66,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
      await prisma.invitation.create({
        data: { email: email.toLowerCase(), type, typebotId },
      })
-    if (env('E2E_TEST') !== 'enabled')
+    if (isEmpty(process.env.NEXT_PUBLIC_E2E_TEST))
      await sendEmailNotification({
        to: email,
        subject: "You've been invited to collaborate 🤝",
--- a/apps/builder/playwright/tests/results.spec.ts
+++ b/apps/builder/playwright/tests/results.spec.ts
@@ -8,7 +8,6 @@ import path from 'path'
 import {
  createResults,
  createTypebots,
-  freeWorkspaceId,
  importTypebotInDatabase,
  parseDefaultGroupWithBlock,
 } from '../services/database'
@@ -124,7 +123,7 @@ test.describe('Results page', () => {
    test("Incomplete results shouldn't be displayed", async ({ page }) => {
      await prisma.typebot.update({
        where: { id: typebotId },
-        data: { workspaceId: freeWorkspaceId },
+        data: { workspaceId: 'free' },
      })
      await page.goto(`/typebots/${typebotId}/results`)
      await page.click('text=Unlock')
--- a/apps/builder/playwright/tests/settings.spec.ts
+++ b/apps/builder/playwright/tests/settings.spec.ts
@@ -2,7 +2,7 @@ import test, { expect } from '@playwright/test'
 import cuid from 'cuid'
 import { defaultTextInputOptions } from 'models'
 import path from 'path'
-import { freeWorkspaceId, importTypebotInDatabase } from '../services/database'
+import { importTypebotInDatabase } from '../services/database'
 import { typebotViewer } from '../services/selectorUtils'

 test.describe.parallel('Settings page', () => {
@@ -127,7 +127,7 @@ test.describe.parallel('Settings page', () => {
        path.join(__dirname, '../fixtures/typebots/settings.json'),
        {
          id: typebotId,
-          workspaceId: freeWorkspaceId,
+          workspaceId: 'free',
        }
      )
      await page.goto(`/typebots/${typebotId}/settings`)
--- a/apps/builder/services/api/dbRules.ts
+++ b/apps/builder/services/api/dbRules.ts
@@ -1,7 +1,7 @@
 import { CollaborationType, Plan, Prisma, User, WorkspaceRole } from 'db'
 import prisma from 'libs/prisma'
 import { NextApiResponse } from 'next'
-import { env, forbidden, isNotEmpty } from 'utils'
+import { forbidden, isNotEmpty } from 'utils'

 const parseWhereFilter = (
  typebotIds: string[] | string,
@@ -22,7 +22,7 @@ const parseWhereFilter = (
      id: typeof typebotIds === 'string' ? typebotIds : { in: typebotIds },
      workspace:
        (type === 'read' && user.email === process.env.ADMIN_EMAIL) ||
-        isNotEmpty(env('E2E_TEST'))
+        isNotEmpty(process.env.NEXT_PUBLIC_E2E_TEST)
          ? undefined
          : {
              members: {
--- a/apps/builder/services/api/emails.ts
+++ b/apps/builder/services/api/emails.ts
@@ -1,5 +1,4 @@
 import { createTransport } from 'nodemailer'
-import { env } from 'utils'

 export const sendEmailNotification = ({
  to,
@@ -20,7 +19,7 @@ export const sendEmailNotification = ({
  })

  return transporter.sendMail({
-    from: env('SMTP_FORM'),
+    from: process.env.NEXT_PUBLIC_SMTP_FROM,
    to,
    subject,
    html: content,
--- a/apps/builder/services/folders.ts
+++ b/apps/builder/services/folders.ts
@@ -2,7 +2,7 @@ import { DashboardFolder } from 'db'
 import useSWR from 'swr'
 import { fetcher } from './utils'
 import { stringify } from 'qs'
-import { env, sendRequest } from 'utils'
+import { isNotEmpty, sendRequest } from 'utils'

 export const useFolders = ({
  parentId,
@@ -18,7 +18,9 @@ export const useFolders = ({
    workspaceId ? `/api/folders?${params}` : null,
    fetcher,
    {
-      dedupingInterval: env('E2E_TEST') === 'enabled' ? 0 : undefined,
+      dedupingInterval: isNotEmpty(process.env.NEXT_PUBLIC_E2E_TEST)
+        ? 0
+        : undefined,
    }
  )
  if (error) onError(error)
--- a/apps/builder/services/integrations.ts
+++ b/apps/builder/services/integrations.ts
@@ -1,4 +1,4 @@
-import { env, sendRequest } from 'utils'
+import { sendRequest } from 'utils'
 import { stringify } from 'qs'
 import useSWR from 'swr'
 import { fetcher } from './utils'
@@ -78,9 +78,7 @@ export const executeWebhook = (
  { blockId }: { blockId: string }
 ) =>
  sendRequest<WebhookResponse>({
-    url: `${env(
-      'VIEWER_URL'
-    )}/api/typebots/${typebotId}/blocks/${blockId}/executeWebhook`,
+    url: `${process.env.NEXT_PUBLIC_VIEWER_URL}/api/typebots/${typebotId}/blocks/${blockId}/executeWebhook`,
    method: 'POST',
    body: {
      variables,
--- a/apps/builder/services/stripe.ts
+++ b/apps/builder/services/stripe.ts
@@ -1,6 +1,7 @@
 import { Plan, User } from 'db'
 import { loadStripe } from '@stripe/stripe-js/pure'
-import { env, isDefined, isEmpty, sendRequest } from 'utils'
+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(env('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(env('STRIPE_PUBLIC_KEY') as string)
+  const stripe = await loadStripe(NEXT_PUBLIC_STRIPE_PUBLIC_KEY)
  await stripe?.redirectToCheckout({
    sessionId: data?.sessionId,
  })
--- a/apps/builder/services/typebots/invitations.ts
+++ b/apps/builder/services/typebots/invitations.ts
@@ -1,7 +1,7 @@
 import { CollaborationType, Invitation } from 'db'
 import { fetcher } from 'services/utils'
 import useSWR from 'swr'
-import { env, sendRequest } from 'utils'
+import { isNotEmpty, sendRequest } from 'utils'

 export const useInvitations = ({
  typebotId,
@@ -14,7 +14,9 @@ export const useInvitations = ({
    typebotId ? `/api/typebots/${typebotId}/invitations` : null,
    fetcher,
    {
-      dedupingInterval: env('E2E_TEST') === 'enabled' ? 0 : undefined,
+      dedupingInterval: isNotEmpty(process.env.NEXT_PUBLIC_E2E_TEST)
+        ? 0
+        : undefined,
    }
  )
  if (error) onError(error)
--- a/apps/builder/services/typebots/results.tsx
+++ b/apps/builder/services/typebots/results.tsx
@@ -7,7 +7,7 @@ import {
 import useSWRInfinite from 'swr/infinite'
 import { stringify } from 'qs'
 import { Answer } from 'db'
-import { env, isDefined, sendRequest } from 'utils'
+import { isDefined, isEmpty, sendRequest } from 'utils'
 import { fetcher } from 'services/utils'
 import { HStack, Text, Wrap, WrapItem } from '@chakra-ui/react'
 import { CodeIcon, CalendarIcon, FileIcon } from 'assets/icons'
@@ -54,7 +54,9 @@ export const useResults = ({
    fetcher,
    {
      revalidateAll: true,
-      dedupingInterval: env('E2E_TEST') === 'enabled' ? 0 : undefined,
+      dedupingInterval: isEmpty(process.env.NEXT_PUBLIC_E2E_TEST)
+        ? undefined
+        : 0,
    }
  )

--- a/apps/builder/services/typebots/typebots.ts
+++ b/apps/builder/services/typebots/typebots.ts
@@ -46,13 +46,13 @@ import useSWR from 'swr'
 import { fetcher, toKebabCase } from '../utils'
 import {
  isBubbleBlockType,
+  isNotEmpty,
  isWebhookBlock,
  omit,
  blockHasItems,
  blockTypeHasItems,
  blockTypeHasOption,
  blockTypeHasWebhook,
-  env,
 } from 'utils'
 import { dequal } from 'dequal'
 import { stringify } from 'qs'
@@ -83,7 +83,9 @@ export const useTypebots = ({
    { typebots: TypebotInDashboard[] },
    Error
  >(workspaceId ? `/api/typebots?${params}` : null, fetcher, {
-    dedupingInterval: env('E2E_TEST') === 'enabled' ? 0 : undefined,
+    dedupingInterval: isNotEmpty(process.env.NEXT_PUBLIC_E2E_TEST)
+      ? 0
+      : undefined,
  })
  if (error) onError(error)
  return {
--- a/apps/builder/services/user/apiTokens.ts
+++ b/apps/builder/services/user/apiTokens.ts
@@ -1,7 +1,7 @@
 import { ApiToken } from 'db'
 import { fetcher } from 'services/utils'
 import useSWR, { KeyedMutator } from 'swr'
-import { env, sendRequest } from 'utils'
+import { isNotEmpty, sendRequest } from 'utils'

 export type ApiTokenFromServer = { id: string; name: string; createdAt: string }

@@ -25,7 +25,9 @@ export const useApiTokens = ({
    userId ? `/api/users/${userId}/api-tokens` : null,
    fetcher,
    {
-      dedupingInterval: env('E2E_TEST') === 'enabled' ? 0 : undefined,
+      dedupingInterval: isNotEmpty(process.env.NEXT_PUBLIC_E2E_TEST)
+        ? 0
+        : undefined,
    }
  )
  if (error) onError(error)
--- a/apps/builder/services/workspace/member.ts
+++ b/apps/builder/services/workspace/member.ts
@@ -1,7 +1,7 @@
 import { MemberInWorkspace, WorkspaceInvitation } from 'db'
 import { fetcher } from 'services/utils'
 import useSWR from 'swr'
-import { env, sendRequest } from 'utils'
+import { isEmpty, sendRequest } from 'utils'

 export type Member = MemberInWorkspace & {
  name: string | null
@@ -14,7 +14,7 @@ export const useMembers = ({ workspaceId }: { workspaceId?: string }) => {
    { members: Member[]; invitations: WorkspaceInvitation[] },
    Error
  >(workspaceId ? `/api/workspaces/${workspaceId}/members` : null, fetcher, {
-    dedupingInterval: env('E2E_TEST') === 'enabled' ? 0 : undefined,
+    dedupingInterval: isEmpty(process.env.NEXT_PUBLIC_E2E_TEST) ? undefined : 0,
  })
  return {
    members: data?.members,
--- a/apps/viewer/.env.docker
+++ b/apps/viewer/.env.docker
@@ -1,2 +1,2 @@
 # Don't edit this file
-NEXT_PUBLIC_VIEWER_URL=
+NEXT_PUBLIC_VIEWER_URL=DOCKER_NEXT_PUBLIC_VIEWER_URL
--- a/apps/viewer/layouts/ErrorPage.tsx
+++ b/apps/viewer/layouts/ErrorPage.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { env, isEmpty } from 'utils'
+import { isEmpty } from 'utils'

 export const ErrorPage = ({ error }: { error: Error }) => {
  return (
@@ -12,7 +12,7 @@ export const ErrorPage = ({ error }: { error: Error }) => {
        flexDirection: 'column',
      }}
    >
-      {isEmpty(env('VIEWER_URL')) ? (
+      {isEmpty(process.env.NEXT_PUBLIC_VIEWER_URL) ? (
        <>
          <h1 style={{ fontWeight: 'bold', fontSize: '30px' }}>
            NEXT_PUBLIC_VIEWER_URL is missing
--- a/apps/viewer/package.json
+++ b/apps/viewer/package.json
@@ -4,7 +4,7 @@
  "version": "0.1.0",
  "scripts": {
    "dx": "yarn dev",
-    "dev": "ENVSH_ENV=.env.local bash ../../env.sh next dev -p 3001",
+    "dev": "next dev -p 3001",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
--- a/apps/viewer/pages/[[...publicId]].tsx
+++ b/apps/viewer/pages/[[...publicId]].tsx
@@ -3,7 +3,7 @@ import { NotFoundPage } from 'layouts/NotFoundPage'
 import { PublicTypebot } from 'models'
 import { GetServerSideProps, GetServerSidePropsContext } from 'next'
 import sanitizeHtml from 'sanitize-html'
-import { env, isDefined, isNotDefined, omit } from 'utils'
+import { isDefined, isNotDefined, omit } from 'utils'
 import { TypebotPage, TypebotPageProps } from '../layouts/TypebotPage'
 import prisma from '../libs/prisma'

@@ -16,9 +16,9 @@ export const getServerSideProps: GetServerSideProps = async (
  const { host, forwardedHost } = getHost(context.req)
  try {
    if (!host) return { props: {} }
-    const viewerUrls = (env('VIEWER_URL') ?? '').split(',')
+    const viewerUrls = (process.env.NEXT_PUBLIC_VIEWER_URL ?? '').split(',')
    const isMatchingViewerUrl =
-      env('E2E_TEST') === 'enabled'
+      process.env.NEXT_PUBLIC_E2E_TEST === 'enabled'
        ? true
        : viewerUrls.some(
            (url) =>
--- a/apps/viewer/pages/_document.tsx
+++ b/apps/viewer/pages/_document.tsx
@@ -1,31 +0,0 @@
-import Document, {
-  Html,
-  Head,
-  Main,
-  NextScript,
-  DocumentContext,
-} from 'next/document'
-
-class MyDocument extends Document {
-  static async getInitialProps(ctx: DocumentContext) {
-    const initialProps = await Document.getInitialProps(ctx)
-    return { ...initialProps }
-  }
-
-  render() {
-    return (
-      <Html>
-        <Head>
-          {/* eslint-disable-next-line @next/next/no-sync-scripts */}
-          <script src="/__env.js" />
-        </Head>
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    )
-  }
-}
-
-export default MyDocument
--- a/apps/viewer/services/api/dbRules.ts
+++ b/apps/viewer/services/api/dbRules.ts
@@ -1,5 +1,5 @@
 import { CollaborationType, Prisma, User, WorkspaceRole } from 'db'
-import { env } from 'utils'
+import { isNotEmpty } from 'utils'

 const parseWhereFilter = (
  typebotIds: string[] | string,
@@ -20,7 +20,7 @@ const parseWhereFilter = (
      id: typeof typebotIds === 'string' ? typebotIds : { in: typebotIds },
      workspace:
        (type === 'read' && user.email === process.env.ADMIN_EMAIL) ||
-        env('E2E_TEST') === 'enabled'
+        isNotEmpty(process.env.NEXT_PUBLIC_E2E_TEST)
          ? undefined
          : {
              members: {