[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 ?