Skip to content
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.

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

🐛 Bug Report: Docker Image v2.0.0 Environment Variables Not Applied to Frontend URLs #6747

Closed
2 tasks done
youssefsiam38 opened this issue Oct 22, 2024 · 9 comments
Closed
2 tasks done
Labels

Comments

@youssefsiam38
Copy link

📜 Description

The web container in the self-hosted Docker setup doesn't properly apply the environment variables to the frontend application URLs. When changing environment variables like REACT_APP_API_URL or REACT_APP_WS_URL, the frontend application continues to use the default/build-time URLs (e.g localhost:3000 for API) instead of the runtime environment variables.

👟 Reproduction steps

  1. Use the official docker-compose.yml file for Novu v2.0.0
  2. Set custom environment variables for the web container:
web:
    environment:
      REACT_APP_API_URL: "http://custom-domain.com:3000"
      REACT_APP_WS_URL: "http://custom-domain.com:3002"
  1. Run docker-compose up -d
  2. Access the web interface at localhost:4200
  3. Open browser developer tools and inspect network requests
  4. Observe that API and WebSocket requests are still being made to the default URLs instead of the custom domain

👍 Expected behavior

The web container should use the provided environment variables for API and WebSocket URLs, allowing proper configuration for custom domains and different deployment scenarios.

👎 Actual Behavior with Screenshots

The web container ignores the environment variables and continues to use the default URLs hardcoded during the image build. Network requests in browser developer tools show connections being attempted to default URLs instead of the configured custom domain.

Novu version

2.0.0

npm version

10.8.2

node version

v20.18.0

📃 Provide any additional context for the Bug.

No response

👀 Have you spent some time to check if this bug has been raised before?

  • I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

Are you willing to submit PR?

None

@youssefsiam38 youssefsiam38 changed the title 🐛 Bug Report: Web Container Environment Variables Not Applied to Frontend URLs 🐛 Bug Report: Docker Image v2.0.0 Environment Variables Not Applied to Frontend URLs Oct 22, 2024
@youssefsiam38
Copy link
Author

This issue unfortunately put a damper on our excitement about v2.0.0, as we can't properly configure frontend URLs for production. Any updates on this? We're eager to use the new version but blocked by this environment variable behavior.

@wh1337
Copy link
Contributor

wh1337 commented Nov 8, 2024

@youssefsiam38 We just deployed v2.0 and was able to correct this issue by setting the API_ROOT_URL environment variable in the web container. For example our API_ROOT_URL is set to https://api.novu.mydomain.com

@youssefsiam38
Copy link
Author

youssefsiam38 commented Nov 8, 2024

@wh1337 Thank you for sharing your solution! Unfortunately, that doesn't fully address the issue for us. Looking at both the docker-compose.yml and the web app's config file (apps/web/src/config/index.ts), there's a disconnect in how the environment variables are handled:

In docker-compose.yml, the web container sets:

environment:
  REACT_APP_API_URL: ${API_ROOT_URL}

But in apps/web/src/config/index.ts, the code uses window.env.REACT_APP_API_URL || process.env.REACT_APP_API_URL:

export const API_ROOT =
  window._env_.REACT_APP_API_URL || isPlaywright
    ? window._env_.REACT_APP_API_URL || process.env.REACT_APP_API_URL || autodetectApiRoot() || 'http://localhost:1336'
    : window._env_.REACT_APP_API_URL || process.env.REACT_APP_API_URL || autodetectApiRoot() || 'http://localhost:3000';

I tried your solution and mapped both vars (API_ROOT_URL and REACT_APP_API_URL) to the container with the url value. But the mounted value to the browser was 'http://localhost:3000'!

The actual fix likely needs to modify how the environment variables are injected into the web container's runtime JavaScript bundle, or there maybe I am missing some setup steps. Would you mind sharing how you got it working in your setup? There might be additional steps you took that could help.

@wh1337
Copy link
Contributor

wh1337 commented Nov 8, 2024

@youssefsiam38, we run Novu in AWS utilizing ECS. In the ECS task definition we set the API_ROOT_URL value to the API route. For reference, here is an sample of our task definition:

...
"environment": [
    {
        "name": "REACT_APP_WS_URL",
        "value": "https://realtime.novu.mydomain.com"
    },
    {
        "name": "REACT_APP_ENVIRONMENT",
        "value": "prod"
    },
    {
        "name": "REACT_APP_DOCKER_HOSTED_ENV",
        "value": "true"
    },
    {
        "name": "API_ROOT_URL",
        "value": "https://api.novu.mydomain.com"
    },
    {
        "name": "REACT_APP_API_URL",
        "value": "https://api.novu.mydomain.com"
    },
    {
        "name": "DISABLE_USER_REGISTRATION",
        "value": "true"
    },
    {
        "name": "FRONT_BASE_URL",
        "value": "https://web.novu.mydomain.com"
    }
]
...

Let me know if this doesn't work for you. Do you have the REACT_APP_DOCKER_HOSTED_ENV variable set? This is a left over env var from 0.24.x and I'm not entirely sure if it's still used, but it's worth a shot.

@youssefsiam38
Copy link
Author

@wh1337 I've almost exactly replicated your environment variables setup:

API_ROOT_URL="https://novuapi-production.mydomain.app"
FRONT_BASE_URL="https://novuweb-production.mydomain.app"
REACT_APP_API_URL="https://novuapi-production.mydomain.app"
REACT_APP_DOCKER_HOSTED_ENV="true"
REACT_APP_ENVIRONMENT="prod"
REACT_APP_WS_URL="https://novuws-production.mydomain.app"
DISABLE_USER_REGISTRATION="true"

Unfortunately, I'm still seeing the same issue where the web app defaults to localhost:3000. Could you share which Docker image version you're using? I'm currently using ghcr.io/novuhq/novu/web:2.0.0- perhaps you're using a different version?

@wh1337
Copy link
Contributor

wh1337 commented Nov 8, 2024

@youssefsiam38 we are using the same docker image, which one begs the question what is different...are your API calls from the Web going to localhost:3000 or are you seeing it else where?

Would you be willing to share your current docker compose file (sanitized of real domain names etc) and your current .env file (also please sanitize this with dummy data for your database strings, domain names and secrets)?

edit: also try clearing your local docker cache and pull a fresh copy of the v2.0 image. It might not help, but worth a try.

@wh1337
Copy link
Contributor

wh1337 commented Nov 8, 2024

linking #6649

@youssefsiam38
Copy link
Author

@wh1337, thanks so much for your help! I managed to solve the issue - the problem was with the run command I was using, not matching the one in the Docker Compose file.
Once I updated it to include the step, the environment variables were properly injected and my frontend URLs are now working as expected.

Appreciate you sticking with me on this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants