How to correctly configure remx url and socket ports?

[laurencefass]

What version of Remix are you using?

1.3.4

Steps to Reproduce

Ive installed 1.3.4 using npx command and indie install option. I cant find the correct way to configure URL and socket ports.

Im running through a proxy so Ive changed the main port and the devserver socket port to the same value specified in my proxy config. I dont know if this is correct its just what Ive picked up from quick google of relevant keywords but cant find any definitive formal documentation for recoconfiguring the port. Either way this doesnt work....

(I want URL and socket to run through port 3301 as the only port exposed through my nginx/docker config. This just works post-install with both CRA and NextJS).

remix.config.js

module.exports = {
  cacheDirectory: "./node_modules/.cache/remix", //default
  ignoredRouteFiles: [".*", "**/*.css", "**/*.test.{js,jsx,ts,tsx}"], //default 
  devServerPort: 3301
};

.env

DATABASE_URL="..."
SESSION_SECRET="..."
PORT=3301

results of running in dev mode

bash-5.1# npm run dev

> dev
> run-p dev:*


> dev:css
> npm run generate:css -- --watch


> dev:remix
> cross-env NODE_ENV=development binode --require ./mocks -- @remix-run/dev:remix dev


> generate:css
> tailwindcss -o ./app/styles/tailwind.css "--watch"

� Mock server running

Rebuilding...
Done in 1280ms.
(node:173) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
Loading environment variables from .env
Watching Remix app in development mode...
� Built in 2.6s
Remix App Server started at http://localhost:33455 (http://172.28.0.3:33455)

FYI my nginx config:

# remix.js 3300-3399
server {
    listen 80;
    server_name remix1.syntapse.co.uk;
    location / {
        proxy_pass http://0.0.0.0:3301;
        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;
    }
}

Output accessing URL: https://remix1.syntapse.co.uk/

Upgrade Required

browser console log:

Failed to load resource: the server responded with a status of 426 ()

Expected Behavior

Given my port configuration (though not sure if its correct) I was expecting dev app to run on port 3301 not 33455.

Also expecting a Remix default web page, not "upgrade required" message.

It would be great to see some official document for condiguration through a proxy.

Sorry to mention "NextJS" here but this just worked in NextJS... i.e. I set the port in package.json (different ports for dev and prod) and it all just works. There is no specific dev port websocket configuration nor nginx port configuration required.

It would be great to see first class support for proxied websites in the documentation.

Actual Behavior

See above. Browser displays "upgrade required" message.

[laurencefass]

I also tried

PORT=10000 npm run dev

which resulted in

bash-5.1# PORT=3301 npm run dev

> dev
> run-p dev:*


> dev:remix
> cross-env NODE_ENV=development binode --require ./mocks -- @remix-run/dev:remix dev


> dev:css
> npm run generate:css -- --watch


> generate:css
> tailwindcss -o ./app/styles/tailwind.css "--watch"

� Mock server running

Rebuilding...
Done in 1338ms.
(node:316) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
Loading environment variables from .env
Watching Remix app in development mode...
� Built in 2.2s
Remix App Server started at http://localhost:38685 (http://172.28.0.3:38685)

so remix is not picking up any of the PORTs i specify.

[laurencefass]

I raised this as an issue and it was converted to a discussion but still no way to set ports, so i think its an issue....