Merge pull request #4 from briefercloud/api-url-from-env

Support defining frontend env vars at runtime
briefercloud · Sep 10, 2024 · 8589ac6 · 8589ac6
2 parents be0d041 + 3e35c79
commit 8589ac6
Show file tree

Hide file tree

Showing 49 changed files with 225 additions and 153 deletions.
diff --git a/apps/api/package.json b/apps/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@briefer/api",
-  "version": "0.0.2-alpha",
+  "version": "0.0.2-alpha.2",
   "private": true,
   "type": "module",
   "scripts": {

diff --git a/apps/web/Dockerfile b/apps/web/Dockerfile
@@ -64,7 +64,8 @@ COPY --from=installer /app/apps/web/package.json .
 COPY --from=installer --chown=nextjs:nodejs /app/apps/web/.next/standalone ./
 COPY --from=installer --chown=nextjs:nodejs /app/apps/web/.next/static ./apps/web/.next/static
 COPY --from=installer --chown=nextjs:nodejs /app/apps/web/public ./apps/web/public
+COPY --from=installer --chown=nextjs:nodejs /app/apps/web/start.sh .
 
 EXPOSE 3000
 
-CMD node apps/web/server.js
+CMD ./apps/web/start.sh
diff --git a/apps/web/public/index.html b/apps/web/public/index.html
@@ -33,6 +33,9 @@
     />
 
     <title>Briefer</title>
+
+    <!-- this file is automatically generated before starting the server -->
+    <script src="%PUBLIC_URL%/env.js"></script>
   </head>
   <body class="bg-gray-50 dark:bg-neutral-900">
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/apps/web/src/components/Dashboard/index.tsx b/apps/web/src/components/Dashboard/index.tsx
@@ -27,6 +27,7 @@ import EnvBar from '../EnvBar'
 import Files from '../Files'
 import { PublishBlinkingSignal } from '../BlinkingSignal'
 import { Tooltip } from '../Tooltips'
+import { NEXT_PUBLIC_PUBLIC_URL } from '@/utils/env'
 
 interface Props {
   document: ApiDocument
@@ -75,7 +76,9 @@ export default function Dashboard(props: Props) {
 
   const copyLink = useMemo(
     () =>
-      `${process.env.NEXT_PUBLIC_PUBLIC_URL}/workspaces/${props.document.workspaceId}/documents/${props.document.id}`,
+      `${NEXT_PUBLIC_PUBLIC_URL()}/workspaces/${
+        props.document.workspaceId
+      }/documents/${props.document.id}`,
     [router]
   )
 

diff --git a/apps/web/src/components/DataSourcesInfo.tsx b/apps/web/src/components/DataSourcesInfo.tsx
@@ -66,7 +66,7 @@ export default function DataSourcesInfo({
                         <span className="font-semibold">
                           Our IP address is{' '}
                           <code className="bg-gray-100 px-1 py-0.5 rounded-md text-red-500">
-                            {GATEWAY_IP}
+                            {GATEWAY_IP()}
                           </code>
                         </span>
                         .

diff --git a/apps/web/src/components/Files.tsx b/apps/web/src/components/Files.tsx
@@ -30,6 +30,7 @@ import {
   CloudArrowUpIcon as CloudArrowUpIconSolid,
 } from '@heroicons/react/20/solid'
 import { PortalTooltip, Tooltip } from './Tooltips'
+import { NEXT_PUBLIC_API_URL } from '@/utils/env'
 
 interface Props {
   workspaceId: string
@@ -497,7 +498,7 @@ function FileItem(props: FileItemProps) {
             'Download'
           ) : (
             <Link
-              href={`${process.env.NEXT_PUBLIC_API_URL}/v1/workspaces/${
+              href={`${NEXT_PUBLIC_API_URL()}/v1/workspaces/${
                 props.workspaceId
               }/files/file?path=${encodeURIComponent(props.file.relCwdPath)}`}
               target="_blank"

diff --git a/apps/web/src/components/PrivateDocumentPage.tsx b/apps/web/src/components/PrivateDocumentPage.tsx
@@ -30,6 +30,7 @@ import { Tooltip } from './Tooltips'
 import SchemaExplorer from './schemaExplorer'
 import { EditorAwarenessProvider } from '@/hooks/useEditorAwareness'
 import ShortcutsModal from './ShortcutsModal'
+import { NEXT_PUBLIC_PUBLIC_URL } from '@/utils/env'
 
 // this is needed because this component only works with the browser
 const V2Editor = dynamic(() => import('@/components/v2Editor'), {
@@ -149,7 +150,9 @@ function PrivateDocumentPageInner(
   const router = useRouter()
   const copyLink = useMemo(
     () =>
-      `${process.env.NEXT_PUBLIC_PUBLIC_URL}/workspaces/${props.workspaceId}/documents/${props.documentId}`,
+      `${NEXT_PUBLIC_PUBLIC_URL()}/workspaces/${props.workspaceId}/documents/${
+        props.documentId
+      }`,
     [router]
   )
 

diff --git a/apps/web/src/components/forms/athena.tsx b/apps/web/src/components/forms/athena.tsx
@@ -49,7 +49,7 @@ export default function AthenaForm({
             {athenaDataSource ? 'Edit' : 'Add'} a Athena database for Briefer to
             pull data from. Our fixed IP address is{' '}
             <code className="bg-gray-100 px-1 py-0.5 rounded-md text-red-500 text-xs">
-              {GATEWAY_IP}
+              {GATEWAY_IP()}
             </code>
             .
           </p>

diff --git a/apps/web/src/components/forms/bigquery.tsx b/apps/web/src/components/forms/bigquery.tsx
@@ -95,7 +95,7 @@ export default function BigQueryForm({
             {bigQueryDataSource ? 'Edit' : 'Add'} a BigQuery instance for
             Briefer to pull data from. Our fixed IP address is{' '}
             <code className="bg-gray-100 px-1 py-0.5 rounded-md text-red-500 text-xs">
-              {GATEWAY_IP}
+              {GATEWAY_IP()}
             </code>
             .
           </p>

diff --git a/apps/web/src/components/forms/mysql.tsx b/apps/web/src/components/forms/mysql.tsx
@@ -68,7 +68,7 @@ export default function MySQLForm({
             {mySQLDataSource ? 'Edit' : 'Add'} a MySQL database for Briefer to
             pull data from. Our fixed IP address is{' '}
             <code className="bg-gray-100 px-1 py-0.5 rounded-md text-red-500 text-xs">
-              {GATEWAY_IP}
+              {GATEWAY_IP()}
             </code>
             .
           </p>

diff --git a/apps/web/src/components/forms/oracle.tsx b/apps/web/src/components/forms/oracle.tsx
@@ -52,7 +52,7 @@ export default function OracleForm({
             {oracleDataSource ? 'Edit' : 'Add'} a Oracle database for Briefer to
             pull data from. Our fixed IP address is{' '}
             <code className="bg-gray-100 px-1 py-0.5 rounded-md text-red-500 text-xs">
-              {GATEWAY_IP}
+              {GATEWAY_IP()}
             </code>
             .
           </p>

diff --git a/apps/web/src/components/forms/postgresql.tsx b/apps/web/src/components/forms/postgresql.tsx
@@ -71,7 +71,7 @@ export default function PostgreSQLForm({
             {postgreSQLDataSource ? 'Edit' : 'Add'} a PostgreSQL database for
             Briefer to pull data from. Our fixed IP address is{' '}
             <code className="bg-gray-100 px-1 py-0.5 rounded-md text-red-500 text-xs">
-              {GATEWAY_IP}
+              {GATEWAY_IP()}
             </code>
             .
           </p>

diff --git a/apps/web/src/components/forms/redshift.tsx b/apps/web/src/components/forms/redshift.tsx
@@ -50,7 +50,7 @@ export default function RedshiftForm({
             {redshiftDataSource ? 'Edit' : 'Add'} a Redshift database for
             Briefer to pull data from. Our fixed IP address is{' '}
             <code className="bg-gray-100 px-1 py-0.5 rounded-md text-red-500 text-xs">
-              {GATEWAY_IP}
+              {GATEWAY_IP()}
             </code>
             .
           </p>

diff --git a/apps/web/src/components/forms/trino.tsx b/apps/web/src/components/forms/trino.tsx
@@ -53,7 +53,7 @@ export default function TrinoForm({
             {trinoDataSource ? 'Edit' : 'Add'} a Trino database for Briefer to
             pull data from. Our fixed IP address is{' '}
             <code className="bg-gray-100 px-1 py-0.5 rounded-md text-red-500 text-xs">
-              {GATEWAY_IP}
+              {GATEWAY_IP()}
             </code>
             .
           </p>

diff --git a/apps/web/src/components/v2Editor/customBlocks/fileUpload/FilesTable.tsx b/apps/web/src/components/v2Editor/customBlocks/fileUpload/FilesTable.tsx
@@ -9,6 +9,7 @@ import StateFiles from './StateFiles'
 import { useCallback, useMemo } from 'react'
 import Spin from '@/components/Spin'
 import Link from 'next/link'
+import { NEXT_PUBLIC_API_URL } from '@/utils/env'
 
 export type FilesTableHeader = 'Name' | 'Type' | 'Size' | 'Usage' | 'DL' | 'Del'
 const editorHeaders: FilesTableHeader[] = [
@@ -120,7 +121,7 @@ function FilesTable(props: Props) {
             <UploadedFileC
               key={i}
               file={file}
-              downloadLink={`${process.env.NEXT_PUBLIC_API_URL}/v1/workspaces/${
+              downloadLink={`${NEXT_PUBLIC_API_URL()}/v1/workspaces/${
                 props.workspaceId
               }/documents/${props.documentId}/files/${encodeURIComponent(
                 file.name

diff --git a/apps/web/src/components/v2Editor/customBlocks/fileUpload/index.tsx b/apps/web/src/components/v2Editor/customBlocks/fileUpload/index.tsx
@@ -18,6 +18,7 @@ import { uniqBy } from 'ramda'
 import { useYElementMemo } from '@/hooks/useYMemo'
 import { ConnectDragPreview } from 'react-dnd'
 import HiddenInPublishedButton from '../../HiddenInPublishedButton'
+import { NEXT_PUBLIC_API_URL } from '@/utils/env'
 
 type UploadFile = {
   status: 'enqueued' | 'uploading' | 'asking-replace'
@@ -183,7 +184,9 @@ function FileUploadBlock(props: Props) {
     })
 
     const replace = state.current.replace || state.replaceAll
-    const url = `${process.env.NEXT_PUBLIC_API_URL}/v1/workspaces/${props.workspaceId}/documents/${props.documentId}/files?replace=${replace}`
+    const url = `${NEXT_PUBLIC_API_URL()}/v1/workspaces/${
+      props.workspaceId
+    }/documents/${props.documentId}/files?replace=${replace}`
     axios({
       signal: state.current.abortController.signal,
       url,

diff --git a/apps/web/src/components/v2Editor/customBlocks/sql/SQLResult.tsx b/apps/web/src/components/v2Editor/customBlocks/sql/SQLResult.tsx
@@ -22,6 +22,7 @@ import {
 } from '@heroicons/react/20/solid'
 import { ArrowDownTrayIcon } from '@heroicons/react/24/solid'
 import { Tooltip } from '@/components/Tooltips'
+import { NEXT_PUBLIC_API_URL } from '@/utils/env'
 
 interface Props {
   blockId: string
@@ -130,7 +131,13 @@ function SQLSuccess(props: SQLSuccessProps) {
     }
 
     fetch(
-      `${process.env.NEXT_PUBLIC_API_URL}/v1/workspaces/${props.workspaceId}/documents/${props.documentId}/queries/${props.blockId}?page=${currentPageIndex}&pageSize=${rowsPerPage}&dataframeName=${props.dataframeName}`,
+      `${NEXT_PUBLIC_API_URL()}/v1/workspaces/${props.workspaceId}/documents/${
+        props.documentId
+      }/queries/${
+        props.blockId
+      }?page=${currentPageIndex}&pageSize=${rowsPerPage}&dataframeName=${
+        props.dataframeName
+      }`,
       {
         credentials: 'include',
       }

diff --git a/apps/web/src/components/v2Editor/hooks/useAI.ts b/apps/web/src/components/v2Editor/hooks/useAI.ts
@@ -2,6 +2,7 @@ import { DataSource } from '@briefer/database'
 import { useCallback, useMemo, useState } from 'react'
 import { io } from 'socket.io-client'
 import { editor } from 'monaco-editor'
+import { NEXT_PUBLIC_API_WS_URL } from '@/utils/env'
 
 export type AIResult = {
   data?: string
@@ -51,7 +52,7 @@ export const useAI = <OnRunInputT, Output, InitialInput = DefaultInitialInput>(
         let finished = false
         let error: Error | undefined = undefined
 
-        const socket = io(process.env.NEXT_PUBLIC_API_WS_URL!, {
+        const socket = io(NEXT_PUBLIC_API_WS_URL(), {
           withCredentials: true,
         })
 

diff --git a/apps/web/src/hooks/useAuth.ts b/apps/web/src/hooks/useAuth.ts
@@ -1,3 +1,4 @@
+import { NEXT_PUBLIC_API_URL, NEXT_PUBLIC_PUBLIC_URL } from '@/utils/env'
 import fetcher from '@/utils/fetcher'
 import type { ApiUser, UserWorkspaceRole } from '@briefer/database'
 import { useRouter } from 'next/router'
@@ -27,13 +28,13 @@ export const useSignup = (): UseSignup => {
   const signupWithEmail = useCallback(
     (email: string) => {
       setState((s) => ({ ...s, loading: true }))
-      fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/sign-up/email`, {
+      fetch(`${NEXT_PUBLIC_API_URL()}/auth/sign-up/email`, {
         credentials: 'include',
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           email,
-          callback: process.env.NEXT_PUBLIC_PUBLIC_URL,
+          callback: NEXT_PUBLIC_PUBLIC_URL(),
         }),
       })
         .then(async (res) => {
@@ -73,13 +74,13 @@ export const useLogin = (): UseLogin => {
   const loginWithEmail = useCallback(
     (email: string) => {
       setState((s) => ({ ...s, loading: true }))
-      fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/link/request`, {
+      fetch(`${NEXT_PUBLIC_API_URL()}/auth/link/request`, {
         credentials: 'include',
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           email,
-          callback: process.env.NEXT_PUBLIC_PUBLIC_URL,
+          callback: NEXT_PUBLIC_PUBLIC_URL(),
         }),
       })
         .then(async (res) => {
@@ -104,7 +105,7 @@ export const useLogin = (): UseLogin => {
   const loginWithPassword = useCallback(
     (email: string, password: string) => {
       setState((s) => ({ ...s, loading: true }))
-      fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/sign-in/password`, {
+      fetch(`${NEXT_PUBLIC_API_URL()}/auth/sign-in/password`, {
         credentials: 'include',
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -149,20 +150,17 @@ export type SessionUser = ApiUser & {
 }
 
 export const useSession = () =>
-  useSWR<SessionUser>(
-    `${process.env.NEXT_PUBLIC_API_URL}/auth/session`,
-    fetcher
-  )
+  useSWR<SessionUser>(`${NEXT_PUBLIC_API_URL()}/auth/session`, fetcher)
 
 export const useSignout = () => {
   const router = useRouter()
   return useCallback(
     (callback?: string) => {
-      const cb = callback ?? process.env.NEXT_PUBLIC_PUBLIC_URL!
+      const cb = callback ?? NEXT_PUBLIC_PUBLIC_URL()
       router.push(
-        `${
-          process.env.NEXT_PUBLIC_API_URL
-        }/auth/logout?callback=${encodeURIComponent(cb)}`
+        `${NEXT_PUBLIC_API_URL()}/auth/logout?callback=${encodeURIComponent(
+          cb
+        )}`
       )
     },
     [router]

diff --git a/apps/web/src/hooks/useComments.ts b/apps/web/src/hooks/useComments.ts
@@ -1,3 +1,4 @@
+import { NEXT_PUBLIC_API_URL } from '@/utils/env'
 import fetcher from '@/utils/fetcher'
 import { useCallback, useMemo } from 'react'
 import useSWR from 'swr'
@@ -20,7 +21,7 @@ export const useComments = (
   docId: string
 ): UseComments => {
   const { data, mutate } = useSWR<Comment[]>(
-    `${process.env.NEXT_PUBLIC_API_URL}/v1/workspaces/${workspaceId}/documents/${docId}/comments`,
+    `${NEXT_PUBLIC_API_URL()}/v1/workspaces/${workspaceId}/documents/${docId}/comments`,
     fetcher,
     { refreshInterval: 5000 }
   )
@@ -30,7 +31,7 @@ export const useComments = (
   const createComment = useCallback(
     async (content: string) => {
       const res = await fetch(
-        `${process.env.NEXT_PUBLIC_API_URL}/v1/workspaces/${workspaceId}/documents/${docId}/comments`,
+        `${NEXT_PUBLIC_API_URL()}/v1/workspaces/${workspaceId}/documents/${docId}/comments`,
         {
           credentials: 'include',
           method: 'POST',
@@ -50,7 +51,7 @@ export const useComments = (
   const deleteComment = useCallback(
     async (id: string) => {
       await fetch(
-        `${process.env.NEXT_PUBLIC_API_URL}/v1/workspaces/${workspaceId}/documents/${docId}/comments/${id}`,
+        `${NEXT_PUBLIC_API_URL()}/v1/workspaces/${workspaceId}/documents/${docId}/comments/${id}`,
         {
           credentials: 'include',
           method: 'DELETE',

diff --git a/apps/web/src/hooks/useDatasource.ts b/apps/web/src/hooks/useDatasource.ts
@@ -11,6 +11,7 @@ import { useCallback, useMemo } from 'react'
 import useSWR, { SWRResponse } from 'swr'
 import { useDataSources } from './useDatasources'
 import { TrinoDataSourceInput } from '@/components/forms/trino'
+import { NEXT_PUBLIC_API_URL } from '@/utils/env'
 
 type DataSourceInput =
   | PostgreSQLDataSourceInput
@@ -34,7 +35,7 @@ export const useDataSource = (
   dataSourceId: string
 ): UseDataSource => {
   const swrRes = useSWR<State>(
-    `${process.env.NEXT_PUBLIC_API_URL}/v1/workspaces/${workspaceId}/data-sources/${dataSourceId}`,
+    `${NEXT_PUBLIC_API_URL()}/v1/workspaces/${workspaceId}/data-sources/${dataSourceId}`,
     fetcher
   )
 
@@ -46,7 +47,7 @@ export const useDataSource = (
         }
 
         const res = await fetch(
-          `${process.env.NEXT_PUBLIC_API_URL}/v1/workspaces/${workspaceId}/data-sources/${dataSourceId}`,
+          `${NEXT_PUBLIC_API_URL()}/v1/workspaces/${workspaceId}/data-sources/${dataSourceId}`,
           {
             credentials: 'include',
             method: 'PUT',
@@ -108,7 +109,7 @@ export const useNewDataSource = (workspaceId: string) => {
       }
 
       const res = await fetch(
-        `${process.env.NEXT_PUBLIC_API_URL}/v1/workspaces/${workspaceId}/data-sources`,
+        `${NEXT_PUBLIC_API_URL()}/v1/workspaces/${workspaceId}/data-sources`,
         {
           credentials: 'include',
           method: 'POST',