Issue opening HTML code via browser using Visual Studio Code

I'm using Ubuntu with WSL.

Inside Ubuntu, I have:

• Created a directory for my code and cd'd to it
• Executed code . to begin working on an HTML project in VSCode

However, when I put the code inside the HTML5 template and try to run it, it does not open in my browser. I get the following error message:

File Not Found. It may have been moved, edited, or deleted.

When I copy the path from the HTML file in VSCode and try to paste it in the browser it still does not work.

However, when I then right-click on the HTML file and open it via Reveal in Explorer and then copy and paste the URL from there into the browser, it works.

It does have the WSL title in the path.

Why can't I just open it in VSC? It is not finding it in the browser that way. But when it is like this:

file://wsl%24/Ubuntu/home/pypy/books/paper.html

... it then finds it.

I am confused as to why this is happening and the long term consequences of this. Will this affect my web site in the future? Will it cause hosting problems? How can I fix this?

I can reproduce this, and I'm honestly a (little) bit surprised by it. I would have the same assumption as you that this would "just work." I expected that since we're using the "Remote - WSL" extension in this case, the extension would have handled the path translation. Unfortunately, this doesn't seem to be the case.

It may just not be an option for VSCode extensions to modify the path of files when other (non-extension) actions are acting on the file.

So what is really happening is that the path that gets passed to your Windows browser is file://home/pypy/books/paper.html, and a Windows browser isn't going to find a file given that path. As you've found, to a Windows browser, that should look like:

file://wsl$/ubuntu/home/pypy/books/paper.html
# or
file://wsl.local/ubuntu/home/pypy/books/paper.html
# The "ubuntu" part may vary depending on your exact distribution name

Side note: The %24 that you are seeing is just the URL-encoded form of $.

There are several solutions:

• First, a simple solution is to use the Remote-WSL: Reopen in Folder in Windows action:

  • In VSCode, press Ctrl+Shift+P to open the Command Palette
  • Start typing "reopen" and select the option Remote-WSL: Reopen in Folder in Windows
  • Run your HTML project again via F5

  The browser should open properly using the Windows (rather than WSL/Linux) path.

• A second option, and the one you'll typically use as you get more advanced in your HTML development, is to run a local web server. This will allow you to develop in a more "real world" environment, as you'll need to do for many features to work (e.g. Node and its various web frameworks such as Svelte, React, etc. etc. etc.).

Will this affect my web site in the future? Will it cause hosting problems?

Well, honestly, it could, but not if you do things the "right way". That's to make sure that paths in your HTML are relative to the file's directory. For instance, you could refer to an image file in a subdirectory of that of the HTML file by specifying:

<img src="file://wsl.local/ubuntu/home/pypy/books/images/logo.png" />

And that would work when viewing the file locally on your machine. Of course, it would fail when you are hosting it on a real web server.

Instead, use a relative path:

<img src="images/logo.png" />

... which will work in both VSCode when viewing locally (at least after choosing Reopen in Folder in Windows) and when hosting on the web.

Normally the HTML, JS, CSS, etc. are served to the browser via a web server. So, it is good practice to use one while developing your page or application.

Fortunately, there is an extension for VSC called Live Server that makes the things easier. Since your files are located within WSL, the extension should be installed in the (remote) WSL instance. Here is a short video how it can be installed and how to use it.

While the Live Server is running the relevant browser's tab will be automatically reloaded when you save any change within the project.