feat: support for subpath based access in SH apps (#3449)

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

packages/hoppscotch-backend/backend.Caddyfile

@@ -0,0 +1,3 @@
+:80 :3170 {
+	reverse_proxy localhost:8080
+}

packages/hoppscotch-backend/prod_run.mjs

@@ -0,0 +1,66 @@
+#!/usr/local/bin/node
+// @ts-check
+
+import { spawn } from 'child_process';
+import process from 'process';
+
+function runChildProcessWithPrefix(command, args, prefix) {
+  const childProcess = spawn(command, args);
+
+  childProcess.stdout.on('data', (data) => {
+    const output = data.toString().trim().split('\n');
+    output.forEach((line) => {
+      console.log(`${prefix} | ${line}`);
+    });
+  });
+
+  childProcess.stderr.on('data', (data) => {
+    const error = data.toString().trim().split('\n');
+    error.forEach((line) => {
+      console.error(`${prefix} | ${line}`);
+    });
+  });
+
+  childProcess.on('close', (code) => {
+    console.log(`${prefix} Child process exited with code ${code}`);
+  });
+
+  childProcess.on('error', (stuff) => {
+    console.error('error');
+    console.error(stuff);
+  });
+
+  return childProcess;
+}
+
+const caddyProcess = runChildProcessWithPrefix(
+  'caddy',
+  ['run', '--config', '/etc/caddy/backend.Caddyfile', '--adapter', 'caddyfile'],
+  'App/Admin Dashboard Caddy',
+);
+const backendProcess = runChildProcessWithPrefix(
+  'pnpm',
+  ['run', 'start:prod'],
+  'Backend Server',
+);
+
+caddyProcess.on('exit', (code) => {
+  console.log(`Exiting process because Caddy Server exited with code ${code}`);
+  process.exit(code);
+});
+
+backendProcess.on('exit', (code) => {
+  console.log(
+    `Exiting process because Backend Server exited with code ${code}`,
+  );
+  process.exit(code);
+});
+
+process.on('SIGINT', () => {
+  console.log('SIGINT received, exiting...');
+
+  caddyProcess.kill('SIGINT');
+  backendProcess.kill('SIGINT');
+
+  process.exit(0);
+});

packages/hoppscotch-selfhost-web/Caddyfile

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

packages/hoppscotch-selfhost-web/selfhost-web.Caddyfile

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

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

@@ -223,6 +223,8 @@ export default defineConfig({
           /twitter/,
           /github/,
           /announcements/,
+          /admin/,
+          /backend/,
         ],
       },
     }),

packages/hoppscotch-sh-admin/Caddyfile

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

packages/hoppscotch-sh-admin/prod_run.mjs

@@ -1,18 +1,70 @@
 #!/usr/local/bin/node
-import { execSync } from "child_process"
-import fs from "fs"
+import { execSync, spawn } from 'child_process';
+import fs from 'fs';
+import process from 'process';
+
+function runChildProcessWithPrefix(command, args, prefix) {
+  const childProcess = spawn(command, args);
+
+  childProcess.stdout.on('data', (data) => {
+    const output = data.toString().trim().split('\n');
+    output.forEach((line) => {
+      console.log(`${prefix} | ${line}`);
+    });
+  });
+
+  childProcess.stderr.on('data', (data) => {
+    const error = data.toString().trim().split('\n');
+    error.forEach((line) => {
+      console.error(`${prefix} | ${line}`);
+    });
+  });
+
+  childProcess.on('close', (code) => {
+    console.log(`${prefix} Child process exited with code ${code}`);
+  });
+
+  childProcess.on('error', (stuff) => {
+    console.log('error');
+    console.log(stuff);
+  });
+
+  return childProcess;
+}
 
 const envFileContent = Object.entries(process.env)
-  .filter(([env]) => env.startsWith("VITE_"))
-  .map(([env, val]) => `${env}=${
-    (val.startsWith("\"") && val.endsWith("\""))
-      ? val
-      : `"${val}"`
-  }`)
-  .join("\n")
+  .filter(([env]) => env.startsWith('VITE_'))
+  .map(
+    ([env, val]) =>
+      `${env}=${val.startsWith('"') && val.endsWith('"') ? val : `"${val}"`}`
+  )
+  .join('\n');
 
-fs.writeFileSync("build.env", envFileContent)
+fs.writeFileSync('build.env', envFileContent);
 
-execSync(`npx import-meta-env -x build.env -e build.env -p "/site/**/*"`)
+execSync(`npx import-meta-env -x build.env -e build.env -p "/site/**/*"`);
 
-fs.rmSync("build.env")
+fs.rmSync('build.env');
+
+const caddyFileName =
+  process.env.ENABLE_SUBPATH_BASED_ACCESS === 'true'
+    ? 'sh-admin-subpath-access.Caddyfile'
+    : 'sh-admin-multiport-setup.Caddyfile';
+const caddyProcess = runChildProcessWithPrefix(
+  'caddy',
+  ['run', '--config', `/etc/caddy/${caddyFileName}`, '--adapter', 'caddyfile'],
+  'App/Admin Dashboard Caddy'
+);
+
+caddyProcess.on('exit', (code) => {
+  console.log(`Exiting process because Caddy Server exited with code ${code}`);
+  process.exit(code);
+});
+
+process.on('SIGINT', () => {
+  console.log('SIGINT received, exiting...');
+
+  caddyProcess.kill('SIGINT');
+
+  process.exit(0);
+});

packages/hoppscotch-sh-admin/sh-admin-multiport-setup.Caddyfile

@@ -0,0 +1,5 @@
+:80 :3100 {
+	try_files {path} /
+	root * /site/sh-admin-multiport-setup
+	file_server
+}

packages/hoppscotch-sh-admin/sh-admin-subpath-access.Caddyfile

@@ -0,0 +1,11 @@
+:80 :3100 {
+	handle_path /admin* {
+		root * /site/sh-admin-subpath-access
+		file_server
+		try_files {path} /
+	}
+
+	handle {
+		respond 404
+	}
+}

packages/hoppscotch-sh-admin/src/modules/router.ts

@@ -42,7 +42,7 @@ export const isLoadingInitialRoute = readonly(_isLoadingInitialRoute);
 export default <HoppModule>{
   onVueAppInit(app) {
     const router = createRouter({
-      history: createWebHistory(),
+      history: createWebHistory(import.meta.env.BASE_URL),
       routes,
     });
 

packages/hoppscotch-sh-admin/src/pages/_.vue

@@ -6,7 +6,7 @@
     :class="{ 'min-h-screen': statusCode !== 404 }"
   >
     <img
-      :src="`/images/youre_lost.svg`"
+      :src="imgUrl"
       loading="lazy"
       class="inline-flex flex-col object-contain object-center mb-2 h-46 w-46"
       :alt="message"
@@ -44,6 +44,8 @@ const props = defineProps({
   },
 });
 
+const imgUrl = `${import.meta.env.BASE_URL}images/youre_lost.svg`
+
 const statusCode = computed(() => props.error?.statusCode ?? 404);
 
 const message = computed(