Remix app behind reverse proxy (nginx), livereload seems broken

[atomic mica]

I have this nginx config, which works fine for my remix app itself. However, live reload / dev server seems broken:

events {}

http {
    server {
        listen 80;
        server_name api.myapp.test;

        location / {
            proxy_pass http://host.docker.internal:3330;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    }
}

I've tried to set REMIX_DEV_ORIGIN (or origin in <LiveReload/>) to the same http://api.myapp.test, but that gives different errors (cannot find the /ping and /socket routes).

Does anyone have any pointers here?

[potent patio]

Remix uses another port to stream in HMR/LiveReload updates

You can explicitly set the port if you want to open that specific port so docker lets it through

I believe the liveReload component and remix config both have options, you might have to set both? I’m not exactly sure. But there are ways to configure the dev port so you can know which port to open

[atomic mica]

Note the apps are not running in Docker, only nginx is, so I assumed I wouldn't have to change much.

Apart from the URL that should receive the updates.

But I'm kind of confused after looking into it, so anything is possible for me at this point 😄

[amber tendon]

we've got some docs on this here: https://remix.run/docs/en/main/other-api/dev#how-to-integrate-with-a-reverse-proxy

[atomic mica]

@amber tendon I might be missing something very stupid, but I run this:
cross-env REMIX_DEV_ORIGIN=http://x.test.local remix dev ...
But getting this error on startup: Could not reach Remix dev server at http://x.test.local/ping

Which makes sense, because the /ping is probably something from the remix compiler (as the docs say, app: localhost:1234, remix: localhost:5678)

Although, the docs indicate I should set my actual app url in the REMIX_DEV_ORIGIN:

Then, you set up a reverse proxy in front of the app server

Okay nevermind, I removed everything and it now just works with the default (no REMIX_DEV_ORIGIN, but app is using proxy, which is fine)

That was confusing 😄

[modest sapphire]

For me the easiest way is to develop with the builtin webserver. What is the reason for the proxy is maybe a first good question.

Im running remix in vite with local ssl and a nice signed cert

[atomic mica]

I'm using the proxy for auth/cookie purposes (multiple remix frontends and one server)

Very strange, ~8 hours no issues, and now suddenly it's all bogged again