Jitsi Meet Static Files Not Loading Correctly in Server when Along with React

[Avin-Techv]

I am working on running jisti web on my server i was able to work it correctly in my local at http://0.0.0.0:8085/ this is my docker compose file

services:

  project_one_frontend:
    build:
      context: ./frontend
      dockerfile: frontend.dockerfile
    ports:
      - "3005:3000"
    networks:
      - backend_network
    depends_on:
      - project_one_backend
    env_file:
      - .docker_env_demo
    restart: always

  project_one_jitsi_web:
    image: jitsi/web:stable
    restart: always
    ports:
      - "8444:8443"     # For HTTPS access (if SSL is set up)
      - "8085:80"        # Change to an available port on the host
    env_file:
      - .jitsi_env_demo
    networks:
      - backend_network
    depends_on:
        - project_one_jitsi_jvb

  project_one_jitsi_prosody:
    image: jitsi/prosody:stable
    restart: always
    env_file:
      - .jitsi_env_demo
    networks:
      - backend_network

  project_one_jitsi_jicofo:
    image: jitsi/jicofo:stable
    restart: always
    env_file:
      - .jitsi_env_demo
    networks:
      - backend_network
    depends_on:
        - project_one_jitsi_prosody

  project_one_jitsi_jvb:
    image: jitsi/jvb:stable
    restart: always
    ports:
      - "10000:10000/udp"
    env_file:
      - .jitsi_env_demo
    networks:
      - backend_network
    depends_on:
        - project_one_jitsi_prosody

networks:
  backend_network:

but when i put in my server it should run correctly at https://project-one.org/v_call_ser/ but i only get the page not the static files like css, js etc, this is my nginx.conf file

server {
    client_max_body_size 0;
    server_name project-one.org;

    # Set timeouts
    proxy_read_timeout 300;
    proxy_connect_timeout 300;
    proxy_send_timeout 300;

    # Frontend location
    location / {
        proxy_pass http://localhost:3005;  # Direct to the frontend service
        proxy_buffering off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Jitsi Video Call Server
    location /v_call_ser/ {
        proxy_pass http://localhost:8085;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
 
        # Rewrite paths for static files
        sub_filter '/libs/' '/v_call_ser/libs/';
        sub_filter '/css/' '/v_call_ser/css/';
        sub_filter '/js/' '/v_call_ser/js/';
        sub_filter_once off;

        # Disable compression to allow sub_filter
        proxy_set_header Accept-Encoding "";
    }


    # Handle 502 Bad Gateway
    error_page 502 /project_one/index.html;  # Custom error page for 502

    # SSL and Certbot configurations
    listen 443 ssl;  # Managed by Certbot
    ssl_certificate /etc/letsencrypt/live/project-one.org-0001/fullchain.pem;  # Managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/project-one.org-0001/privkey.pem;  # Managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf;  # Managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;  # Managed by Certbot
}

server {
    if ($host = project-one.org) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
    
    server_name project-one.org;
    listen 80;
    return 404; # managed by Certbot
}

and this is the .jitsi_env_demo env file

CONFIG=~/.jitsi-meet-cfg
HTTP_PORT=8000
HTTPS_PORT=8443
TZ=UTC
BASE_URL=https://project-one.org/v_call_ser
XMPP_DOMAIN=meet.jitsi
XMPP_SERVER=xmpp.meet.jitsi
PUBLIC_URL=https://project-one.org/v_call_ser
JICOFO_AUTH_PASSWORD=fake_password_obviously
JVB_AUTH_PASSWORD=fake_password_obviously
JIGASI_XMPP_PASSWORD=fake_password_obviously
JIGASI_TRANSCRIBER_PASSWORD=fake_password_obviously
JIBRI_RECORDER_PASSWORD=fake_password_obviously
JIBRI_XMPP_PASSWORD=fake_password_obviously
RESTART_POLICY=unless-stopped
JITSI_IMAGE_VERSION=stable

when i check the network tab in server I see the static files are not loaded correctly they are loading like this

https://project-one.org/libs/lib-jitsi-meet.min.js?v=8242

with 404 error

but when i check update the url and check like this

https://project-one.org/v_call_ser/libs/lib-jitsi-meet.min.js?v=8242

I get the correct page, so what I need to fix this ?

[saghul]

I don't recommend using a subdirectory for Jitsi Meet. It's not a setup we test often.

[Avin-Techv]

Could you please share the recommended Nginx configuration that you suggest?

[saghul]

The best setup is to leave it as is, in its own subdomain, say meet.yourcompany.com. Then if you want to use it from elsewhere in your backend, just reference that subdomain.

[Avin-Techv]

ok will try to do that way, but this still needs to be handled right. If this is possible there is no need to purchase another domain for the jitsi service.

[saghul]

You don't need to purchase anything, use subdomain.