Using reverse proxy like Ngrok with Vite HMR #5399
-
|
How do you configure the Vite dev server to work over a reverse proxy like Ngrok? I'm not getting a HMR connection, causing my React app to keep reloading every few seconds which renders it practically unusable. I need to use Ngrok to develop an app for a secondary device over a restricted network. Running I've read several unresolved GitHub issues that relate to this topic (#3093, #4259, #4463) and I get the impression that some users have found a way to make this work, though I have yet to find a clear set of working instructions. I've tried fiddling with the Vite config (e.g. setting my tunnel's domain as the |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 2 replies
-
|
I found a solution, though I'm no expert here so take it with a grain of salt. All that's needed is to set Since I typically use the https tunnel URL, so my config looks like: import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
hmr: {
clientPort: 443,
},
},
})Perhaps this could be made more clear in the documentation, as the current description of the HMR config assumes some experience with networking and the internals of vite's dev server. I never would have known to assign port |
Beta Was this translation helpful? Give feedback.
-
|
This solved it for me (@bpmct shared it with me) - thank you! |
Beta Was this translation helpful? Give feedback.
-
|
Worked for me too |
Beta Was this translation helpful? Give feedback.
-
|
Make sure that your config file is properly loaded. I had a wrong config path, and therefore all my HMR-related settings werde not applied. To check this, add some value as |
Beta Was this translation helpful? Give feedback.
-
|
I tried the above solution but it didn't work for me. I still end up with |
Beta Was this translation helpful? Give feedback.
I found a solution, though I'm no expert here so take it with a grain of salt. All that's needed is to set
server.hmr.clientPortto either80(if accessing an "http" ngrok tunnel) or443(if accessing an "https" ngrok tunnel). This is because port 80 is the standard http port and 443 is the standard https port. That way when you access your page over ngrok, the HMR code on the client can correctly call back to the tunnel and route back to your local server. There is no need to use the--httpsflag for vite.Since I typically use the https tunnel URL, so my config looks like: