Skip to content

fix the websocket connection error #378

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+6 −0
Open

fix the websocket connection error #378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0031d52
Add SERVER_BASE_URL to next.config.ts
hass-demacia Oct 20, 2025
9bf7119
Add SERVER_BASE_URL to Dockerfile
hass-demacia Oct 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ COPY public/ ./public/
# Increase Node.js memory limit for build and disable telemetry
ENV NODE_OPTIONS="--max-old-space-size=4096"
ENV NEXT_TELEMETRY_DISABLED=1
# `next build` inject `SERVER_BASE_URL` into bundle.js for client, once code is builded, bundle can't be modify by .env or ENV parameters.
ENV SERVER_BASE_URL="http://localhost:${PORT:-8001}"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

Setting SERVER_BASE_URL here hardcodes localhost into the build artifact. This value is then passed to the client-side code via the next.config.ts change, which will cause connection failures in any non-local deployment. The client's browser would try to connect to its own localhost instead of your server.

This environment variable should be removed from the build stage. The client should determine the server URL dynamically.

RUN NODE_ENV=production npm run build

FROM python:3.11-slim AS py_deps
Expand Down
4 changes: 4 additions & 0 deletions next.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ const TARGET_SERVER_BASE_URL = process.env.SERVER_BASE_URL || 'http://localhost:
const nextConfig: NextConfig = {
/* config options here */
output: 'standalone',
/* expose SERVER_BASE_URL to bundle */
env: {
SERVER_BASE_URL: TARGET_SERVER_BASE_URL,
},
Comment on lines +9 to +11
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

Exposing TARGET_SERVER_BASE_URL to the client bundle is problematic because it will contain a localhost URL baked in at build time. This will cause connection errors for users in a deployed environment.

For WebSocket connections on the client side, it's better to construct the URL dynamically based on window.location. This avoids hardcoding hostnames. For example:

// In client-side code
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const wsHost = window.location.host;
const wsUrl = `${wsProtocol}//${wsHost}`; // Adjust path as needed

This assumes your reverse proxy is configured to route WebSocket traffic from the same host to your backend service.

I recommend removing this env block. The SERVER_BASE_URL environment variable should be used for server-side logic only (like the existing rewrites), where it can be configured at runtime.

// Optimize build for Docker
experimental: {
optimizePackageImports: ['@mermaid-js/mermaid', 'react-syntax-highlighter'],
Expand Down