🐛 Bug Report: Running behind Load Balancer with GLOBAL_CONTEXT_PATH doesn't work

[isaiahdahl]

📜 Description

When trying to run novu behind a reverse proxy with a GLOBAL_CONTEXT_PATH it doesn't work:

This should be possible as per these docs: https://docs.novu.co/self-hosting-novu/deploy-with-docker#reverse-proxy-load-balancers

When you setup the services to run behind a global context path like company.com/novu

The services don't work.

👟 Reproduction steps

https://github.com/isaiahdahl/novu-reverse-proxy-bug-repro

👍 Expected behavior

https://github.com/isaiahdahl/novu-reverse-proxy-bug-repro

This repo should just work.

👎 Actual Behavior with Screenshots

It's just a white screen because it's trying to render /manifest.json and /env-config.js off of the root domain when the /novu/web index.html loads.

In the context of my reproduction repo. If you go into the novu/apps/web and add

GLOBAL_CONTEXT_PATH=
FRONT_BASE_CONTEXT_PATH=
PUBLIC_URL=/novu/web

And then docker compose build and up -d

You'll get the app running. But if you try and pass the PUBLIC_URL in from the docker-compose.yml it won't work so it's not ideal.

Novu version

0.21.0

npm version

NA

node version

NS

📃 Provide any additional context for the Bug.

No response

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

• [X] I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

• [X] I have read the Contributing Guidelines

Are you willing to submit PR?

Yes I am willing to submit a PR!

[0xttfx]

@isaiahdahl

use this .env

# Host
HOST_NAME=http://novu.mydns.com.br

# Root URL
REACT_APP_WS_URL=$HOST_NAME/ws
API_ROOT_URL=$HOST_NAME/api
DISABLE_USER_REGISTRATION=false
FRONT_BASE_URL=$HOST_NAME:4200
WIDGET_EMBED_PATH=$HOST_NAME:4701/embed.umd.min.js
WIDGET_URL=$HOST_NAME/widget

# Context Paths for reverse-proxies
GLOBAL_CONTEXT_PATH=
WEB_CONTEXT_PATH=
API_CONTEXT_PATH=api
WS_CONTEXT_PATH=ws
WIDGET_CONTEXT_PATH=widget

and this for the nginx conf

[isaiahdahl]

@0xttfx this solution isn't relevent to this issue.

I am not having a problem running novu behind nginx at a domain like https://novu.mydomain.com

I want to run novu at https://www.mydomain.com/novu/

Which is what the GLOBAL_CONTEXT_PATH is suppose to allow me to do. But it doesn't work.

[mosamlife]

@isaiahdahl did you find any solution I am also facing a similar situation with Caddy.

[aheissenberger]

The Problem with the React App is:

1. build/index.html uses absolut pathes to the javascript file - FIX: build react app with relative PUBLIC_URL
2. FRONT_BASE_CONTEXT_PATH will be used by the web frontend and not WEB_CONTEXT_PATH as written in the documentation https://docs.novu.co/self-hosting-novu/deploy-with-docker#reverse-proxy-load-balancers
3. .env is missing FRONT_BASE_CONTEXT_PATH= and GLOBAL_CONTEXT_PATH=. So env.shwill not include the environment variables FRONT_BASE_CONTEXT_PATH and GLOBAL_CONTEXT_PATH in the build/env-config.js - FIX: add missing env variables to .env and recreate the build/env-config.js
4. usage of CONTEXT_PATH which is created by the function getContextPath() from src/config/contextPath.ts is used the wrong way. - should be /${CONTEXT_PATH}static/image/test.png (e.g. src/components/layout/components/PublicPageLayout.tsx) but is CONTEXT_PATH + '/static/image/test.png' which creates novu/web//static/image/test.png which misses a slash on the beginning and has two slashes on the end

Here is a bash script to patch the problems until the react app code is fixed:

#!/bin/bash

docker compose -f traefik.yml -f docker-compose.yml exec -T web bash << 'EOF'
sed -i 's|="/|="/novu/web/|g' build/index.html
echo "FRONT_BASE_CONTEXT_PATH=" >> .env
echo "GLOBAL_CONTEXT_PATH=" >> .env
./env.sh
mv ./build/env-config.js ./build/env-config.js.old
mv ./env-config.js ./build/env-config.js
sed -i 's|+=n\.GLOBAL_CONTEXT_PATH+"/")|+="/"+n.GLOBAL_CONTEXT_PATH+"/")|g' build/static/js/main.*.js
sed -i 's|+=+\.FRONT_BASE_CONTEXT_PATH+"/")|+=n.FRONT_BASE_CONTEXT_PATH)|g' build/static/js/main.*.js
EOF

if the fix in the main.*.js fails, check if the minified code still uses n. for accessing n.GLOBAL_CONTEXT_PATH

[alexanderhofstaetter]

any updates on this one? when we start the app in docker, the frontend trys to make requests to http://localhost:3000

[alexanderhofstaetter]