How to open web preview as web page with Cloud Shell

政雄木下 25

I am considering launching an administrative web app (e.g. mongo-express) from Cloud Shell and opening the administrative web app page in Web Preview.

I could launch the admin app and open it in Web preview, but it would be displayed as just text, not a web page.

Is there a way to display Web preview as a web page?

Reproduction code (using serve)

mkdir -p test && cd test
npm install serve
npx serve .
# default: run on localhost:3000
# set Web preview's port 3000, and launch web preview

cloudshell_web_preview

1 answer

Sedat SALMAN 13,835 Reputation points

2024-07-25T08:27:36.1+00:00

Ensure your web application is configured to serve HTML content. In your case, you're using serve, which should automatically handle serving HTML files. If you're building a custom app, ensure your server-side code (Node.js, Python, etc.) is sending the correct content-type headers (Content-Type: text/html). After launching your app and setting up port forwarding, click the Web Preview button in the Cloud Shell toolbar. It typically looks like a square with an arrow pointing outward. Choose the correct port (3000) from the dropdown.
Please sign in to rate this answer.
政雄木下 25 Reputation points

2024-07-25T11:02:14.8433333+00:00

Sorry, I posted duplicated. Please refer below comment.

政雄木下 25 Reputation points

2024-07-25T11:11:30.8466667+00:00

Sorry, I posted duplicated. Please refer below comment.

政雄木下 25 Reputation points

2024-07-25T11:14:01.2333333+00:00

When the same code is executed locally, serve returns the correct Content-Type:text/html. (image1)

Similarly, when verified using curl from the Cloud Shell Terminal, serve returns the correct Content-Type:text/html. (image2)

However, when checking through Web Preview, the Content-type is changed to application/json. (image3)

We suspect that when using Web Preview, the response headers are being rewritten on their own.

image1.png

image2.png

image3.png

政雄木下 25 Reputation points

2024-07-25T11:35:51.5+00:00

I checked other test that serving html file by serve.

Additional reproduction codes:

curl https://www.w3.org/People/mimasa/test/table/cellspacing/ -o test.html # download test page npx serve .

locally test, firstly returned 301, and redirect to the content. (image4)

In Web preview, accessing test.html results in empty content with no redirect because of wrong status code. (image5)

image4.png

image5.png

I wonder this is a bug or an original spec.

Sedat SALMAN 13,835 Reputation points

2024-07-25T14:44:10.1+00:00

wrong content

Sedat SALMAN 13,835 Reputation points

2024-07-25T14:48:33.8333333+00:00

maybe you can try to use npm express by creating a server.js
and repeat the test

政雄木下 25 Reputation points

2024-07-25T17:11:14.6633333+00:00

I created a simple express server to serve html content, but web preview returned wrong Content-Type.

Launch on local, return correct Content-Type:text/html. (image6.png)

Launch on Cloudshell with web preview, return wrong Cotent-Type:application/json(image7.png)

Using code is following:

var express = require('express'); var app = express(); var port = 3000; var fs = require('fs'); app.get('/', function(req, res) { index_html = ` <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Test</title> </head> <body> <h3>Test</h3> <div>This is Test.</div> </body> </html> `; res.writeHead(200, {'Content-Type': 'text/html'}); res.end(index_html); }); app.listen(port, () => { console.log(`Example app listening on port ${port}`); });
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

How to open web preview as web page with Cloud Shell

1 answer

Your answer