[code] support live preview of local files

[kevinadhiguna]

Bug description

Unable to see HTML file and faced a HTTP 400 Bad Request issue. Instead, I saw a text saying : Web Sockets Request was expected.

Steps to reproduce

1. Create index.html and index.ts file.

index.html :

index.ts :

2. Compile index.ts with yarn tsc index.ts and produce an index.js file.

index.js :

3. Create an <h1>Hello</h1> and connect it to index.js.
4. Open a new tab to access <PORT>-<Gitpod Workspace URL>.
5. See a text saying : Web Sockets Request was expected.

Expected behavior

Display an HTML file and run Javascript in console.

[akosyakov]

Are you sure that you are using the correct port? The server tells you that it exposes web socket connection, not pure http.

[akosyakov]

Could you share the repo please? From the description is not clear which server you are running.

[kevinadhiguna]

Could you share the repo please? From the description is not clear which server you are running.

Sure, here is the repo : https://github.com/kevinadhiguna/typescript

[kevinadhiguna]

I just ran it, it said it runs on port 42139 :

Then I clicked the Open Browser icon :

Again, it showed me WebSockets request was expected :

[akosyakov]

This port is a debug port for Gitpod Code Server. It does not have anythign to do with index.html

Are you trying to preview index.html?

[kevinadhiguna]

This port is a debug port for Gitpod Code Server. It does not have anythign to do with index.html

Are you trying to preview index.html?

Yes, I am. Sorry I am confused how to preview the HTML file. The docs in Gitpod shows how to do it in Theia but I am a bit confused as I usually drag ad drop an HTML file in local machine to preview it. Do you mind telling me how to preview HTML in a new tab from Gitpod ?

[akosyakov]

Hm, VS Code does not support this feature by default, but you can install additional extensions like: https://open-vsx.org/extension/ritwickdey/LiveServer Could you give it a try?

[kevinadhiguna]

Sure, I just installed the Live Server extension in VScode in Gitpod.

Next, I right-clicked index.html and opened it with Live Server :

The result was :

A couple of questions please :

• HTTP 404 indicates that favicon.ico was not found, or another error ?
• Why Firefox could not establish connection to the server ? Is there anything wrong ?

[akosyakov]

HTTP 404 indicates that favicon.ico was not found, or another error ?

correct

Why Firefox could not establish connection to the server ? Is there anything wrong ?

that's probably related to how we handle ws connection

[akosyakov]

I tried in both Chrome Version 89.0.4389.114 (Official Build) (x86_64) and FireFox 87.0 (64-bit) and it worked well. I don't see any errors in FF:

Are you sure that you are using in latest FF?

[kevinadhiguna]

HTTP 404 indicates that favicon.ico was not found, or another error ?

correct

Why Firefox could not establish connection to the server ? Is there anything wrong ?

that's probably related to how we handle ws connection

Thank you very much, that was so helpful.

[kevinadhiguna]

Yes I am using the latest Firefox version 87.0 (64-bit)

I once stopped the workspace and the error vanished. However, if I start it again, somehow it appears again in the console..

[kevinadhiguna]

Anyway, the Firefox unable to establish connection is not a major issue here IMO. Many thanks for the prompt reply, it helped a beginner like me a lot !

[akosyakov]

please upvote here to implement live preview in VS Code: microsoft/vscode#12080 You can also follow this thread for other solutions (VS Code extensions).

[kevinadhiguna]

please upvote here to implement live preview in VS Code: microsoft/vscode#12080 You can also follow this thread for other solutions (VS Code extensions).

Upvoted, thanks

[yandeu]

A couple of questions please :

• HTTP 404 indicates that favicon.ico was not found, or another error ?
• Why Firefox could not establish connection to the server ? Is there anything wrong ?

Would it be possible for you to test this with Five Server?

[kevinadhiguna]

A couple of questions please :

• HTTP 404 indicates that favicon.ico was not found, or another error ?
• Why Firefox could not establish connection to the server ? Is there anything wrong ?

Would it be possible for you to test this with Five Server?

How may I install Five Server in Gitpod ? @yandeu

[yandeu]

How may I install Five Server in Gitpod ?

I have just added it.

---

Also, I found a bug in Live Server and Five Server that prevents auto-reload on an index page. If you want to use auto-reload, access your index file with /index.html.

But everything else (instant update, highlight, auto navigation) works fine.

I will publish an update to Five Server tomorrow.

[kevinadhiguna]

Thank you @yandeu , I was able to install Five Server extension.

However, I encountered some issues regarding connection.
This is how it looks in Firefox :

Terminal in Gitpod in FIrefox :

This is how it looks in Chrome :

Terminal in Gitpod in Chrome :

This HTTP 404 indicates that favicon.ico was not found, or another error ? was replaced with Five Server's favicon.ico, wasn't it ? As it no longer occurred.
Meanwhile, do you have a clue on this issue : Why Firefox could not establish connection to the server ? Is there anything wrong ?

Environment
Firefox : Version 87.0 (64-bit)
Chrome : Version 89.0.4389.114 (Official Build) (64-bit)
OS : Ubuntu Focal Fossa 20.04.2 LTS

[kevinadhiguna]

In firefox, I had to click refresh button to get rid of the error :

Nevertheless, the Firefox can't establish connection to the server .. error happened again after a few seconds.

The same goes to Chrome :

[yandeu]

Five Server's favicon.ico, wasn't it ?

Yes 😄 (see yandeu/five-server@5564c40)

Why Firefox could not establish connection to the server

Yes, I will try to fix that today. In the meanwhile try to rename your index.html to something else like website.html.

---

Also, there is a small bug when reloading css. Will fix that as well 👍

[yandeu]

@kevinadhiguna I have fixed everything. Just had no time to release it today :/

[yandeu]

Five Server v0.0.25 is now available on gitpod and it works very very well :)

[kevinadhiguna]

Cool @yandeu , it worked like magic ! Thanks

[yandeu]

You're welcome 🙂

Also, there are new cool features in development.

Currently working on a sort of "Hot Module Replacement" feature. Means, instant update while keeping the state (DOM) previously manipulated by JavaScript 👍🏻

[akosyakov]

@yandeu Does it support preview of PDF files too? In Theia we used to have special handling for pdfs: https://github.com/eclipse-theia/theia/blob/96930a2edcc4c706d41ab8486500de7979d01283/packages/mini-browser/src/browser/mini-browser-content.ts#L581-L593 Maybe you can get inspired from that and add PDf support for Five Server too? We have such questions in the community: https://community.gitpod.io/t/latex-pdf-viewer/3365

[yandeu]

I have not implemented anything special for PDFs yet. I guess if you try to preview it, it will display "File is too big for a preview"? I haven't tried it yet. Have you tried it? What does it show?

Five Server allows for middlewares, similar to an express app. So I guess it would be possible to embed a PDF preview.

Feel free to open a new Feature Request Issue on yandeu/five-server (not yandeu/five-server-vscode).

[akosyakov]

@yandeu here you go yandeu/five-server-vscode#1

[akosyakov]

@yandeu I tried the latest extension and it gives me:

From this repo: https://github.com/joejcollins/latex Maybe some CSP is misconfigured for iframe in remote context, not sure?

[yandeu]

Yes, I think the CSP policy of the WebView is blocking iFrames.
But it works fine if you try to preview it in the browser :)

[akosyakov]

Yes, I think the CSP policy of the WebView is blocking iFrames.

It is strange though, frame-src is set to * for the preview extension. Maybe some attributes or policies are missing on level of five server iframe?

[mfouesneau]

I'm getting the same issue for the PDF viewer. Any updates? Could there be information if this issue shows up with vs and not theia maybe?

[yandeu]

@mfouesneau @akosyakov Please help to debug the PDF preview feature on https://github.com/yandeu/preview-pdf-test

[mfouesneau]

Sure. How can we provide help?
The main issue remains also on the pdf preview tool: "Requests to the server have been blocked by an extension." because of the security issues.
One main problem is that this extension is not linked with the usual tools (eg. Latex workshop) which reduces the features.

[yandeu]

It looks like the "Simple Browser" preview does not support loading PDFs.

Therefore, Five Server will only show PDF preview in the browser.

I tried Office Viewer which seems to show a preview for PDFs.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.