feat: self host packaging (HBE-166) (#41)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-sh-admin/Caddyfile

@@ -0,0 +1,5 @@
+:8080 {
+  try_files {path} /
+  root * /site
+  file_server
+}

packages/hoppscotch-sh-admin/Dockerfile

@@ -0,0 +1,21 @@
+# Initial stage, just build the app
+FROM node:lts as builder
+
+WORKDIR /usr/src/app
+
+RUN npm i -g pnpm
+
+COPY . .
+RUN pnpm install
+
+WORKDIR /usr/src/app/packages/hoppscotch-sh-admin/
+RUN pnpm run build
+
+
+# Final stage, take the build artifacts and package it into a static Caddy server
+FROM caddy:2-alpine
+WORKDIR /site
+COPY packages/hoppscotch-sh-admin/Caddyfile /etc/caddy/Caddyfile
+COPY --from=builder /usr/src/app/packages/hoppscotch-sh-admin/dist/ .
+
+EXPOSE 8080

packages/hoppscotch-sh-admin/package.json

@@ -6,8 +6,10 @@
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",
     "dev:vite": "vite",
-    "dev:gql-codegen": "graphql-codegen --require dotenv/config --config gql-codegen.yml --watch dotenv_config_path=\".env\"",
-    "build": "vue-tsc && vite build",
+    "dev:gql-codegen": "graphql-codegen --require dotenv/config --config gql-codegen.yml --watch dotenv_config_path=\"../../.env\"",
+    "gql-codegen": "graphql-codegen --require dotenv/config --config gql-codegen.yml dotenv_config_path=\"../../.env\"",
+    "postinstall": "pnpm run gql-codegen",
+    "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {

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

@@ -22,6 +22,24 @@ declare module '@vue/runtime-core' {
     HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
     IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
+    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
+    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
+    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
+    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
+    IconLucideChevronLeft: typeof import('~icons/lucide/chevron-left')['default']
+    IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
+    IconLucideEdit: typeof import('~icons/lucide/edit')['default']
+    IconLucideFolderTree: typeof import('~icons/lucide/folder-tree')['default']
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
+    IconLucideLayoutDashboard: typeof import('~icons/lucide/layout-dashboard')['default']
+    IconLucideLineChart: typeof import('~icons/lucide/line-chart')['default']
+    IconLucideMenu: typeof import('~icons/lucide/menu')['default']
+    IconLucideMoreHorizontal: typeof import('~icons/lucide/more-horizontal')['default']
+    IconLucideSidebarClose: typeof import('~icons/lucide/sidebar-close')['default']
+    IconLucideSidebarOpen: typeof import('~icons/lucide/sidebar-open')['default']
+    IconLucideUser: typeof import('~icons/lucide/user')['default']
+    IconLucideUserCog: typeof import('~icons/lucide/user-cog')['default']
+    IconLucideUsers: typeof import('~icons/lucide/users')['default']
     ProfilePicture: typeof import('./components/profile/Picture.vue')['default']
     TeamsAddMembers: typeof import('./components/teams/AddMembers.vue')['default']
     TeamsDetails: typeof import('./components/teams/Details.vue')['default']

packages/hoppscotch-sh-admin/src/main.ts

@@ -12,22 +12,25 @@ import '../assets/scss/styles.scss';
 import { HOPP_MODULES } from './modules';
 import { auth } from './helpers/auth';
 
-const app = createApp(App).use(
-  urql,
-  createClient({
-    url: import.meta.env.VITE_BACKEND_GQL_URL,
-    fetchOptions: () => {
-      return {
-        credentials: 'include',
-      };
-    },
-  })
-);
+// Top-level await is not available in our targets
+(async () => {
+  const app = createApp(App).use(
+    urql,
+    createClient({
+      url: import.meta.env.VITE_BACKEND_GQL_URL,
+      fetchOptions: () => {
+        return {
+          credentials: 'include',
+        };
+      },
+    })
+  );
 
-// Initialize auth
-await auth.performAuthInit();
+  // Initialize auth
+  await auth.performAuthInit();
 
-// Initialize modules
-HOPP_MODULES.forEach((mod) => mod.onVueAppInit?.(app));
+  // Initialize modules
+  HOPP_MODULES.forEach((mod) => mod.onVueAppInit?.(app));
 
-app.mount('#app');
+  app.mount('#app');
+})()

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

@@ -11,6 +11,7 @@ import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  envDir: path.resolve(__dirname, "../../"),
   server: {
     port: 3000,
   },