feat: updated frontend docker containers to allow for runtime environment variable definitions

packages/hoppscotch-common/src/components/http/Request.vue

@@ -485,7 +485,7 @@ const copyRequest = async () => {
 
 const copyShareLink = (shareLink: string) => {
   const link = `${
-    import.meta.env.VITE_SHORTCODE_BASE_URL ?? "https://hopp.sh"
+    import.meta.env.APP_SHORTCODE_BASE_URL ?? "https://hopp.sh"
   }/r${shareLink}`
   if (navigator.share) {
     const time = new Date().toLocaleTimeString()

packages/hoppscotch-common/src/components/profile/Shortcode.vue

@@ -106,7 +106,7 @@ const requestLabelColor = computed(() =>
 const dateStamp = computed(() => shortDateTime(props.shortcode.createdOn))
 
 const shortcodeBaseURL =
-  import.meta.env.VITE_SHORTCODE_BASE_URL ?? "https://hopp.sh"
+  import.meta.env.APP_SHORTCODE_BASE_URL ?? "https://hopp.sh"
 
 const copyShortcode = (codeID: string) => {
   copyToClipboard(`${shortcodeBaseURL}/r/${codeID}`)

packages/hoppscotch-common/src/helpers/backend/GQLClient.ts

@@ -28,9 +28,9 @@ import { platform } from "~/platform"
 // TODO: Implement caching
 
 const BACKEND_GQL_URL =
-  import.meta.env.VITE_BACKEND_GQL_URL ?? "https://api.hoppscotch.io/graphql"
+  import.meta.env.APP_BACKEND_GQL_URL ?? "https://api.hoppscotch.io/graphql"
 const BACKEND_WS_URL =
-  import.meta.env.VITE_BACKEND_WS_URL ?? "wss://api.hoppscotch.io/graphql"
+  import.meta.env.APP_BACKEND_WS_URL ?? "wss://api.hoppscotch.io/graphql"
 
 type GQLOpType = "query" | "mutation" | "subscription"
 /**

packages/hoppscotch-common/src/helpers/strategies/AxiosStrategy.ts

@@ -0,0 +1,163 @@
+import axios, { AxiosRequestConfig } from "axios"
+import { v4 } from "uuid"
+import { pipe } from "fp-ts/function"
+import * as TE from "fp-ts/TaskEither"
+import { cloneDeep } from "lodash-es"
+import { NetworkResponse, NetworkStrategy } from "../network"
+import { decodeB64StringToArrayBuffer } from "../utils/b64"
+import { settingsStore } from "~/newstore/settings"
+
+let cancelSource = axios.CancelToken.source()
+
+type ProxyHeaders = {
+  "multipart-part-key"?: string
+}
+
+type ProxyPayloadType = FormData | (AxiosRequestConfig & { wantsBinary: true })
+
+export const cancelRunningAxiosRequest = () => {
+  cancelSource.cancel()
+
+  // Create a new cancel token
+  cancelSource = axios.CancelToken.source()
+}
+
+const getProxyPayload = (
+  req: AxiosRequestConfig,
+  multipartKey: string | null
+) => {
+  let payload: ProxyPayloadType = {
+    ...req,
+    wantsBinary: true,
+    accessToken: import.meta.env.APP_PROXYSCOTCH_ACCESS_TOKEN ?? "",
+  }
+
+  if (payload.data instanceof FormData) {
+    const formData = payload.data
+    payload.data = ""
+    formData.append(multipartKey!, JSON.stringify(payload))
+    payload = formData
+  }
+
+  return payload
+}
+
+const preProcessRequest = (req: AxiosRequestConfig): AxiosRequestConfig => {
+  const reqClone = cloneDeep(req)
+
+  // If the parameters are URLSearchParams, inject them to URL instead
+  // This prevents issues of marshalling the URLSearchParams to the proxy
+  if (reqClone.params instanceof URLSearchParams) {
+    try {
+      const url = new URL(reqClone.url ?? "")
+
+      for (const [key, value] of reqClone.params.entries()) {
+        url.searchParams.append(key, value)
+      }
+
+      reqClone.url = url.toString()
+    } catch (e) {
+      // making this a non-empty block, so we can make the linter happy.
+      // we should probably use, allowEmptyCatch, or take the time to do something with the caught errors :)
+    }
+
+    reqClone.params = {}
+  }
+
+  return reqClone
+}
+
+const axiosWithProxy: NetworkStrategy = (req) =>
+  pipe(
+    TE.Do,
+
+    TE.bind("processedReq", () => TE.of(preProcessRequest(req))),
+
+    // If the request has FormData, the proxy needs a key
+    TE.bind("multipartKey", ({ processedReq }) =>
+      TE.of(
+        processedReq.data instanceof FormData
+          ? `proxyRequestData-${v4()}`
+          : null
+      )
+    ),
+
+    // Build headers to send
+    TE.bind("headers", ({ processedReq, multipartKey }) =>
+      TE.of(
+        processedReq.data instanceof FormData
+          ? <ProxyHeaders>{
+              "multipart-part-key": multipartKey,
+            }
+          : <ProxyHeaders>{}
+      )
+    ),
+
+    // Create payload
+    TE.bind("payload", ({ processedReq, multipartKey }) =>
+      TE.of(getProxyPayload(processedReq, multipartKey))
+    ),
+
+    // Run the proxy request
+    TE.chain(({ payload, headers }) =>
+      TE.tryCatch(
+        () =>
+          axios.post(
+            settingsStore.value.PROXY_URL || "https://proxy.hoppscotch.io",
+            payload,
+            {
+              headers,
+              cancelToken: cancelSource.token,
+            }
+          ),
+        (reason) =>
+          axios.isCancel(reason)
+            ? "cancellation" // Convert cancellation errors into cancellation strings
+            : reason
+      )
+    ),
+
+    // Check success predicate
+    TE.chain(
+      TE.fromPredicate(
+        ({ data }) => data.success,
+        ({ data }) => data.data.message || "Proxy Error"
+      )
+    ),
+
+    // Process Base64
+    TE.chain(({ data }) => {
+      if (data.isBinary) {
+        data.data = decodeB64StringToArrayBuffer(data.data)
+      }
+
+      return TE.of(data)
+    })
+  )
+
+const axiosWithoutProxy: NetworkStrategy = (req) =>
+  pipe(
+    TE.tryCatch(
+      () =>
+        axios({
+          ...req,
+          cancelToken: (cancelSource && cancelSource.token) || "",
+          responseType: "arraybuffer",
+        }),
+      (e) => (axios.isCancel(e) ? "cancellation" : (e as any))
+    ),
+
+    TE.orElse((e) =>
+      e !== "cancellation" && e.response
+        ? TE.right(e.response as NetworkResponse)
+        : TE.left(e)
+    )
+  )
+
+const axiosStrategy: NetworkStrategy = (req) =>
+  pipe(
+    req,
+    settingsStore.value.PROXY_ENABLED ? axiosWithProxy : axiosWithoutProxy
+  )
+
+export default axiosStrategy

packages/hoppscotch-common/src/modules/sentry.ts

@@ -52,17 +52,17 @@ function initSentry(dsn: string, router: Router, app: App) {
   Sentry.init({
     app,
     dsn,
-    release: import.meta.env.VITE_SENTRY_RELEASE_TAG ?? undefined,
+    release: import.meta.env.APP_SENTRY_RELEASE_TAG ?? undefined,
     environment: APP_IS_IN_DEV_MODE
       ? "dev"
-      : import.meta.env.VITE_SENTRY_ENVIRONMENT,
+      : import.meta.env.APP_SENTRY_ENVIRONMENT,
     integrations: [
       new BrowserTracing({
         routingInstrumentation: Sentry.vueRouterInstrumentation(
           getInstrumentationVueRouter(router)
         ),
         // TODO: We may want to limit this later on
-        tracingOrigins: [new URL(import.meta.env.VITE_BACKEND_GQL_URL).origin],
+        tracingOrigins: [new URL(import.meta.env.APP_BACKEND_GQL_URL).origin],
       }),
     ],
     tracesSampleRate: 0.8,
@@ -175,7 +175,7 @@ function subscribeForAppDataTags() {
 
 export default <HoppModule>{
   onRouterInit(app, router) {
-    if (!import.meta.env.VITE_SENTRY_DSN) {
+    if (!import.meta.env.APP_SENTRY_DSN) {
       console.log(
         "Sentry tracing is not enabled because 'VITE_SENTRY_DSN' env is not defined"
       )
@@ -183,14 +183,14 @@ export default <HoppModule>{
     }
 
     if (settingsStore.value.TELEMETRY_ENABLED) {
-      initSentry(import.meta.env.VITE_SENTRY_DSN, router, app)
+      initSentry(import.meta.env.APP_SENTRY_DSN, router, app)
     }
 
     settingsStore.subject$.subscribe(({ TELEMETRY_ENABLED }) => {
       if (!TELEMETRY_ENABLED && sentryActive) {
         deinitSentry()
       } else if (TELEMETRY_ENABLED && !sentryActive) {
-        initSentry(import.meta.env.VITE_SENTRY_DSN!, router, app)
+        initSentry(import.meta.env.APP_SENTRY_DSN!, router, app)
       }
     })