When not able to access the backend, the url displayed by the frontend is wrong

[rowdynl]

I configured the wrong url for the backend (should be https for my config, but I typed http) so the frontend could not reach the backend. However, it displays the wrong url, where it seems to try to connect to an internal URL, while it should display the configured one.

Below you see in the logs the frondend picked up the configured URL nicely, but the screenshot displays an internal url.

Logs from the frontend:

f1replay-frontend  | 2026-03-30T07:50:34.059897833Z Configured API URL: http://teamradio.mydomain.tld
f1replay-frontend  | 2026-03-30T07:50:34.359755337Z    ▲ Next.js 15.5.14
f1replay-frontend  | 2026-03-30T07:50:34.360137417Z    - Local:        http://localhost:3000
f1replay-frontend  | 2026-03-30T07:50:34.360167873Z    - Network:      http://0.0.0.0:3000
f1replay-frontend  | 2026-03-30T07:50:34.360296737Z 
f1replay-frontend  | 2026-03-30T07:50:34.360359577Z  ✓ Starting...
f1replay-frontend  | 2026-03-30T07:50:34.468098600Z  ✓ Ready in 117ms

Screenshot of the frontend error:

Docker compose:

services:
  f1replay-backend:
    image: ghcr.io/adn8naiagent/f1replaytiming-backend:latest
    container_name: f1replay-backend
    environment:
      - DATA_DIR=/data
      - FRONTEND_URL=http://f1replay.${DOMAIN}
      - OPENROUTER_API_KEY=${F1REPLAY_OPENROUTER_API_KEY}
      - PORT=8000
    networks:
      - web
    restart: unless-stopped
    volumes:
      - f1replay-cache:/data/fastf1-cache
      - f1replay-data:/data
    labels:
      - traefik.enable=true
      - traefik.http.routers.f1replay-backend.rule=Host(`teamradio.${DOMAIN}`)
      - traefik.http.routers.f1replay-backend.entrypoints=websecure
      - traefik.http.routers.f1replay-backend.tls.certresolver=letsencrypt
      - traefik.http.routers.f1replay-backend.priority=${TRAEFIK_PRIORITY}
      - traefik.http.routers.f1replay-backend.middlewares=authentik@file
      - traefik.http.services.f1replay-backend.loadbalancer.server.port=8000    

  f1replay-frontend:
    image: ghcr.io/adn8naiagent/f1replaytiming-frontend:latest
    container_name: f1replay-frontend
    environment: 
      - NEXT_PUBLIC_API_URL=http://teamradio.${DOMAIN} # <-- Here I screwed up, causing the error
    networks:
      - web
    restart: unless-stopped
    labels:
      - flame.type=application
      - flame.category=Fun and games
      - flame.name=F1 Replay Timing
      - flame.url=https://f1replay.${DOMAIN}
      - flame.icon=flag-checkered
      - traefik.enable=true
      - traefik.http.routers.f1replay.rule=Host(`f1replay.${DOMAIN}`)
      - traefik.http.routers.f1replay.entrypoints=websecure
      - traefik.http.routers.f1replay.tls.certresolver=letsencrypt
      - traefik.http.routers.f1replay.priority=${TRAEFIK_PRIORITY}
      - traefik.http.routers.f1replay.middlewares=authentik@file
      - traefik.http.services.f1replay.loadbalancer.server.port=3000services:
  f1replay-backend:
    image: ghcr.io/adn8naiagent/f1replaytiming-backend:latest
    container_name: f1replay-backend
    environment:
      - DATA_DIR=/data
      - FRONTEND_URL=http://f1replay.${DOMAIN}
      - OPENROUTER_API_KEY=${F1REPLAY_OPENROUTER_API_KEY}
      - PORT=8000
    networks:
      - web
    restart: unless-stopped
    volumes:
      - f1replay-cache:/data/fastf1-cache
      - f1replay-data:/data
    labels:
      - traefik.enable=true
      - traefik.http.routers.f1replay-backend.rule=Host(`teamradio.${DOMAIN}`)
      - traefik.http.routers.f1replay-backend.entrypoints=websecure
      - traefik.http.routers.f1replay-backend.tls.certresolver=letsencrypt
      - traefik.http.routers.f1replay-backend.priority=${TRAEFIK_PRIORITY}
      - traefik.http.routers.f1replay-backend.middlewares=authentik@file
      - traefik.http.services.f1replay-backend.loadbalancer.server.port=8000    

  f1replay-frontend:
    image: ghcr.io/adn8naiagent/f1replaytiming-frontend:latest
    container_name: f1replay-frontend
    environment: 
      - NEXT_PUBLIC_API_URL=https://teamradio.${DOMAIN}
    networks:
      - web
    restart: unless-stopped
    labels:
      - flame.type=application
      - flame.category=Fun and games
      - flame.name=F1 Replay Timing
      - flame.url=https://f1replay.${DOMAIN}
      - flame.icon=flag-checkered
      - traefik.enable=true
      - traefik.http.routers.f1replay.rule=Host(`f1replay.${DOMAIN}`)
      - traefik.http.routers.f1replay.entrypoints=websecure
      - traefik.http.routers.f1replay.tls.certresolver=letsencrypt
      - traefik.http.routers.f1replay.priority=${TRAEFIK_PRIORITY}
      - traefik.http.routers.f1replay.middlewares=authentik@file
      - traefik.http.services.f1replay.loadbalancer.server.port=3000

networks:
  web:
    external: true

volumes:
  f1replay-cache:
    external: true
  f1replay-data:
    external: true 

[adn8naiagent]

Thanks for raising the and logs. The URL f1replay-backend:8000 shown in the error isn't generated by the app (not in code or defaults). Can you check what the frontend container actually sees at runtime?

docker compose exec f1replay-frontend env | grep NEXT_PUBLIC

It might be something in your environment overriding NEXT_PUBLIC_API_URL to f1replay-backend:8000. Could be a env file or a previous build cache or another environment source.

[nicholaichaney-cpu]

Nah it’s not his env. I get the same issue. Something is wonky in your code. I can set the front end and back end to f1.host.us and backend to API.host.us in the compose file. Change the ports to 3002:300 8002:8000. Nuke the persistent folders. Rebuild the container. When I use the f1.host.us it will fail and show port 8000. When I use ipaddress:3002 it will show failure for backend server :8002. Also of note, when I specify host names, the failures still return IP address unreachable.

[mariushosting]

Same issue, nothing works at all.

[adn8naiagent]

Have just released v2.0 which moves to a unified architecture. Much simpler and avoids having to set up and config frontend and backend separately. No longer need to set NEXT_PUBLIC_API_URL, FRONTEND_URL, or any CORS settings which should be make using a reverse proxy easy.

[nicholaichaney-cpu]

Syntax error in the port assignment line. Easily fixed. Still hangs and requires a webpage refresh. I'll create new report with logs when I can.

[mariushosting]

Have just released v2.0 which moves to a unified architecture. Much simpler and avoids having to set up and config frontend and backend separately. No longer need to set NEXT_PUBLIC_API_URL, FRONTEND_URL, or any CORS settings which should be make using a reverse proxy easy.

latest version works in my case.

[nicholaichaney-cpu]

setting .env for one variable seems silly

just change ${PORT-8000}:8000
to PORT 8000:8000
otherwise this works just fine

[adn8naiagent]

In your case you are only using it to set one variable, but there are other variables to be set and it's simpler for all these to be set in .env than in both .env and docker compose.

[rowdynl]

Sorry, I did not get any notifications from GitHub so I missed this completely. So with the new single image, this issue is obsolete. Shall I close it, or do you @adn8naiagent?

Looking at the v2 .env file, we don't need the cache volume anymore?

[nicholaichaney-cpu]

Yep. It's all resolved currently and works fine