Public-FO Vite Environment Variables Fix

Problem

The public-fo frontend was making API requests to http://localhost:1337 instead of using the configured VITE_CMS_URL=https://cms-qual.portugalodyssey.pt.

Browser Console Errors:

GET http://localhost:1337/api/navigation-config?populate=*&locale=en net::ERR_CONNECTION_REFUSED
GET http://localhost:1337/api/landing-page?populate=*&locale=en net::ERR_CONNECTION_REFUSED

Root Cause

Vite environment variables are injected at build time, not runtime.

When the Docker image was built: 1. VITE_CMS_URL was not passed as a build argument 2. Vite defaulted to http://localhost:1337 (from cms.service.ts fallback) 3. The JavaScript bundle was built with localhost:1337 hardcoded 4. Setting environment variables at runtime (in docker-compose) has no effect

Solution

1. Updated Dockerfile ✅

File: frontends/public-fo/Dockerfile

• Added ARG declarations for all VITE_* variables
• Set them as ENV variables during build (so Vite can access them)
• Added runtime script to replace hardcoded URLs as a fallback

2. Updated Makefile ✅

File: Makefile

• Modified _build-push-service target to pass VITE_* build args
• Environment-specific URLs:
• qual: https://*-qual.portugalodyssey.pt
• prod: https://*.portugalodyssey.pt
• dev: http://localhost:*

3. Updated CI/CD ✅

File: .gitlab-ci/services.yml

• Added build args for public-fo frontend
• Defaults to qualification URLs (can be overridden with CI variables)

How to Fix Existing Image

Step 1: Rebuild Image with Correct Build Args

# On dev machine
cd /path/to/po-platform

# Build for qualification environment
make build-push SERVICE=public-fo ENV=qual TAG=latest

# Or manually:
docker build \
  --tag registry.gitlab.com/portugalodissey/po-platform/public-fo:latest \
  --file frontends/public-fo/Dockerfile \
  --build-arg NODE_ENV=production \
  --build-arg VITE_API_BASE_URL=https://api-qual.portugalodyssey.pt \
  --build-arg VITE_PAYMENT_URL=https://payment-qual.portugalodyssey.pt \
  --build-arg VITE_FILE_SERVICE_URL=https://files-qual.portugalodyssey.pt \
  --build-arg VITE_CMS_URL=https://cms-qual.portugalodyssey.pt \
  --build-arg VITE_NOTIFICATION_URL=https://api-qual.portugalodyssey.pt/notifications \
  --build-arg VITE_NOTIFICATION_SERVICE_URL=https://notification-qual.portugalodyssey.pt \
  --build-arg VITE_GOOGLE_MAPS_API_KEY="$VITE_GOOGLE_MAPS_API_KEY" \
  frontends/public-fo

docker push registry.gitlab.com/portugalodissey/po-platform/public-fo:latest

Step 2: Pull and Restart on VPS

# On VPS
cd /opt/po-platform

# Pull new image
docker pull registry.gitlab.com/portugalodissey/po-platform/public-fo:latest

# Restart container
docker compose -f infrastructure/compose/qualification.yml --env-file .env.qual restart public-fo-qual

# Or force recreate to ensure fresh start
docker compose -f infrastructure/compose/qualification.yml --env-file .env.qual up -d --force-recreate public-fo-qual

Step 3: Verify

# Check container logs
docker logs po-public-fo-qual

# Test in browser
# Open: https://qual.portugalodyssey.pt
# Check browser console - should see requests to:
# - https://cms-qual.portugalodyssey.pt/api/...
# NOT: http://localhost:1337/api/...

Runtime Fallback Script

The Dockerfile includes a runtime script that replaces hardcoded localhost URLs as a fallback. This ensures that even if build args aren't passed correctly, the runtime environment variables can still fix the URLs.

How it works: 1. On container start, the script scans all .js files in /usr/share/nginx/html 2. Replaces http://localhost:1337 with $VITE_CMS_URL (if set) 3. Replaces other localhost URLs with corresponding VITE_* variables

Note: This is a fallback. The proper solution is to pass build args during image build.

Prevention

For Future Builds

Always pass VITE_* build args when building frontend images:

# Use Makefile (recommended)
make build-push SERVICE=public-fo ENV=qual TAG=latest

# Or manually with correct build args
docker build --build-arg VITE_CMS_URL=... ...

For CI/CD

The CI/CD pipeline now automatically passes build args for public-fo. No manual intervention needed.

Related Files

• frontends/public-fo/Dockerfile - Docker build configuration
• frontends/public-fo/src/services/cms.service.ts - CMS service with URL fallback
• infrastructure/compose/qualification.yml - Runtime environment variables (for fallback)
• Makefile - Build script with environment-specific URLs
• .gitlab-ci/services.yml - CI/CD build configuration

Troubleshooting

Still Seeing localhost:1337?

1. Check if image was rebuilt:

   docker images | grep public-fo
   # Check image creation time
   

2. Verify build args were passed:

   docker history registry.gitlab.com/portugalodissey/po-platform/public-fo:latest
   # Should show build args in history
   

3. Check runtime script:

   docker exec po-public-fo-qual cat /docker-entrypoint.sh
   # Should show the replacement script
   

4. Inspect built files:

   docker exec po-public-fo-qual grep -r "localhost:1337" /usr/share/nginx/html/ || echo "No localhost URLs found (good!)"
   

Environment Variables Not Working?

Remember: Vite variables must be passed at build time. Runtime environment variables only work with the fallback script.