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.

Answer 1

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.

Answer 2

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.