How preview a HTML file GitHub Codespaces?

Question

Let's say I have this index.html file in GitHub Codespaces:

<h1>Hello world</h1>
Test text

How can I preview the HTML file in GitHub Codespaces? Preferably on a VS code tab.

EDIT: It turned out it's a bug in Brave Browser. The suggestions of maddes8cht work well in Chrome.

Revanchism

Not sure how to view this from within vscode, but you can edit it direct from github by browing your repo and changing the .com to .dev: E.g. github.dev/yourAccount/repoName/index.html – Exotoxin

do you mean a simple preview of an html file? Or do you mean html generated by a web application, running on your codespace? The first one is easy: go into your codespace and install any of the html preview extensions in the extensions sidebar, for example the preview extension by Haixin Chen. With this, you can right click your html in the file explorer and chose open preview. – Axil

Answer 1

Simple preview

Do you mean a simple preview of an html file?

Go into your codespace and install any of the html preview extensions in the extensions sidebar, for example the preview extension by Haixin Chen.

With this, you can right click your html in the file explorer and chose open preview.

This should work out of the box, for me it did.

Preview through WebApp / A Codespaces Webserver

You can also try to use the microsoft Live Preview extension. As this is targeted at giving a preview provided by a WebApplication running in your codespace, it requires a little bit more work, but if done, it can also preview simple html files.

First, install the extension.

For me, sometimes it only works afeer restarting the codespace (it doesn't allow me to be activated the first time - don't know why)

As you can see in the screenshot, it gives you a nice preview Icon on top of your editor window. Pressing it will most likely give you an empty / broken preview as seen on the left.

That is because you have to tell it how to access the codespaces webserver. You can find the necessary settings in the PORTS console in the Terminals section. Depending on internals you will find several ports preconfigured, but only one of them will give you a preview of your html. Right click on each line and try preview in editor window. When there is an index.html in the root of your workspace it will show up, for else it will show a directory index which allows you to navigate your workspace. When you now again press the preview button of an html file in an editor window it will show that page in a new preview window.

Axil

Yes, I meant a simple HTML file preview. When I installed Haixin Chen's Preview extension I got this error on install: Error loading webview: Error: Could not register service workers: NotSupportedError: Failed to register a ServiceWorker for scope [...] – Kaliningrad

That is strange - for me it worked right out of the box. Right now i don't have the time but tomorrow i will show you how to do it with the microsoft Live Preview extension which should work too, but needs a bit more work, since it's aimed at evaluation through a web application. Oh, and I'm sorry, somehow I posted the wrong screenshots, now the images actually fit - does that change anything for you? – Axil

Added more information. Hope this helps – Axil

Thanks for the update! I've tried both of your suggestions again even with a blank codespace but I keep getting "Error loading webview: Error: Could not register service workers: NotSupportedError: Failed to register a ServiceWorker for scope". Two things worked though: 1. Click the globe icon in the Ports view on a Local address. It opened the preview on a new tab. 2. Open the codespace in the desktop VSCode (On GitHub on the list item of the codespace "..." -> "Open in ..." -> "Open in Visual Studio Code") – Kaliningrad

When it didn't work with the React template either, after some Googling I've found that it's a bug in the Brave browser. Your suggestions worked fine in Chrome. Thank you very much! – Kaliningrad

Answer 2

Just to complete the answer of @maddes8cht so you understand better.

Github Codespaces (aka github.dev) creates a virtual space for your repository so you can edit and commit your files. It's really just a remote instance of VSCode but it doesn't by default serve your files on an endpoint URL.

The good news is, because it's a virtual space (located somewhere on GitHub servers) you can run any command like you'd do on your local machine.
That means yeah you can run a server there, and it's smart enough to know you've just run a server and does "port forwarding" for you (again it means that you can access this server remotely as you would in a localhost development scenario.)

Here's a simple solution:

• Open the terminal if not already opened (ctrl+shift+p to open the command palette, and then type "toggle terminal" and Enter to select)
• Type npm i -g http-server in the newly opened terminal (this will install the tool to easily create a server) ¹
• Next, you have to run the server, type http-server in the same terminal.
• You'll then be prompted with this notification You can click Open in Browser and see the result there, if your index.html file is at the root of your project it will be opened by default or else you'll need to write the correct path in the URL bar.

Now if you want to open in a VSCode tab

• Open the command palette
• Search Simple Browser: Show
• It will ask you which URL to open, just paste the URL that was opened in a tab in the previous steps.

If you want hot reload

Maybe you want the page to automatically refresh when you update your file. In the example above we installed http-server which is just a plain server that serves static files.
If you need hot reload you can install a server that supports it, here's a few: vite, @web/dev-server, browser-sync, ...

Hope it helps.

---

¹ Note, there are many other tools for creating dev servers, this one is just serving static files and suffice if you only want to preview your files.

Archenemy

Answer 3

You can preview a single file, or an entire (vanila) website via php server.

It's already installed by default in codespaces

php -S localhost:3006 -t ./

and, you can set a task (vscode) for fast execution. (example)

Steinberg