Skip to content

set api url in dockerfile #90

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
iulusoy wants to merge 1 commit into
base: main
Choose a base branch
from
Open

set api url in dockerfile #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 4 additions & 3 deletions Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
FROM node:22-slim AS base

LABEL org.opencontainers.image.source=https://github.com/ssciwr/onehealth-frontend
LABEL org.opencontainers.image.description="Onehealth Frontend"
LABEL org.opencontainers.image.source=https://github.com/ssciwr/heiplanet-frontend
LABEL org.opencontainers.image.description="Heiplanet Frontend"
LABEL org.opencontainers.image.licenses=MIT

ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
ENV VITE_NUTS_API_BASE="http://api:8000"
Copy link

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

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

The vite.config.ts sets the base path using the VITE_BASE_PATH environment variable (defaulting to "/"), but this environment variable is not set in the Dockerfile. The nginx configuration serves the app from /heiplanet-frontend/, which suggests VITE_BASE_PATH should be set to "/heiplanet-frontend/" to ensure proper asset loading and routing.

Add: ENV VITE_BASE_PATH="/heiplanet-frontend/"

Without this, the built application will look for assets at the wrong paths (e.g., /assets/... instead of /heiplanet-frontend/assets/...).

Suggested change
ENV VITE_NUTS_API_BASE="http://api:8000"
ENV VITE_NUTS_API_BASE="http://api:8000"
ENV VITE_BASE_PATH="/heiplanet-frontend/"

Copilot uses AI. Check for mistakes.
Copy link

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

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

The API URL "http://api:8000" is a Docker internal hostname that won't work at runtime in the browser. Vite environment variables are baked into the built JavaScript bundle at build time, so they need to be valid URLs that the client browser can reach, not Docker internal hostnames.

Since the nginx configuration proxies /api/ to the backend service, the frontend should use a relative path like "/api" or construct the full URL based on the browser's location. Consider either:

  1. Removing this environment variable and relying on the default in nutsApi.ts with "/api" as a relative path
  2. Setting it to a relative path: ENV VITE_NUTS_API_BASE="/api"
  3. Using a build argument that can be overridden for different deployment environments
Suggested change
ENV VITE_NUTS_API_BASE="http://api:8000"
ENV VITE_NUTS_API_BASE="/api"

Copilot uses AI. Check for mistakes.
Copy link
Collaborator

@jmsssc jmsssc Feb 26, 2026

Choose a reason for hiding this comment

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

I also think this could work to connect the frontend and backend in production (but as the one cartesian request was/is already working, then changing doesn't make so much sense. I can make the NUTS request use the same approach as the backend one to avoid this issue, if the cartesian one is working now?)

RUN corepack enable

WORKDIR /app
Expand All @@ -18,7 +19,7 @@ FROM base AS build
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
COPY frontend/ .
ENV NODE_ENV=production
RUN pnpm build
RUN VITE_NUTS_API_BASE=$VITE_NUTS_API_BASE pnpm build
Copy link

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

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

The RUN command explicitly passes VITE_NUTS_API_BASE to the build, but since it's already defined as an ENV earlier in the same stage, this is redundant. The environment variable will already be available to the build process.

Consider simplifying to: RUN pnpm build

However, this may be intentional for clarity or to allow build-time overrides via build args.

Suggested change
RUN VITE_NUTS_API_BASE=$VITE_NUTS_API_BASE pnpm build
RUN pnpm build

Copilot uses AI. Check for mistakes.

FROM nginx:alpine

Expand Down
2 changes: 1 addition & 1 deletion docker-compose.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
services:
frontend:
image: ghcr.io/ssciwr/onehealth-map-frontend:latest
image: ghcr.io/ssciwr/heiplanet-frontend:main
Copy link

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

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

The docker-compose.yml image tag has changed from "latest" to "main". While "main" is a common convention for development branches, it's worth verifying this aligns with your CI/CD pipeline and tagging strategy. If this is meant for production deployment, consider using semantic versioning tags or "latest" for stability.

Suggested change
image: ghcr.io/ssciwr/heiplanet-frontend:main
image: ghcr.io/ssciwr/heiplanet-frontend:latest

Copilot uses AI. Check for mistakes.
build:
context: .
dockerfile: Dockerfile
Expand Down
6 changes: 3 additions & 3 deletions nginx/conf/nginx.conf
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ server {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
# Serve the app from /onehealth-map-frontend/
location /onehealth-map-frontend/ {
# Serve the app from /heiplanet-frontend/
location /heiplanet-frontend/ {
alias /usr/share/nginx/html/;
try_files $uri $uri/ /onehealth-map-frontend/index.html;
try_files $uri $uri/ /heiplanet-frontend/index.html;
}

# Serve assets with correct MIME types - more specific regex
Expand Down
Loading