Comments (5)
Ive just installed a Vite app and it solves this very problem by providing an HMR configuration which splits the clientport and serverport to enable proxying. a 443 client port works with wss, and any port works for the backend,
https://vitejs.dev/config/#server-hmr
from indie-stack.
I have got this working on port 443 with following configuration.
Using port 443 ensures that the socket port is not explicitly included in the wss:// URL callback from client to server for livereload. Any other port number forces inclusion of the port in the wss URL and breaks proxy addressing. I think 443 is the correct port selection visibile to the client, but using port 443 on the server will cause problems in a multi-instance execution environment. Hence the need to split them.
.env
REMIX_DEV_SERVER_WS_PORT=443
and nginx config:
server {
listen 80;
server_name remix1.syntapse.co.uk;
location / {
proxy_pass http://0.0.0.0:3300;
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;
}
location /socket {
proxy_pass http://0.0.0.0:443;
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;
}
}
however I expect to run into problems if I try to run multiple instances within a single execution environment so the requirement for a REMIX_DEV_CLIENT_WS_PORT .env var is still viable.
from indie-stack.
Hi @laurencefass,
Sorry for not getting to this sooner. I'd say that this is a good use case for forking the stack and making your own. Proxying an app is not common enough for this stack's audience to include in this stack.
from indie-stack.
Thanks for replying. Currently I include myself in this stack's audience and Im trying to use it behind a reverse proxy. Other React frameworks I've trialled (Next, CRA, Vite, Blitz) offer a built-in solution for this use case. Can you elaborate why you dont expect reverse proxying remix apps to access on the web to be a common use case?
from indie-stack.
There are three things at play here:
- Everyone has different requirements, constraints, and opinions on how they want to build their apps
- Everything we add to the stack is cognitive load for people who use the stack
- It's very easy to make a custom stack
So even though there are lots of people who do use reverse proxy, most wouldn't need it, so I'd rather just leave that to the people who do need it.
from indie-stack.
Related Issues (20)
- Logout directly by hiting http://localhost:3000/logout should remove the cookie stored in the browser HOT 3
- Collaborator init script is missing HOT 5
- Warning: Expected server HTML to contain a matching <meta> in <head> HOT 5
- Fly Instance runs out of memory on deployment HOT 11
- Failed app run HOT 3
- Missing Environment Variables when Prisma is removed HOT 3
- Env variables undefined in build but fine in dev HOT 1
- pnpm is not preinstalled and causes an error in Cypress HOT 3
- No region defined in the fly deploy command, causes deployment to crash HOT 10
- Remix and Cypress hydration problem HOT 7
- hydration failed,and css file will request twice HOT 1
- npm run dev errors out in windows machines with "Cannot find module '--require/package.json'"
- Error during deployment in Fly.io, Dockerfile needs to give permissons to `start.sh` script HOT 3
- Timeout when Running e2e tests on a fresh installation
- Typecheck fails because it can't find definitions for cypress or @testing-library/cypress HOT 6
- throw new Error(`Failed to kill process ${pid}: ${error}`) after code change HOT 3
- Tailwind SourceMap/EsBuild Issue HOT 4
- Error upon deployment: you must be authenticated
- Cypress custom commands doesn't load HOT 2
- Use `fly launch`/`dockerfile-node` instead of `.dockerignore`, `Dockerfile`, `fly.toml` & `start.sh` HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from indie-stack.