External access

[bornaradusin]

Describe the bug Opening the page locally works but opening it through a domain looks like it opens a different instance even tho both are pointing to the same local ip address, also opening it through a domain is not allowing to add a list advising that the backend is not reachable To Reproduce Steps to reproduce the behavior:

1. Go to 192.168.1.x:4333 (works fine)
2. Go to my.domain.iptv opens too but the list added through the local ip is not showing, attempting to add it again advises that the backend is not reachable

Expected behavior both ways should open the same

Screenshots Added

Desktop (please complete the following information):

• newest docker version
• OS: ubuntu linux (running the app in a docker container?
• Browser:chrome, safari, samsung browser and opera

[bornaradusin]

Also to add, domain setup is made in nginx, attempted both http and https to point to 192.168.1.x:4333

[bornaradusin]

[bornaradusin]

This is the compose file used, placing localhost instead of backend, frontend, or both, breaks it for local use as well

[bornaradusin]

[aptalca]

Client url and backend url you put into docker arguments have to match exactly what address you're accessing it at. That's because your client browser is told by the pwa app to access things at those addresses. If you're accessing remotely through a reverse proxy but set those vars to local IPs, your browser will be told to load assets from those local IPs and it will fail.

Set those vars to the reverse proxy addresses and access them at those addresses both locally and remotely (through the use of split dns).

The playlists you add are saved within the browser's local cache for the url you access. If you access by IP and add a playlist, it won't show up when you connect via domain because the browser treats them as different URLs and keeps separate caches. If you do my suggestion above, it will all work.

[bornaradusin]

Thank you for the breakdown, i thought it might be something like that but it went a bit above my head to comprehend, i've tried doing the two vers with 2 domains, front end iptv.xxxx.club and second as config.xxxx.club but then it kills both local and external access, is there any tutorial or guide to go through for it to learn more about it? I haven't seen anything on the github :( thank you again

[benji2512]

@bornaradusin So what you need is a url for your front end and a url for your backend. In my case, my docker entries are similiar to this

1 ---
2 services:
3   backend:
4     image: 4gray/iptvnator-backend:latest
5     ports:
6       - "7333:3000"
7     environment:
8       - CLIENT_URL=https://myfrontend.url.com
9       # this one should match with the address and port in frontend CLIENT_URL env
10
11   frontend:
12     image: 4gray/iptvnator:latest
13     ports:
14       - "4333:80"
15     environment:
16       - BACKEND_URL=https://mybackend.url.com
17       # this one should match with the address of the backend service
18

The reason for this is that the front and back ends need to be 2 distinct urls. When you use local addresses, the ports are the distinct elements on the address. But when you reverse proxy like you have above, you are only reversing 1 port(the front end in your case) but the backend(which is at port 7333 by default) cannot be found by the DNS resolver. Here is a snippet of what my Caddyfile is similar too

myfrontend.url.com {
        reverse_proxy 100.ccc.aaa.bbb:4333

}

mybackend.url.com {
        reverse_proxy 100.ccc.aaa.bbb:7333

}

So now the DNS resolver can resolve the backend and serve the pod to the front end.

Hopefully this clears is up for you 👍

[bornaradusin]

@bornaradusin So what you need is a url for your front end and a url for your backend. In my case, my docker entries are similiar to this

1 ---
2 services:
3   backend:
4     image: 4gray/iptvnator-backend:latest
5     ports:
6       - "7333:3000"
7     environment:
8       - CLIENT_URL=https://myfrontend.url.com
9       # this one should match with the address and port in frontend CLIENT_URL env
10
11   frontend:
12     image: 4gray/iptvnator:latest
13     ports:
14       - "4333:80"
15     environment:
16       - BACKEND_URL=https://mybackend.url.com
17       # this one should match with the address of the backend service
18

The reason for this is that the front and back ends need to be 2 distinct urls. When you use local addresses, the ports are the distinct elements on the address. But when you reverse proxy like you have above, you are only reversing 1 port(the front end in your case) but the backend(which is at port 7333 by default) cannot be found by the DNS resolver. Here is a snippet of what my Caddyfile is similar too

myfrontend.url.com {
        reverse_proxy 100.ccc.aaa.bbb:4333

}

mybackend.url.com {
        reverse_proxy 100.ccc.aaa.bbb:7333

}

So now the DNS resolver can resolve the backend and serve the pod to the front end.

Hopefully this clears is up for you 👍

Unfortunately no, i tried for the last few weeks since posting it here but no luck even with using chatgpt and gemini to see if they can figure it out, but i really appreciate the attempt, thank you

[aptalca]

I have a personal docker image that combines the frontend and the backend and makes it much easier to set up. https://github.com/aptalca/m3uplayer

If you reverse proxy it at a domain, just set the CLIENT_URL variable to that domain and you should be good to go.

[bornaradusin]

I appreciate it Aptalca but its pretty much the same, of i set the var to the domain following you http/https instructions i can access it locally and through the domain but getting this error every time i try to add a list error: Backend not reachable

[aptalca]

If your iptv streams are http, you need to access the app over http. Otherwise your browser will block the http connections with a console error like mixed content disallowed