What is the best way to open html files from vscode when using WSL?

Question

Specifically, I am using the open-in-browser extension, but when I go to open my html for a given project it fails to load in the browser. I have tried putting my repo in both a straight Linux directory as well as in a folder in c/mnt/Users... Is there a way around this?

Tanah

Answer 1

After stumbling on the same issue I found a straightforward extension to solve the issue: https://marketplace.visualstudio.com/items?itemName=peakchen90.open-html-in-browser

This extension does not serve the file from the filesystem, but rather serves it from a local webserver.

I was rather looking for something that would convert the WSL filepath into the corresponding windows filepath, but this works just as well if not better, for webdev purposes.

Beisel

Answer 2

Also another option as this did not work for me:

In WSL (I'm using WSL2) run a simple HTTP-server, e.g. using:

cd path/to/your/file
python3 -m http.server 5000

This allows you to connect to the localhost in WSL at port 5000 from your Windows-system via your browser and simply open the .html-file there (even allowing all JavaScript or whatever to be executed correctly).

Note: Be reminded that you cannot run localhost in your Windows-browser but need to resolve to the IP-address which WSL opens for this. You can find the IP-address when running ip route in WSL and look for the "link src", e.g. something like 172.XX.XXX.0/20 dev eth0 proto kernel scope link src 172.XX.XXX.XX. This example would require you to open 172.XX.XXX.XX:5000 in your Windows browser.

Loredo

Answer 3

I have stumbled on a way to do it, which may be helpful if you don't want to use the python3 http.server.

just open your browser and type in the search bar:

wsl.localhost/{wsl_machine_name}/{path to your index.html file}

here is an example of a file path I tried to open:

wsl.localhost/Ubuntu-22.04/home/ez-114/practice/index.html

Ashelyashen