🧑‍💻 Add support for proxying to existing woodpecker server (#5354)

Co-authored-by: 6543 <6543@obermui.de>

web/package.json

@@ -53,6 +53,7 @@
     "@vitejs/plugin-vue": "^6.0.0",
     "@vue/compiler-sfc": "^3.5.18",
     "@vue/test-utils": "^2.4.6",
+    "dotenv": "^17.2.0",
     "eslint": "^9.17.0",
     "eslint-plugin-promise": "^7.2.1",
     "eslint-plugin-vue-scoped-css": "^2.9.0",

web/pnpm-lock.yaml

@@ -112,6 +112,9 @@ importers:
       '@vue/test-utils':
         specifier: ^2.4.6
         version: 2.4.6
+      dotenv:
+        specifier: ^17.2.0
+        version: 17.2.0
       eslint:
         specifier: ^9.17.0
         version: 9.31.0(jiti@2.4.2)
@@ -1477,6 +1480,10 @@ packages:
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
+  dotenv@17.2.0:
+    resolution: {integrity: sha512-Q4sgBT60gzd0BB0lSyYD3xM4YxrXA9y4uBDof1JNYGzOXrQdQ6yX+7XIAqoFOGQFOTK1D3Hts5OllpxMDZFONQ==}
+    engines: {node: '>=12'}
+
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
@@ -4411,6 +4418,8 @@ snapshots:
       domelementtype: 2.3.0
       domhandler: 5.0.3
 
+  dotenv@17.2.0: {}
+
   eastasianwidth@0.2.0: {}
 
   editorconfig@1.0.4:

web/vite.config.ts

@@ -4,21 +4,41 @@ import process from 'node:process';
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
 import tailwindcss from '@tailwindcss/vite';
 import vue from '@vitejs/plugin-vue';
+import dotenv from 'dotenv';
 import type { Plugin } from 'vite';
 import prismjs from 'vite-plugin-prismjs';
 import svgLoader from 'vite-svg-loader';
 import type { ViteUserConfig } from 'vitest/config';
 import { defineConfig } from 'vitest/config';
 
+dotenv.config({ path: path.resolve(__dirname, '../.env'), quiet: true });
+
+const getEnvString = (envVar: string | undefined) => (envVar != null && envVar !== '' ? envVar : undefined);
+const viteUserSessCookie = getEnvString(process.env.VITE_DEV_USER_SESS_COOKIE);
+const viteDevProxy = getEnvString(process.env.VITE_DEV_PROXY);
+
 function woodpeckerInfoPlugin(): Plugin {
   return {
     name: 'woodpecker-info',
     configureServer() {
-      const info =
+      if (viteDevProxy !== undefined) {
-        '1) Please add `WOODPECKER_DEV_WWW_PROXY=http://localhost:8010` to your `.env` file.\n' +
+        console.log(
-        'After starting the woodpecker server as well you should now be able to access the UI at http://localhost:8000/\n\n' +
+          [
-        '2) If you want to run the vite dev server (`pnpm start`) within a container please set `VITE_DEV_SERVER_HOST=0.0.0.0`.';
+            `Using dev server with proxy to existing Woodpecker server running at: ${viteDevProxy}`,
-      console.log(info);
+            '\n  🚀 Access the UI at http://localhost:8010/',
+          ].join('\n'),
+        );
+        return;
+      }
+
+      console.log(
+        [
+          '1) Please add `WOODPECKER_DEV_WWW_PROXY=http://localhost:8010` to your `.env` file.',
+          '2) Start the Woodpecker server',
+          '3) If you want to run the vite dev server (`pnpm start`) within a container please set `VITE_DEV_SERVER_HOST=0.0.0.0`.',
+          `\n  🚀 Access the UI at http://localhost:8000/`,
+        ].join('\n'),
+      );
     },
   };
 }
@@ -88,6 +108,29 @@ export default defineConfig({
     allowedHosts: true,
     host: process.env.VITE_DEV_SERVER_HOST ?? '127.0.0.1',
     port: 8010,
+    proxy:
+      viteDevProxy !== undefined
+        ? {
+            '/api': {
+              target: viteDevProxy,
+              changeOrigin: true,
+              headers: {
+                cookie: viteUserSessCookie !== undefined ? `user_sess=${viteUserSessCookie}` : '',
+              },
+            },
+            '/web-config.js': {
+              target: viteDevProxy,
+              changeOrigin: true,
+              headers: {
+                cookie: viteUserSessCookie !== undefined ? `user_sess=${viteUserSessCookie}` : '',
+              },
+            },
+            '/authorize': {
+              target: viteDevProxy,
+              changeOrigin: true,
+            },
+          }
+        : undefined,
   },
   test: {
     globals: true,