Unable to configure Nuxt 3 with vite & hmr to be run with Gitpod
davemecha opened this issue · comments
Environment
Nuxi 3.0.0-rc.11 17:33:35
RootDir: /workspace/nuxt-gitpod-test 17:33:35
Nuxt project info: 17:33:35
- Operating System:
Linux - Node Version:
v16.17.1 - Nuxt Version:
3.0.0-rc.11 - Nitro Version:
0.5.4 - Package Manager:
yarn@1.22.19 - Builder:
vite - User Config:
buildModules,typescript,vite,build,css - Runtime Modules:
- - Build Modules:
nuxt-vite@0.3.5,@nuxtjs/tailwindcss@5.3.3,@pinia/nuxt@0.4.2
Reproduction
I created a demo repository https://github.com/davemecha/nuxt-gitpod-test
- Just start a VSCode Gitpod environment in the browser for this repo with: https://gitpod.io/#https://github.com/davemecha/nuxt-gitpod-test
- Make sure the dev server is started in the terminal (should start automatically, but the data collection confirmation must be passed so finish startup). it can be started manually with
start dev - Open ports view (in the bottom, next to the terminal)
- Open port 3000 by clicking the globe icon
- Page is in reload cycle since vite dev server is not configured correctly (check with chrome dev tools)
Describe the bug
I can't find any way to configure HMR with vite so it runs as expected behind the reverse proxy of Gitpod. The websocket connection cannot be established correctly.
I would expect something similar to clientPort for a client URL but was not able to find a proper setting for this. I also tried to somehow use a proxy config in the nuxt config to work around the issue but I was out of luck here too.
Additional context
I'm new to Nuxt, so I think I missed something. It would be great to find a solution to this. I would add this solution to the demo repo posted above, so future users of remote coding environments like Gitpod find it easier to work with Nuxt and vite.
I also opened a Stackoverflow question on that matter and discussed it with the Gitpod community on their Discord. Unfortunately nobody was able to help yet.
Logs
No response