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

2023-07-14 16:43:38 +05:30
parent 6454d83486
commit 1b1a09c675
24 changed files with 466 additions and 70 deletions
--- a/packages/hoppscotch-backend/src/admin/admin.service.ts
+++ b/packages/hoppscotch-backend/src/admin/admin.service.ts
@@ -77,7 +77,7 @@ export class AdminService {
        template: 'code-your-own',
        variables: {
          inviteeEmail: inviteeEmail,
-          magicLink: `${process.env.VITE_BASE_URL}`,
+          magicLink: `${process.env.APP_BASE_URL}`,
        },
      });
    } catch (e) {
--- a/packages/hoppscotch-backend/src/auth/auth.service.ts
+++ b/packages/hoppscotch-backend/src/auth/auth.service.ts
@@ -95,9 +95,9 @@ export class AuthService {
   */
  private async generateRefreshToken(userUid: string) {
    const refreshTokenPayload: RefreshTokenPayload = {
-      iss: process.env.VITE_BASE_URL,
+      iss: process.env.APP_BASE_URL,
      sub: userUid,
-      aud: [process.env.VITE_BASE_URL],
+      aud: [process.env.APP_BASE_URL],
    };

    const refreshToken = await this.jwtService.sign(refreshTokenPayload, {
@@ -127,9 +127,9 @@ export class AuthService {
   */
  async generateAuthTokens(userUid: string) {
    const accessTokenPayload: AccessTokenPayload = {
-      iss: process.env.VITE_BASE_URL,
+      iss: process.env.APP_BASE_URL,
      sub: userUid,
-      aud: [process.env.VITE_BASE_URL],
+      aud: [process.env.APP_BASE_URL],
    };

    const refreshToken = await this.generateRefreshToken(userUid);
@@ -218,14 +218,14 @@ export class AuthService {
    let url: string;
    switch (origin) {
      case Origin.ADMIN:
-        url = process.env.VITE_ADMIN_URL;
+        url = process.env.APP_ADMIN_URL;
        break;
      case Origin.APP:
-        url = process.env.VITE_BASE_URL;
+        url = process.env.APP_BASE_URL;
        break;
      default:
        // if origin is invalid by default set URL to Hoppscotch-App
-        url = process.env.VITE_BASE_URL;
+        url = process.env.APP_BASE_URL;
    }

    await this.mailerService.sendEmail(email, {
--- a/packages/hoppscotch-common/meta.ts
+++ b/packages/hoppscotch-common/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",
--- a/packages/hoppscotch-common/src/components/http/Request.vue
+++ b/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()
--- a/packages/hoppscotch-common/src/components/profile/Shortcode.vue
+++ b/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}`)
--- a/packages/hoppscotch-common/src/helpers/backend/GQLClient.ts
+++ b/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"
 /**
--- a/packages/hoppscotch-common/src/helpers/strategies/AxiosStrategy.ts
+++ b/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
--- a/packages/hoppscotch-common/src/modules/sentry.ts
+++ b/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)
      }
    })

--- a/packages/hoppscotch-selfhost-web/index.html
+++ b/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" />
--- a/packages/hoppscotch-selfhost-web/meta.ts
+++ b/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",
--- a/packages/hoppscotch-selfhost-web/package.json
+++ b/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"
  }
 }
--- a/packages/hoppscotch-selfhost-web/prod_run.mjs
+++ b/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("APP_"))
+  .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")
--- a/packages/hoppscotch-selfhost-web/src/platform/auth.ts
+++ b/packages/hoppscotch-selfhost-web/src/platform/auth.ts
@@ -17,23 +17,21 @@ const currentUser$ = new BehaviorSubject<HoppUser | null>(null)
 export const probableUser$ = new BehaviorSubject<HoppUser | null>(null)

 async function logout() {
-  await axios.get(`${import.meta.env.VITE_BACKEND_API_URL}/auth/logout`, {
+  await axios.get(`${import.meta.env.APP_BACKEND_API_URL}/auth/logout`, {
    withCredentials: true,
  })
 }

 async function signInUserWithGithubFB() {
-  window.location.href = `${import.meta.env.VITE_BACKEND_API_URL}/auth/github`
+  window.location.href = `${import.meta.env.APP_BACKEND_API_URL}/auth/github`
 }

 async function signInUserWithGoogleFB() {
-  window.location.href = `${import.meta.env.VITE_BACKEND_API_URL}/auth/google`
+  window.location.href = `${import.meta.env.APP_BACKEND_API_URL}/auth/google`
 }

 async function signInUserWithMicrosoftFB() {
-  window.location.href = `${
-    import.meta.env.VITE_BACKEND_API_URL
-  }/auth/microsoft`
+  window.location.href = `${import.meta.env.APP_BACKEND_API_URL}/auth/microsoft`
 }

 async function getInitialUserDetails() {
@@ -53,7 +51,7 @@ async function getInitialUserDetails() {
      message: string
    }>
  }>(
-    `${import.meta.env.VITE_BACKEND_GQL_URL}`,
+    `${import.meta.env.APP_BACKEND_GQL_URL}`,
    {
      query: `query Me {
      me {
@@ -147,7 +145,7 @@ async function setInitialUser() {

 async function refreshToken() {
  const res = await axios.get(
-    `${import.meta.env.VITE_BACKEND_API_URL}/auth/refresh`,
+    `${import.meta.env.APP_BACKEND_API_URL}/auth/refresh`,
    {
      withCredentials: true,
    }
@@ -166,7 +164,7 @@ async function refreshToken() {

 async function sendMagicLink(email: string) {
  const res = await axios.post(
-    `${import.meta.env.VITE_BACKEND_API_URL}/auth/signin`,
+    `${import.meta.env.APP_BACKEND_API_URL}/auth/signin`,
    {
      email,
    },
@@ -284,7 +282,7 @@ export const def: AuthPlatformDef = {
    const deviceIdentifier = getLocalConfig("deviceIdentifier")

    await axios.post(
-      `${import.meta.env.VITE_BACKEND_API_URL}/auth/verify`,
+      `${import.meta.env.APP_BACKEND_API_URL}/auth/verify`,
      {
        token: token,
        deviceIdentifier,
--- a/packages/hoppscotch-selfhost-web/vite.config.ts
+++ b/packages/hoppscotch-selfhost-web/vite.config.ts
@@ -17,8 +17,9 @@ 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, "../../"), ["APP_"])

 export default defineConfig({
  envDir: path.resolve(__dirname, "../../"),
@@ -78,14 +79,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 +241,9 @@ export default defineConfig({
      modernPolyfills: ["es.string.replace-all"],
      renderLegacyChunks: false,
    }),
+    ImportMetaEnv.vite({
+      example: "../../.env.example",
+      env: "../../.env",
+    }),
  ],
 })
--- a/packages/hoppscotch-sh-admin/index.html
+++ b/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>
--- a/packages/hoppscotch-sh-admin/package.json
+++ b/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",
--- a/packages/hoppscotch-sh-admin/prod_run.mjs
+++ b/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("APP_"))
+  .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")
--- a/packages/hoppscotch-sh-admin/src/components.d.ts
+++ b/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']
  }
 }
--- a/packages/hoppscotch-sh-admin/src/helpers/auth.ts
+++ b/packages/hoppscotch-sh-admin/src/helpers/auth.ts
@@ -55,27 +55,27 @@ const currentUser$ = new BehaviorSubject<HoppUser | null>(null);
 export const probableUser$ = new BehaviorSubject<HoppUser | null>(null);

 async function logout() {
-  await axios.get(`${import.meta.env.VITE_BACKEND_API_URL}/auth/logout`, {
+  await axios.get(`${import.meta.env.APP_BACKEND_API_URL}/auth/logout`, {
    withCredentials: true,
  });
 }

 async function signInUserWithGithubFB() {
  window.location.href = `${
-    import.meta.env.VITE_BACKEND_API_URL
-  }/auth/github?redirect_uri=${import.meta.env.VITE_ADMIN_URL}`;
+    import.meta.env.APP_BACKEND_API_URL
+  }/auth/github?redirect_uri=${import.meta.env.APP_ADMIN_URL}`;
 }

 async function signInUserWithGoogleFB() {
  window.location.href = `${
-    import.meta.env.VITE_BACKEND_API_URL
-  }/auth/google?redirect_uri=${import.meta.env.VITE_ADMIN_URL}`;
+    import.meta.env.APP_BACKEND_API_URL
+  }/auth/google?redirect_uri=${import.meta.env.APP_ADMIN_URL}`;
 }

 async function signInUserWithMicrosoftFB() {
  window.location.href = `${
-    import.meta.env.VITE_BACKEND_API_URL
-  }/auth/microsoft?redirect_uri=${import.meta.env.VITE_ADMIN_URL}`;
+    import.meta.env.APP_BACKEND_API_URL
+  }/auth/microsoft?redirect_uri=${import.meta.env.APP_ADMIN_URL}`;
 }

 async function getInitialUserDetails() {
@@ -95,7 +95,7 @@ async function getInitialUserDetails() {
      message: string;
    }>;
  }>(
-    `${import.meta.env.VITE_BACKEND_GQL_URL}`,
+    `${import.meta.env.APP_BACKEND_GQL_URL}`,
    {
      query: `query Me {
      me {
@@ -189,7 +189,7 @@ async function setInitialUser() {

 async function refreshToken() {
  const res = await axios.get(
-    `${import.meta.env.VITE_BACKEND_API_URL}/auth/refresh`,
+    `${import.meta.env.APP_BACKEND_API_URL}/auth/refresh`,
    {
      withCredentials: true,
    }
@@ -208,7 +208,7 @@ async function refreshToken() {

 async function elevateUser() {
  const res = await axios.get(
-    `${import.meta.env.VITE_BACKEND_API_URL}/auth/verify/admin`,
+    `${import.meta.env.APP_BACKEND_API_URL}/auth/verify/admin`,
    {
      withCredentials: true,
    }
@@ -219,7 +219,7 @@ async function elevateUser() {

 async function sendMagicLink(email: string) {
  const res = await axios.post(
-    `${import.meta.env.VITE_BACKEND_API_URL}/auth/signin?origin=admin`,
+    `${import.meta.env.APP_BACKEND_API_URL}/auth/signin?origin=admin`,
    {
      email,
    },
@@ -337,7 +337,7 @@ export const auth = {
    const deviceIdentifier = getLocalConfig('deviceIdentifier');

    await axios.post(
-      `${import.meta.env.VITE_BACKEND_API_URL}/auth/verify`,
+      `${import.meta.env.APP_BACKEND_API_URL}/auth/verify`,
      {
        token: token,
        deviceIdentifier,
@@ -383,7 +383,7 @@ export const auth = {
      await this.signInWithEmailLink(deviceIdentifier, window.location.href);

      removeLocalConfig('deviceIdentifier');
-      window.location.href = import.meta.env.VITE_ADMIN_URL;
+      window.location.href = import.meta.env.APP_ADMIN_URL;
    }
  },
 };
--- a/packages/hoppscotch-sh-admin/src/main.ts
+++ b/packages/hoppscotch-sh-admin/src/main.ts
@@ -20,7 +20,7 @@ import { auth } from './helpers/auth';
  const app = createApp(App).use(
    urql,
    createClient({
-      url: import.meta.env.VITE_BACKEND_GQL_URL,
+      url: import.meta.env.APP_BACKEND_GQL_URL,
      requestPolicy: 'network-only',
      fetchOptions: () => {
        return {
--- a/packages/hoppscotch-sh-admin/vite.config.ts
+++ b/packages/hoppscotch-sh-admin/vite.config.ts
@@ -10,10 +10,10 @@ 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, '../../'),
  server: {
    port: 3100,
  },
@@ -85,7 +85,11 @@ export default defineConfig({
            variables: ["variable-full"],
          },
        ],
-      },
+      }
+    }),
+    ImportMetaEnv.vite({
+      example: "../../.env.example",
+      env: "../../.env",
    }),
  ],
 });