Vite Subdomain proxy with HMR

[andycarlberg]

I'm just getting started with code-server. I've been trying to set up a Sveltekit project - based on Vite. I'm having some trouble seeing the dev server. I access code-server through Cloudflare Argo Tunnel, using Nginx Proxy Manager for a reverse proxy.

I've been able to get the /proxy/<port> method working by following @Blake's instructions and examples here. They have been further discussed in #3912 and #3836. I have not been able to get the absproxy working. I'm not sure I understand the difference between proxy and absproxy but perhaps that is relevant to my issues?

My primary issues:

• HMR isn't working
• I would prefer a subdomain proxy (for reasons that are listed elsewhere)

Is it currently possible to address these with a Vite project and code-server?

I'm also just starting to explore Cloudflare so it wouldn't surprise me if the Argo Tunnel is a factor here.

Even if these don't get solved, very impressed with the work on code-server!

[jsjoeio]

I wish I had more experience with Nginx to help here. What I can offer is trying this out on a very simple setup (code-server running via homebrew on macOS). If you post repo steps (assume I have code-server installed) for setting up a Sveltekit and what you expect for the HMR, then I can try it myself locally!

Then if that works, we could rule out code-server being the issue and troubleshoot looking into the rest of your stack

[andycarlberg]

Sure, currently, I'm just working with the starting project. So nothing custom except for the modifications to the svelte.config.js suggested in the posts linked in my original post. svelte.config.js is more or less a pass-through to the vite config as I understand it.

Instructions and docs for setting that up can be found here

The basic to get started is this though:

npm init svelte@next my-app
cd my-app
npm install
npm run dev

I'm using the linuxserver.io docker image of Nginx Proxy Manager.
https://nginxproxymanager.com/guide/
https://hub.docker.com/r/jlesage/nginx-proxy-manager

If it matters, I'm also using the linuxserver.io docker image of code-server
https://hub.docker.com/r/linuxserver/code-server

I'm hoping that the HMR works effectively the same as if I'm running on my local machine. When running sveltekit, it's much like create-react-app and similar in its behavior. It opens a dev server running on localhost at a given port and then hot reloads - I assume through web sockets but I admit I've never looked under the hood.

[jsjoeio]

Thanks for all those details!

Local code-server + localhost

So using code-server locally (homebrew) and accessing the app on localhost:3000 works as expected (HMR).

Screen.Recording.2021-11-23.at.3.05.33.PM.mov

local code-server + Blake's recommended vite settings

With this, HMR does not seem to be working (though I could be doing something wrong, most likely the case).

Screen.Recording.2021-11-23.at.3.05.33.PM.mov

I'm still a little confused on how this all works and what exactly needs to go in the Vite config. Unfortunately, I can't invest more time (otherwise I'm sure I could figure it out with more digging) but maybe this is a step forward.

If we can get it working with /proxy/port then I think the next step would be testing with the Docker image or Nginx Proxy Manager.

I wish we had better docs around /proxy/ vs. /absproxy. Here is the commit where it was added. I believe it's because apps like CRA assume absolute URLs and so we added it for that 🤔

If you investigate further and share here, I can keep helping you figure this out though

[im-coder-lg]

Wait both the videos seem similar to me. I don't know about this, but I just checked the videos posted there, looks so similar to me.

[andycarlberg]

I agree with @im-coder-lg, I think you might have posted the same video twice, on accident.

No worries though, I think the point is clear. Seems like a standard setup running locally does correctly have HMR. So carrying further into my example, it's either something about my reverse proxy or possibly some Vite config that needs changing - since it seems like /proxy loses the HMR that works otherwise.

I'll continue to work on this when I have time (which is unfortunately rare currently). If I manage to find a solution, I'll post back here.

In the meantime, maybe I'll get lucky and someone else will have the same problem and find a solution!

[jsjoeio]

I agree with @im-coder-lg, I think you might have posted the same video twice, on accident.

🤦‍♂️ Sorry about that. Must have selected the wrong file. And I clear my desktop after so I don't have it 😢

possibly some Vite config that needs changing

Yes! That would be my bet.

[andycarlberg]

Additional info I've uncovered as I continue to work on this issue:

Subdomain proxy
Subdomain proxy will not work with the Cloudflare free tier on it's own (for my setup) - the SSL certificate provided by Cloudflare only covers subdomains, not sub-subdomains (e.g. 3000.codeserver.<domain>.<tld>)

absproxy
I have gotten the /absproxy/3000/ route to work via this configuration:

kit: {
    paths: {
        base: '/absproxy/3000'
    },
    ...
}

It's important to note the trailing slash is required to get to the index.svelte - maybe common knowledge but it took longer than I'd like to admit to figure that part out 😄

However, I still haven't been able to get HMR working. I've been tinkering with the vite config (which i mistakenly thought was a simple pass-through previously). That config is below. Documentation is here: https://vitejs.dev/config/#root

kit: {
    ...,
    vite: () => ({
        server: {
            hmr: {
                protocol: "https",
                path: "/absproxy/3000/",
                clientPort: 80
            }
        }
    })
}

I believe the clientPort is required to route the websocket through Cloudflare correctly. I'm unclear if it would be necessary without Cloudflare or if I even need it.

I think the next hurdle is correctly loading the file at .svelte-kit/dev/runtime/internal/start.js. Currently that returns a 404 for me. Something about the SvelteKit config is not adding the /absproxy/3000/ prefix - i.e. it's trying to load that path from the root domain. I suspect if I can figure out how to get that to load correctly, things will start falling into place.

Recording these thoughts in case anyone else comes along and as some insight based on my current state.

[jsjoeio]

Nice sleuthing!

It's important to note the trailing slash is required to get to the index.svelte - maybe common knowledge but it took longer than I'd like to admit to figure that part out 😄

Not something I would have known!

It sounds like you're close though so I hope you figure out the last few pieces! 🤞

[andycarlberg]

In case anyone comes across this later trying to solve the same issue, here's what I know:

1. Subdomain proxy
Subdomain proxy will not work with the Cloudflare free tier on it's own (for my setup) - the SSL certificate provided by Cloudflare only covers subdomains, not sub-subdomains (e.g. 3000.codeserver..)

2. Base path
This is actually an issue with SvelteKit specifically. The base path doesn't apply to the dev server files correctly. I've opened an issue in that repo to address it:
sveltejs/kit#2958

Specifically addressing the trailing slash I mentioned here, this is also a bug in SvelteKit and is listed in their issue queue.

In short, neither of these things are issues with code-server.

[jsjoeio]

Well hopefully this gets fixed in SvelteKit. Thanks for the due diligence and posting your summary here!

[jsjoeio]

Following up here, @bpmct helped me get HMR reloading working in code-server by having me edit my vite.config.js settings to this:

export default defineConfig({
  base: "/proxy/3000",
  server: {
    hmr: {
      clientPort: 8080,
    },
  },
});

And then accessing it via http://localhost:8080/proxy/3000/proxy/3000/

[dubreuil534]

Does anyone have a simple example of a ViteJS project with React, using code-server? I got some problem to configure the proxy with vitejs. No problem with CRA

[jsjoeio]

did you try any of the solutions above?

[dubreuil534]

Yess Unfortunately 😕

[jsjoeio]

Darn it :( Sorry to hear that didn't work. I am not active in the project but maybe @bpmct or @code-asher can chime in

[code-asher]

Never done it myself but @dubreuil534 if you can elaborate on what the problem is (how exactly you set it up, the errors you are seeing, any helpful logs) then we can try figuring out what needs to be fixed.