fix(docker): 🐛 Runtime public environment

baptisteArno · Jun 22, 2022 · e03fe9f · e03fe9f · vercel · Jun 22, 2022
1 parent ea76564
commit e03fe9f
Show file tree

Hide file tree

Showing 54 changed files with 349 additions and 164 deletions.
diff --git a/.gitignore b/.gitignore
@@ -24,3 +24,5 @@ firebaseServiceAccount.json
 tags
 
 dump.sql
+
+__env.js
diff --git a/Dockerfile b/Dockerfile
@@ -36,10 +36,10 @@ COPY --from=builder /app/apps/${SCOPE}/.next/static ./.next/static
 COPY --from=builder /app/apps/${SCOPE}/.env.docker ./.env.production
 RUN apt-get -qy update && apt-get -qy install openssl
 
-COPY entrypoint.sh ./
+COPY env.sh ./
 COPY ${SCOPE}-entrypoint.sh ./
 RUN chmod +x ./${SCOPE}-entrypoint.sh
-RUN chmod +x ./entrypoint.sh
+RUN chmod +x ./env.sh
 ENTRYPOINT ./${SCOPE}-entrypoint.sh
 
 EXPOSE 3000

diff --git a/apps/builder/.env.docker b/apps/builder/.env.docker
@@ -1,7 +1,7 @@
 # Don't edit this file
-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
+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=
diff --git a/apps/builder/components/share/ShareContent.tsx b/apps/builder/components/share/ShareContent.tsx
@@ -20,6 +20,7 @@ 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()
@@ -58,9 +59,7 @@ export const ShareContent = () => {
           </Heading>
           {typebot && (
             <EditableUrl
-              hostname={
-                process.env.NEXT_PUBLIC_VIEWER_URL ?? 'https://typebot.io'
-              }
+              hostname={env('VIEWER_URL') ?? 'https://typebot.io'}
               pathname={publicId}
               onPathnameChange={handlePublicIdChange}
             />

diff --git 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 { isEmpty } from 'utils'
+import { env, isEmpty } from 'utils'
 
 type ChatEmbedCodeProps = {
   withStarterVariables?: boolean
@@ -21,9 +21,9 @@ export const ChatEmbedCode = ({
   const snippet = prettier.format(
     createSnippet({
       url: `${
-        isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
-          ? process.env.NEXT_PUBLIC_VIEWER_URL
-          : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
+        isEmpty(env('VIEWER_INTERNAL_URL'))
+          ? env('VIEWER_URL')
+          : env('VIEWER_INTERNAL_URL')
       }/${typebot?.publicId}`,
       button,
       proactiveMessage,

diff --git 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 { isEmpty } from 'utils'
+import { env, isEmpty } from 'utils'
 
 type ContainerEmbedCodeProps = {
   widthLabel: string
@@ -23,9 +23,9 @@ export const ContainerEmbedCode = ({
   const snippet = prettier.format(
     parseSnippet({
       url: `${
-        isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
-          ? process.env.NEXT_PUBLIC_VIEWER_URL
-          : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
+        isEmpty(env('VIEWER_INTERNAL_URL'))
+          ? env('VIEWER_URL')
+          : env('VIEWER_INTERNAL_URL')
       }/${typebot?.publicId}`,
       heightLabel,
       widthLabel,

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

diff --git 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 { isEmpty } from 'utils'
+import { env, 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(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
-          ? process.env.NEXT_PUBLIC_VIEWER_URL
-          : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
+        isEmpty(env('VIEWER_INTERNAL_URL'))
+          ? env('VIEWER_URL')
+          : env('VIEWER_INTERNAL_URL')
       }/${typebot?.publicId}`,
       delay,
     }),

diff --git 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 { isEmpty } from 'utils'
+import { env, 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(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
-          ? process.env.NEXT_PUBLIC_VIEWER_URL
-          : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
+        isEmpty(env('VIEWER_INTERNAL_URL'))
+          ? env('VIEWER_URL')
+          : env('VIEWER_INTERNAL_URL')
       }/${typebot?.publicId}`,
       heightLabel,
       widthLabel,
@@ -73,9 +73,9 @@ export const PopupReactCode = ({ delay }: PopupEmbedCodeProps & FlexProps) => {
   const snippet = prettier.format(
     parsePopupSnippet({
       url: `${
-        isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
-          ? process.env.NEXT_PUBLIC_VIEWER_URL
-          : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
+        isEmpty(env('VIEWER_INTERNAL_URL'))
+          ? env('VIEWER_URL')
+          : env('VIEWER_INTERNAL_URL')
       }/${typebot?.publicId}`,
       delay,
     }),
@@ -124,9 +124,9 @@ export const ChatReactCode = ({
   const snippet = prettier.format(
     parseBubbleSnippet({
       url: `${
-        isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
-          ? process.env.NEXT_PUBLIC_VIEWER_URL
-          : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
+        isEmpty(env('VIEWER_INTERNAL_URL'))
+          ? env('VIEWER_URL')
+          : env('VIEWER_INTERNAL_URL')
       }/${typebot?.publicId}`,
       button,
       proactiveMessage,

diff --git 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 { isEmpty } from 'utils'
+import { env, 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(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
-                          ? process.env.NEXT_PUBLIC_VIEWER_URL
-                          : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL}
+                        {isEmpty(env('VIEWER_INTERNAL_URL'))
+                          ? env('VIEWER_URL')
+                          : env('VIEWER_INTERNAL_URL')}
                       </Text>
                     </Stack>
                   </HStack>

diff --git 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 { isEmpty } from 'utils'
+import { env, isEmpty } from 'utils'
 import { ModalProps } from '../../EmbedButton'
 
 type GtmInstructionsProps = {
@@ -41,9 +41,9 @@ const StandardInstructions = ({ publicId }: Pick<ModalProps, 'publicId'>) => {
 
   const jsCode = parseInitContainerCode({
     url: `${
-      isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
-        ? process.env.NEXT_PUBLIC_VIEWER_URL
-        : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
+      isEmpty(env('VIEWER_INTERNAL_URL'))
+        ? env('VIEWER_URL')
+        : env('VIEWER_INTERNAL_URL')
     }/${publicId}`,
   })
   const headCode = `${typebotJsHtml}

diff --git 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 { isEmpty } from 'utils'
+import { env, isEmpty } from 'utils'
 import { ModalProps } from '../EmbedButton'
 
 export const NotionModal = ({
@@ -46,17 +46,17 @@ export const NotionModal = ({
                   pr="4.5rem"
                   type={'text'}
                   defaultValue={`${
-                    isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
-                      ? process.env.NEXT_PUBLIC_VIEWER_URL
-                      : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
+                    isEmpty(env('VIEWER_INTERNAL_URL'))
+                      ? env('VIEWER_URL')
+                      : env('VIEWER_INTERNAL_URL')
                   }/${publicId}`}
                 />
                 <InputRightElement width="4.5rem">
                   <CopyButton
                     textToCopy={`${
-                      isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
-                        ? process.env.NEXT_PUBLIC_VIEWER_URL
-                        : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
+                      isEmpty(env('VIEWER_INTERNAL_URL'))
+                        ? env('VIEWER_URL')
+                        : env('VIEWER_INTERNAL_URL')
                     }/${publicId}`}
                   />
                 </InputRightElement>

diff --git 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 { isEmpty } from 'utils'
+import { env, isEmpty } from 'utils'
 
 type ShopifyInstructionsProps = {
   type: 'standard' | 'popup' | 'bubble'
@@ -46,9 +46,9 @@ const StandardInstructions = ({ publicId }: Pick<ModalProps, 'publicId'>) => {
 
   const jsCode = parseInitContainerCode({
     url: `${
-      isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
-        ? process.env.NEXT_PUBLIC_VIEWER_URL
-        : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
+      isEmpty(env('VIEWER_INTERNAL_URL'))
+        ? env('VIEWER_URL')
+        : env('VIEWER_INTERNAL_URL')
     }/${publicId}`,
   })
   const headCode = prettier.format(

diff --git 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 { isEmpty } from 'utils'
+import { env, isEmpty } from 'utils'
 import { ModalProps } from '../EmbedButton'
 
 export const WordpressModal = ({
@@ -55,17 +55,17 @@ export const WordpressModal = ({
                   pr="4.5rem"
                   type={'text'}
                   defaultValue={`${
-                    isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
-                      ? process.env.NEXT_PUBLIC_VIEWER_URL
-                      : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
+                    isEmpty(env('VIEWER_INTERNAL_URL'))
+                      ? env('VIEWER_URL')
+                      : env('VIEWER_INTERNAL_URL')
                   }/${publicId}`}
                 />
                 <InputRightElement width="4.5rem">
                   <CopyButton
                     textToCopy={`${
-                      isEmpty(process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL)
-                        ? process.env.NEXT_PUBLIC_VIEWER_URL
-                        : process.env.NEXT_PUBLIC_VIEWER_INTERNAL_URL
+                      isEmpty(env('VIEWER_INTERNAL_URL'))
+                        ? env('VIEWER_URL')
+                        : env('VIEWER_INTERNAL_URL')
                     }/${publicId}`}
                   />
                 </InputRightElement>

diff --git 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 { isEmpty } from 'utils'
+import { env } from 'utils'
 
 const linterExtension = linter(jsonParseLinter())
 
@@ -43,7 +43,7 @@ export const CodeEditor = ({
       setPlainTextValue(value)
       onChange && onChange(value)
     },
-    isEmpty(process.env.NEXT_PUBLIC_E2E_TEST) ? debounceTimeout : 0
+    env('E2E_TEST') === 'enabled' ? 0 : debounceTimeout
   )
 
   useEffect(

diff --git a/...aph/Nodes/BlockNode/SettingsPopoverContent/bodies/SendEmailSettings/SendEmailSettings.tsx b/...aph/Nodes/BlockNode/SettingsPopoverContent/bodies/SendEmailSettings/SendEmailSettings.tsx
@@ -12,6 +12,7 @@ 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 = {
@@ -96,9 +97,9 @@ export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
           currentCredentialsId={options.credentialsId}
           onCredentialsSelect={handleCredentialsSelect}
           onCreateNewClick={onOpen}
-          defaultCredentialLabel={process.env.NEXT_PUBLIC_SMTP_FROM?.match(
-            /\<(.*)\>/
-          )?.pop()}
+          defaultCredentialLabel={env('SMTP_FROM')
+            ?.match(/\<(.*)\>/)
+            ?.pop()}
           refreshDropdownKey={refreshCredentialsKey}
         />
       </Stack>

diff --git a/apps/builder/components/shared/ImageUploadContent/GiphySearch.tsx b/apps/builder/components/shared/ImageUploadContent/GiphySearch.tsx
@@ -4,14 +4,13 @@ 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(
-  process.env.NEXT_PUBLIC_GIPHY_API_KEY as string
-)
+const giphyFetch = new GiphyFetch(env('GIPHY_API_KEY') as string)
 
 export const GiphySearch = ({ onSubmit }: GiphySearchProps) => {
   const { fetchGifs, searchKey, setSearch } = useContext(SearchContext)