Allow deployed frontend host

README.md

@@ -118,6 +118,7 @@ POSTGRES_PASSWORD=change-this-password
 FRONTEND_ORIGIN=http://SERVER_IP:5173
 VITE_API_BASE_URL=http://SERVER_IP:8000
 VITE_WS_URL=ws://SERVER_IP:8000/ws/dashboard
+VITE_ALLOWED_HOSTS=SERVER_IP,localhost,127.0.0.1
 ```
 
 For a domain with HTTPS and a reverse proxy, use:
@@ -129,12 +130,16 @@ POSTGRES_PASSWORD=change-this-password
 FRONTEND_ORIGIN=https://plasttrack.example.com
 VITE_API_BASE_URL=https://api.plasttrack.example.com
 VITE_WS_URL=wss://api.plasttrack.example.com/ws/dashboard
+VITE_ALLOWED_HOSTS=plasttrack.example.com
 ```
 
 Important: do not keep `localhost` in `VITE_API_BASE_URL` or `VITE_WS_URL`
 for a remote deployment. `localhost` would point to the operator's browser
 machine, not the Docker host.
 
+If Vite returns `Blocked request. This host is not allowed`, add the public
+frontend host to `VITE_ALLOWED_HOSTS` as a comma-separated value.
+
 ### 3. Deploy
 
 Click `Deploy the stack`.

docker-compose.yml

@@ -65,6 +65,7 @@ services:
     environment:
       VITE_API_BASE_URL: ${VITE_API_BASE_URL:-http://localhost:8000}
       VITE_WS_URL: ${VITE_WS_URL:-ws://localhost:8000/ws/dashboard}
+      VITE_ALLOWED_HOSTS: ${VITE_ALLOWED_HOSTS:-localhost,127.0.0.1,plasttrack.sable.ynsdev.site}
     depends_on:
       - backend
     ports:

frontend/vite.config.ts

@@ -1,10 +1,19 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react-swc";
 
-export default defineConfig({
+export default defineConfig(({ mode }) => {
-  plugins: [react()],
+  const env = loadEnv(mode, process.cwd(), "");
-  server: {
+  const allowedHosts = (env.VITE_ALLOWED_HOSTS ?? "localhost,127.0.0.1,plasttrack.sable.ynsdev.site")
-    host: "0.0.0.0",
+    .split(",")
-    port: 5173,
+    .map((host) => host.trim())
-  },
+    .filter(Boolean);
+
+  return {
+    plugins: [react()],
+    server: {
+      host: "0.0.0.0",
+      port: 5173,
+      allowedHosts,
+    },
+  };
 });