Document proxy and shortcomings

[nekomeowww]

I have spent my whole day wo research and find out how I can deploy a Cloud IDE instance for vue development environment. I found out that /absproxy works very differently from /proxy which the documentation didn't mentioned about a lot.
Another problem was the sockjs-node, I have looked up these issues and prs to find out more clues:

• Add /absproxy to remove --proxy-path-passthrough #2674
• code-server's reverse proxy seems to always return index.html for all resources #2222
• pathProxy.ts: Implement --proxy-path-passthrough #2563

Infact, create-react-app script did fixed the sockjs-node's always pointing root / issue, meanwhile, there's no any effective or useful way to make vue/cli3''s sockjs-node to work.

There is a example that worth vue developers to take a look:

• Add docs for proxying Vue applications #3918

In this example, the demo was shown as local development envirnment with no subdirectory, however, it was painful to setup a nginx/Apache reverse proxy server rewrite rule without reading the proxy code of code-server it self (which took the most of my time).

Will there be any documentation to summarize the way those proxy work, and maybe, support vue/sockjs-node proxy in HTTPS development envirnment (HTTPS development envirnment is very important in this age of time)?

[jsjoeio]

I have spent my whole day wo research

Very sorry to hear you spent your whole day researching this 😢

how I can deploy a Cloud IDE instance

We have pretty thorough guides for deploying code-server which is mentioned in the README and the docs. We also have this repo with guides (planning to move over #3807). Is there anything we can do to make that information easier to find for future folks?

I found out that /absproxy works very differently from /proxy which the documentation didn't mentioned about a lot.

Where did you look for this information and what was missing? That will help us make a note to improve it!

In this example, the demo was shown as local development envirnment with no subdirectory

I don't do any Vue development, but if you provide an example or repro steps, I'd be happy to update that example to show one with a subdirectory too!

Will there be any documentation to summarize the way those proxy work

We can definitely add more docs around how the proxy works! Let me know what you'd like to see, I'll add and then add you as a reviewer!

, and maybe, support vue/sockjs-node proxy

I'm not familiar with this and not sure how difficult it would be to support but if you open a separate feature request, we can discuss and see what's possible.

[nekomeowww]

Where did you look for this information and what was missing? That will help us make a note to improve it!

It's the documentation here: https://coder.com/docs/code-server/latest/guide#stripping-proxyport-from-the-request-path

However, some prefer the cleaner aesthetic of no trailing slashes

Actually, I found some strange bugs for my Vue app where the trailing slash missing would cause path 404 issue. So there might be some bug or misconfiguration on my side.
In my case, I encountered another issue where the /proxy or /absproxy only returns the index.html (template html, with env variable placeholders inside) for any resources requested to webpack-dev-server. Yes, it returns the index.html content to app.js and caused the app not to run. So I finally get to this PR and look for an update/fixes:

• pathProxy.ts: Implement --proxy-path-passthrough #2563

After cleaning caches and review the configurations from documentation, the /absproxy worked.

You must use /absproxy/ with create-react-app

That might be the only usage or description for /absproxy, which didn't include the usage or descriptions to that. I don't know whether vue app or svelte app would suit this? But /proxy won't work at all.
And so on, I found out that #2674 removed --proxy-path-passthrough parameter, added /absproxy for new proxy implementation, where the documentation mentioned nothing about the proxy issue, sockjs-node issue, and index.html as all resources issues.

I think those information were missing for those who were trying to build a Cloud IDE on their own.

I don't do any Vue development, but if you provide an example or repro steps, I'd be happy to update that example to show one with a subdirectory too!

I'd like to help you out with that. Actually, I just joined the Slack channel yesterday.

We can definitely add more docs around how the proxy works! Let me know what you'd like to see, I'll add and then add you as a reviewer!

Yes sure, please! I would like to improve the documentation as well, with the vue app deployment guidance.

I'm not familiar with this and not sure how difficult it would be to support but if you open a separate feature request, we can discuss and see what's possible.

So, with the new documentation said, we can add a property called sockPath to specify a path for sockjs-node, in fact, the definination of this property was missing from the documentation of vue/cli3.
I will give it a try on that today.

[nekomeowww]

Here's a short question.

By using /proxy or /absproxy, the Cookie, LocalStorage, SessionStorage, and many more other web storage won't be isolated, since modern browsers isolate those application assets by domain:port or domain. So the development environment might be contaminated if the projects' tokens, keys are the same, and even corrupt the CSRF/Same Origin Policy.

Is this attempted to be intentional?
I think we should state it out within the documentation.

[nekomeowww]

sockPath might not be fully supported across @vue/cli? Not sure. I will take a look.

This issue stated out some implementation issue, webpack/webpack-dev-server#2535

[jsjoeio]

Here's a short question.

By using /proxy or /absproxy, the Cookie, LocalStorage, SessionStorage, and many more other web storage won't be isolated, since modern browsers isolate those application assets by domain:port or domain. So the development environment might be contaminated if the projects' tokens, keys are the same, and even corrupt the CSRF/Same Origin Policy.

Is this attempted to be intentional?
I think we should state it out within the documentation.

Interesting...this would be a great question for @code-asher

[jsjoeio]

sockPath might not be fully supported across @vue/cli? Not sure. I will take a look.

I'll defer to you. I don't use Vue so can't chime in really 😢

[jsjoeio]

I'd like to help you out with that. Actually, I just joined the Slack channel yesterday.

That's awesome ♥️ So I added a small piece to our docs about Vue.js apps.

Yes sure, please! I would like to improve the documentation as well, with the vue app deployment guidance.

Do you want to take a look #4033 and then open a PR to add anything that's missing?

[jsjoeio]

@bpmct shared this for getting it to work with an external domain:

#3912 (reply in thread)

[code-asher]

Yeah the path-based proxy has all those shortcomings. The subdomain-based proxy is definitely superior. Seems like a good idea to mention that in the docs.

[nekomeowww]

@bpmct shared this for getting it to work with an external domain:

#3912 (reply in thread)

Thanks for that. I will test it out to see if that works.

[nekomeowww]

Yeah the path-based proxy has all those shortcomings. The

subdomain-based proxy is definitely superior. Seems like a

good idea to mention that in the docs.

Can we open up another PR to detail this information in documentation? I think it would be useful for newbie developers.

[jsjoeio]

Definitely! I'll change this issue to reflect that.

[nekomeowww]

I will provide a @vue/cli (Vue3) example and a vite (Vue3) example to help you guys improve the documentation.

[nekomeowww]

I found out that I can't make vitesse (one of the boilerplate project for vite) work in HTTPS at all, or even with pure vite project without any framework added. This might related to the secured websocket implementation of vite.

[bpmct]

I found out that I can't make vitesse (one of the boilerplate project for vite) work in HTTPS at all, or even with pure vite project without any framework added. This might related to the secured websocket implementation of vite.

Is this true with a subdomain or just the path-based proxy?

[nekomeowww]

I found out that I can't make vitesse (one of the boilerplate project for vite) work in HTTPS at all, or even with pure vite project without any framework added. This might related to the secured websocket implementation of vite.

Is this true with a subdomain or just the path-based proxy?

Both subdomain and path-based proxy