diff --git a/README.md b/README.md index 0b2df5a..faa5fd6 100644 --- a/README.md +++ b/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`. diff --git a/docker-compose.yml b/docker-compose.yml index e2f901f..a9970df 100644 --- a/docker-compose.yml +++ b/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: diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index b15283b..6c65f46 100644 --- a/frontend/vite.config.ts +++ b/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({ - plugins: [react()], - server: { - host: "0.0.0.0", - port: 5173, - }, +export default defineConfig(({ mode }) => { + const env = loadEnv(mode, process.cwd(), ""); + const allowedHosts = (env.VITE_ALLOWED_HOSTS ?? "localhost,127.0.0.1,plasttrack.sable.ynsdev.site") + .split(",") + .map((host) => host.trim()) + .filter(Boolean); + + return { + plugins: [react()], + server: { + host: "0.0.0.0", + port: 5173, + allowedHosts, + }, + }; });