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 in a Visual Studio Code tab.
3 Answers
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 Visual Studio Code, 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-serverin the newly-opened terminal (this will install the tool to easily create a server) 1Next, you have to run the server. Type
http-serverin 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 Visual Studio Code 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 are a few: vite, @web/dev-server, browser-sync, ...
1 Note that there are many other tools for creating development servers. This one is just serving static files and suffices if you only want to preview your files.
1 Comment
s.ouchène
I used
python -m http.server instead of npm and it worked.A 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 a web application / a GitHub Codespaces web server
You can also try to use the Microsoft Live Preview extension. As this is targeted at giving a preview provided by a web application 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 after 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 content. Right-click on each line and try preview in editor window. When there is an index.html file in the root of your workspace, it will show up, or 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.
5 Comments
Gábor Kiss-Vámosi
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 [...]
maddes8cht
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?
maddes8cht
Added more information. Hope this helps
Gábor Kiss-Vámosi
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")
Gábor Kiss-Vámosi
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!
You can preview a single file, or an entire (vanilla) website via the PHP server.
It's already installed by default in GitHub Codespaces.
php -S localhost:3006 -t ./
And you can set a task (Visual Studio Code) for fast execution (an example).
previewextension by Haixin Chen. With this, you can right click your html in the file explorer and choseopen preview.