Hosting option enhanced

README.md

@@ -58,16 +58,19 @@ This will start the QuestHelper server, which you can access at [http://localhos
 You can customize settings using environment variables:
 
 | Variable | Purpose | Default Value |
-|----------|---------|---------|
+|----------|---------|---------------|
 | `QSTH_HOST` | Set the host address | `::` |
 | `QSTH_PORT` | Set the port number | `8082` |
+| `QSTH_ALLOWED_HOST` | Controls allowed hosts (`true` to accept any host) | `true` |
+| `QSTH_BASE_URL` | Subfolder name when hosting under a subpath (ex: use `app` for site.com/app). Leave empty for root. | `''` |
 
-**Example:**
+Example:
 ```bash
-QUESTHELPER_HOST='0.0.0.0' QUESTHELPER_PORT=3000 npm run app
+# bind to all interfaces on port 3000, allow any host, and serve under /questhelper
+QSTH_HOST='0.0.0.0' QSTH_PORT=3000 QSTH_ALLOWED_HOST='true' QSTH_BASE_URL='questhelper' npm run app
 ```
 
-Since the app only uses the root `/` path, you can safely use a custom domain or reverse proxy without conflicts.
+Since the app normally uses the root (`/`) path, you can safely use a custom domain or reverse proxy without conflicts. If you set `QSTH_BASE_URL`, ensure your reverse proxy forwards the subpath (and rewrites requests) to the app accordingly.
 
 
 ## 💬 Support

src/App.tsx

@@ -11,7 +11,7 @@ const App = () => (
   <QueryClientProvider client={queryClient}>
     <TooltipProvider>
       <Toaster />
-      <BrowserRouter>
+      <BrowserRouter basename={import.meta.env.QSTH_BASE_URL || ""}>
         <Routes>
           <Route path="/" element={<Index />} />
           {/* custom routes here "*" for all */}

vite.config.ts

@@ -3,14 +3,25 @@ import react from '@vitejs/plugin-react-swc';
 import path from 'path';
 
 export default defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd(), ['QUESTHELPER_HOST', 'QUESTHELPER_PORT']);
+  const env = loadEnv(mode, process.cwd(), ['QUESTHELPER_HOST', 'QUESTHELPER_PORT', 'QSTH_BASE_URL', 'QSTH_ALLOWED_HOSTS']);
 
   const getPort = () => {
     const p = env.QUESTHELPER_PORT ?? process.env.QUESTHELPER_PORT;
     return p ? parseInt(p, 10) : 8082;
   };
 
+  const getBase = () => {
+    const b = env.QSTH_BASE_URL ?? process.env.QSTH_BASE_URL ?? '/';
+    return b.endsWith('/') ? b : b + '/';
+  };
+
+  const getAllowedHosts = () => {
+    const hosts = env.QSTH_ALLOWED_HOSTS ?? process.env.QSTH_ALLOWED_HOSTS ?? '*';
+    return hosts === '*' ? true : hosts.split(',').map(h => h.trim());
+  };
+
   return {
+    base: getBase(),
     plugins: [react()],
     resolve: {
       alias: {
@@ -20,7 +31,7 @@ export default defineConfig(({ mode }) => {
     server: {
       host: env.QUESTHELPER_HOST ?? process.env.QUESTHELPER_HOST ?? '::',
       port: getPort(),
-      strictPort: true,
+      allowedHosts: getAllowedHosts(),
     },
     envPrefix: 'QSTH_',
   };