Code-Server and Live Preview

[DyloFi]

Hey guys sorry to bother. I have code-server running on an old iMac using a Freenom domain, Cloudflare, and Caddy. I am accessing my code-server via https://mydomain and everything seems to be working fine except that I cannot preview my HTML files with the "Live Preview" extension.

My Live Preview window is blank. As another option, I tried the "Five Server" live previewing extension, but it just opens a browser webpage that says "This site can't be reached" "127.0.0.1 refused to connect."

Is this an HTTPS issue? WebSockets? Self-signed certificate?

I was initially using port forwarding via SSH and accessing my code-server via 127.0.0.1:8080, but I encountered the same problem.

Have I missed a critical step somewhere or is remotely previewing HTML files not possible using code-server?

Any help would be appreciated, but do apologize if the terminology I am using is not exactly correct, and would just like to say thanks in advance to anyone who might be able to shed some light on this issue.

[jsjoeio]

Great question. Reading about "Live Preview", it says,

An extension that hosts a local server for you to preview your web projects on!

So if it's hosting a local server for you, would you need to forward that port as well? 🤔 I imagine you'd have to set something in your Caddy file to forward all ports on "127.0.0.1" but I don't know if that would work.

Maybe @code-asher knows?

[code-asher]

Yeah it does not look like the live preview extension has support for remote servers. Many of these extensions still assume they are running in local VS Code so they try to connect to localhost.

Ideally the extension would have an option where you could set the URL so you can open it through code-server's proxy (I checked but did not see one) or it could detect it automatically from the VSCODE_PROXY_URI environment variable.

One workaround is to manually use the proxy by going to https://domain.tld/proxy/3000/ (this is a path-rewriting proxy and assumes your preview server is running on 3000) or https://domain.tld/absproxy/3000/ (same deal except not a path-rewriting proxy).

The next best thing would be forward your local port 3000 to your server.

I tried a while back to automatically intercept localhost calls to replace them with the proxy but ran into some issues. Might be worth giving it another shot.

[code-asher]

You can also use Caddy to proxy port 3000 if you would rather that then use code-server's built-in proxy.

[DyloFi]

Super appreciative of you guys for taking the time out to lend a hand @jsjoeio @code-asher. At least now I know it's not supposed to work right out of the box.
I'll take a look at what can be done with caddy and see if I can come up with a workaround.
Thanks again fellas, Cheers.

[bchewy]

Hello! Did you ever figure out/workaround that would work? I'll also give it a shot via caddy's port forwarding and let you know, maybe try some other alternative extensions!

[DyloFi]

Hey mate, unfortunately I was never able to workout how to to get “Live Preview” to work remotely. There is an extension called “CodeSwings”? That kind of worked but it was a bit clunky from what I remember. Sorry I couldn’t be of more help to ya.

[slungs]

For me, as @code-asher stated, just using /proxy/port worked. Make sure that you go for the correct port, for me it was the default 5500. So the url would be: www.mydomain.com/proxy/5000

[Dave-code-creater]

For anyone who need, so when you need to do port or live preview. Then you need to have the url follow by proxy and port then the folder path to your acutall file. For example:

/home/container/Code/JS/Color Flipper
[container@Code-Server Color Flipper]$ tree 
.
├── index.html
├── script.js
└── style.css

and the url have to be: https://codeserver.homeserverlocal.com/proxy/5500/Code/JS/Color%20Flipper/index.html

i hope this help