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

[youssefsiam38]

📜 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"

3. Run docker-compose up -d
4. Access the web interface at localhost:4200
5. Open browser developer tools and inspect network requests
6. 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?

• I have read the Contributing Guidelines

Are you willing to submit PR?

None

[linear]

NV-4526 🐛 Bug Report: Web Container Environment Variables Not Applied to Frontend URLs

[youssefsiam38]

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]

@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]

@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]

@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]

@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]

@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]

linking #6649

[youssefsiam38]

@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!

[shanehughes1990]

I seem to be having this issue with 2.1.0 image where the REACT_APP_WS_URL is updated in the env-config.js but the browser console is connecting to ws://localhost:3002 (the default).

This is a brand new install as of a few days ago. with nothing more than signing up and getting into the UI.

module "novu_web" {
  depends_on = [kubernetes_namespace.environment_namespace, module.novu_api, module.novu_worker]
  source     = "app.terraform.io/GoEasyCare/deployment-template/k8s"
  version    = "v1.6.0"
  name       = "novu-web"
  namespace  = kubernetes_namespace.environment_namespace.metadata[0].name
  affinity   = local.affinity


  containers = [
    {
      name      = "novu-web"
      image_url = "ghcr.io/novuhq/novu/web"
      image_tag = local.novu_version
      command   = ["/bin/sh", "-c", "pnpm run envsetup:docker && pnpm run start:static:build"]

      ports = [
        {
          name           = "app-port"
          container_port = local.web_port
          is_ingress = {
            tls_cluster_origin_issuer = local.tls_origin_issuer
            domains = [
              {
                name = trimsuffix(cloudflare_record.novu_web.name, ".")
              },
            ]
          }
        }
      ]

      env = [
        {
          name  = "REACT_APP_API_URL"
          value = local.api_root_url
        },
        {
          name  = "REACT_APP_ENVIRONMENT"
          value = local.node_env
        },
        {
          name  = "REACT_APP_WIDGET_EMBED_PATH"
          value = local.widget_embed_path
        },
        {
          name  = "REACT_APP_IS_SELF_HOSTED"
          value = "true"
        },
        {
          name  = "REACT_APP_WS_URL"
          value = local.ws_url
        },
      ]
    }
  ]
}

Contents of env-config.js

novu-web-84cb975785-9kwww:/app/build$ cat env-config.js 
window._env_ = {
  SKIP_PREFLIGHT_CHECK: 'true',
  REACT_APP_ENVIRONMENT: 'production',
  REACT_APP_VERSION: '$npm_package_version',
  REACT_APP_API_URL: 'https://api.novu.devops.domain.com',
  REACT_APP_WS_URL: 'https://ws.novu.devops.domain.com',
  REACT_APP_WEBHOOK_URL: 'http://localhost:3003',
  REACT_APP_WIDGET_EMBED_PATH: 'https://novu.devops.domain.com/embed.umd.min.js',
  REACT_APP_IS_SELF_HOSTED: 'true',
  IS_V2_ENABLED: 'true',
};