feat: container registry friendly docker images and all-in-one container (#3193)

Co-authored-by: Balu Babu <balub997@gmail.com>

packages/hoppscotch-backend/package.json

@@ -33,7 +33,7 @@
     "@nestjs/passport": "^9.0.0",
     "@nestjs/platform-express": "^9.2.1",
     "@nestjs/throttler": "^4.0.0",
-    "@prisma/client": "^4.7.1",
+    "@prisma/client": "^4.16.2",
     "apollo-server-express": "^3.11.1",
     "apollo-server-plugin-base": "^3.7.1",
     "argon2": "^0.30.3",
@@ -57,7 +57,7 @@
     "passport-jwt": "^4.0.1",
     "passport-local": "^1.0.0",
     "passport-microsoft": "^1.0.0",
-    "prisma": "^4.7.1",
+    "prisma": "^4.16.2",
     "reflect-metadata": "^0.1.13",
     "rimraf": "^3.0.2",
     "rxjs": "^7.6.0"

packages/hoppscotch-backend/prisma/schema.prisma

@@ -5,7 +5,7 @@ datasource db {
 
 generator client {
   provider      = "prisma-client-js"
-  binaryTargets = ["native", "debian-openssl-1.1.x"]
+  binaryTargets = ["native", "debian-openssl-1.1.x", "debian-openssl-3.0.x"]
 }
 
 model Team {

packages/hoppscotch-backend/src/app.controller.ts

@@ -0,0 +1,9 @@
+import { Controller, Get } from '@nestjs/common';
+
+@Controller('ping')
+export class AppController {
+  @Get()
+  ping(): string {
+    return 'Success';
+  }
+}

packages/hoppscotch-backend/src/app.module.ts

@@ -19,6 +19,7 @@ import { UserCollectionModule } from './user-collection/user-collection.module';
 import { ShortcodeModule } from './shortcode/shortcode.module';
 import { COOKIES_NOT_FOUND } from './errors';
 import { ThrottlerModule } from '@nestjs/throttler';
+import { AppController } from './app.controller';
 
 @Module({
   imports: [
@@ -81,5 +82,6 @@ import { ThrottlerModule } from '@nestjs/throttler';
     ShortcodeModule,
   ],
   providers: [GQLComplexityPlugin],
+  controllers: [AppController],
 })
 export class AppModule {}

packages/hoppscotch-backend/src/user-history/user-history.service.spec.ts

@@ -24,6 +24,8 @@ beforeEach(() => {
   mockPubSub.publish.mockClear();
 });
 
+const date = new Date();
+
 describe('UserHistoryService', () => {
   describe('fetchUserHistory', () => {
     test('Should return a list of users REST history if exists', async () => {
@@ -400,7 +402,7 @@ describe('UserHistoryService', () => {
         request: [{}],
         responseMetadata: [{}],
         reqType: ReqType.REST,
-        executedOn: new Date(),
+        executedOn: date,
         isStarred: false,
       });
 
@@ -410,7 +412,7 @@ describe('UserHistoryService', () => {
         request: JSON.stringify([{}]),
         responseMetadata: JSON.stringify([{}]),
         reqType: ReqType.REST,
-        executedOn: new Date(),
+        executedOn: date,
         isStarred: false,
       };
 

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.VITE_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-selfhost-web/index.html

@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <script>
+      globalThis.import_meta_env = JSON.parse('"import_meta_env_placeholder"')
+    </script>
     <title>Hoppscotch • Open source API development ecosystem</title>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />

packages/hoppscotch-selfhost-web/meta.ts

@@ -36,7 +36,7 @@ export const META_TAGS = (env: Record<string, string>): IHTMLTag[] => [
   },
   {
     name: "image",
-    content: `${env.VITE_BASE_URL}/banner.png`,
+    content: `${env.APP_BASE_URL}/banner.png`,
   },
   // Open Graph tags
   {
@@ -49,7 +49,7 @@ export const META_TAGS = (env: Record<string, string>): IHTMLTag[] => [
   },
   {
     name: "og:image",
-    content: `${env.VITE_BASE_URL}/banner.png`,
+    content: `${env.APP_BASE_URL}/banner.png`,
   },
   // Twitter tags
   {
@@ -74,7 +74,7 @@ export const META_TAGS = (env: Record<string, string>): IHTMLTag[] => [
   },
   {
     name: "twitter:image",
-    content: `${env.VITE_BASE_URL}/banner.png`,
+    content: `${env.APP_BASE_URL}/banner.png`,
   },
   // Add to homescreen for Chrome on Android. Fallback for PWA (handled by nuxt)
   {
@@ -84,7 +84,7 @@ export const META_TAGS = (env: Record<string, string>): IHTMLTag[] => [
   // Windows phone tile icon
   {
     name: "msapplication-TileImage",
-    content: `${env.VITE_BASE_URL}/icon.png`,
+    content: `${env.APP_BASE_URL}/icon.png`,
   },
   {
     name: "msapplication-TileColor",

packages/hoppscotch-selfhost-web/package.json

@@ -29,6 +29,7 @@
     "@hoppscotch/common": "workspace:^",
     "@hoppscotch/data": "workspace:^",
     "axios": "^1.4.0",
+    "@import-meta-env/unplugin": "^0.4.8",
     "buffer": "^6.0.3",
     "fp-ts": "^2.16.1",
     "process": "^0.11.10",
@@ -74,6 +75,7 @@
     "vite-plugin-windicss": "^1.9.1",
     "vitest": "^0.34.2",
     "vue-tsc": "^1.8.8",
+    "vite-plugin-fonts": "^0.6.0",
     "windicss": "^3.5.6"
   }
 }

packages/hoppscotch-selfhost-web/prod_run.mjs

@@ -0,0 +1,17 @@
+#!/usr/local/bin/node
+import { execSync } from "child_process"
+import fs from "fs"
+
+const envFileContent = Object.entries(process.env)
+  .filter(([env]) => env.startsWith("VITE_"))
+  .map(
+    ([env, val]) =>
+      `${env}=${val.startsWith('"') && val.endsWith('"') ? val : `"${val}"`}`
+  )
+  .join("\n")
+
+fs.writeFileSync("build.env", envFileContent)
+
+execSync(`npx import-meta-env -x build.env -e build.env -p "/site/**/*"`)
+
+fs.rmSync("build.env")

packages/hoppscotch-selfhost-web/vite.config.ts

@@ -17,10 +17,12 @@ import { FileSystemIconLoader } from "unplugin-icons/loaders"
 import * as path from "path"
 import Unfonts from "unplugin-fonts/vite"
 import legacy from "@vitejs/plugin-legacy"
+import ImportMetaEnv from "@import-meta-env/unplugin"
 
-const ENV = loadEnv("development", path.resolve(__dirname, "../../"))
+const ENV = loadEnv("development", path.resolve(__dirname, "../../"), ["VITE_"])
 
 export default defineConfig({
+  envPrefix: process.env.HOPP_ALLOW_RUNTIME_ENV ? "VITE_BUILDTIME_" : "VITE_",
   envDir: path.resolve(__dirname, "../../"),
   // TODO: Migrate @hoppscotch/data to full ESM
   define: {
@@ -78,14 +80,15 @@ export default defineConfig({
       routeStyle: "nuxt",
       dirs: "../hoppscotch-common/src/pages",
       importMode: "async",
-      onRoutesGenerated: (routes) =>
+      onRoutesGenerated(routes) {
         generateSitemap({
           routes,
           nuxtStyle: true,
           allowRobots: true,
           dest: ".sitemap-gen",
           hostname: ENV.VITE_BASE_URL,
-        }),
+        })
+      },
     }),
     StaticCopy({
       targets: [
@@ -239,5 +242,9 @@ export default defineConfig({
       modernPolyfills: ["es.string.replace-all"],
       renderLegacyChunks: false,
     }),
+    ImportMetaEnv.vite({
+      example: "../../.env.example",
+      env: "../../.env",
+    }),
   ],
 })

packages/hoppscotch-sh-admin/index.html

@@ -2,6 +2,9 @@
 <html lang="en" data-font-size="large">
 
 <head>
+  <script>
+    globalThis.import_meta_env = JSON.parse('"import_meta_env_placeholder"')
+  </script>
   <meta charset="UTF-8">
   <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -14,4 +17,4 @@
   <script type="module" src="/src/main.ts"></script>
 </body>
 
-</html>
+</html>

packages/hoppscotch-sh-admin/package.json

@@ -51,9 +51,12 @@
     "@graphql-codegen/typescript-document-nodes": "3.0.0",
     "@graphql-codegen/typescript-operations": "3.0.0",
     "@graphql-codegen/urql-introspection": "2.2.1",
+    "@import-meta-env/cli": "^0.6.3",
+    "@import-meta-env/unplugin": "^0.4.8",
     "@intlify/vite-plugin-vue-i18n": "^7.0.0",
     "@vitejs/plugin-vue": "^3.1.0",
     "@vue/compiler-sfc": "^3.2.6",
+    "dotenv": "^16.0.3",
     "graphql-tag": "^2.12.6",
     "npm-run-all": "^4.1.5",
     "sass": "^1.57.1",

packages/hoppscotch-sh-admin/prod_run.mjs

@@ -0,0 +1,18 @@
+#!/usr/local/bin/node
+import { execSync } from "child_process"
+import fs from "fs"
+
+const envFileContent = Object.entries(process.env)
+  .filter(([env]) => env.startsWith("VITE_"))
+  .map(([env, val]) => `${env}=${
+    (val.startsWith("\"") && val.endsWith("\""))
+      ? val
+      : `"${val}"`
+  }`)
+  .join("\n")
+
+fs.writeFileSync("build.env", envFileContent)
+
+execSync(`npx import-meta-env -x build.env -e build.env -p "/site/**/*"`)
+
+fs.rmSync("build.env")

packages/hoppscotch-sh-admin/src/components.d.ts

@@ -39,5 +39,28 @@ declare module '@vue/runtime-core' {
     Tippy: typeof import('vue-tippy')['Tippy'];
     UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default'];
     UsersTable: typeof import('./components/users/Table.vue')['default'];
+    AppHeader: typeof import('./components/app/Header.vue')['default']
+    AppLogin: typeof import('./components/app/Login.vue')['default']
+    AppLogout: typeof import('./components/app/Logout.vue')['default']
+    AppModal: typeof import('./components/app/Modal.vue')['default']
+    AppSidebar: typeof import('./components/app/Sidebar.vue')['default']
+    AppToast: typeof import('./components/app/Toast.vue')['default']
+    DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default']
+    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
+    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
+    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
+    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
+    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
+    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
+    TeamsAdd: typeof import('./components/teams/Add.vue')['default']
+    TeamsDetails: typeof import('./components/teams/Details.vue')['default']
+    TeamsInvite: typeof import('./components/teams/Invite.vue')['default']
+    TeamsMembers: typeof import('./components/teams/Members.vue')['default']
+    TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default']
+    TeamsTable: typeof import('./components/teams/Table.vue')['default']
+    Tippy: typeof import('vue-tippy')['Tippy']
+    UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default']
+    UsersTable: typeof import('./components/users/Table.vue')['default']
   }
 }

packages/hoppscotch-sh-admin/vite.config.ts

@@ -10,10 +10,14 @@ import Pages from 'vite-plugin-pages';
 import Layouts from 'vite-plugin-vue-layouts';
 import VueI18n from '@intlify/vite-plugin-vue-i18n';
 import path from 'path';
+import ImportMetaEnv from "@import-meta-env/unplugin"
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  envDir: path.resolve(__dirname, '../../'),
+  envPrefix:
+    process.env.HOPP_ALLOW_RUNTIME_ENV
+      ? "VITE_BUILDTIME_"
+      : "VITE_",
   server: {
     port: 3100,
   },
@@ -85,7 +89,11 @@ export default defineConfig({
             variables: ["variable-full"],
           },
         ],
-      },
+      }
+    }),
+    ImportMetaEnv.vite({
+      example: "../../.env.example",
+      env: "../../.env",
     }),
   ],
 });