When I try to use the “Open with Live Server” link in VS Code, it produces a display of a directory listing, specifically the subdirectory that contains .jpg image files. This is true no matter what html file I have open in VS Code, including the index.html file.
Searching online says that this is caused by not having an index.html file; however, there is an index.html file in the same path as the file open in VS Code. I can click on the file name of other html files in the same path and they open in a chrome browser window.
There must be another answer than ‘not having and index.html’ file present.
Any suggestions?
It sounds like your project has not coded the default page directory of the “live server” correctly, and is expecting an “index.html” in the images directory because it thinks the image directory is the main file directory.
1 Like
Thank you for the response.
Do you have any suggestions for how to fix the problem?
Have you told VSCode to Open Folder the root directory?
1 Like
I’m guessing that you are referring to a setting for VS Code. If so, can you offer pointers on how to do what you suggest? I don’t recall having done anything in VSCode in the past; yet the Open with Live Server worked perfectly, opening in Chrome which is set in the Live Server settings as the default.
There are so many options in VS Code that I’m overwhelmed by their number not to mention my ignorance about what they mean.
I kept looking at this and found that Live Server settings for root exist in settings.json.
Looking at settings.json (via VS Code) I found this:
"liveServer.settings.root": "/",
A popup message says that this is the default value. Am I looking at the wrong setting?
No, I mean a literal option in the File menu that reads “Open Folder”.
Thanks for the response.
Yes, I have opened the folder in VS Code and the files that I’m working with.
Thats odd. If your liveServer settings root is “/”, it should be using whatever your workspace is as the root, and if you opened the Folder using Open Folder to make your workspace root the folder with index.html in it, It should have made that the workspace root…
Can you show us what the left side (the Explorer dock) looks like?
1 Like
My issues with VS Code continue.
I kept searching and reading answer to the question of why VS Code Live Server displays a directory. Apparently this has happened to a lot of people over the years. Different solutions have worked for different people, but none of them worked for me.
One seemingly credible (because it was more thorough) post suggested reinstalling VS Code then the extenstion. I downloaded a fresh copy of VS Code then uninstalled the old copy via Windows Settings > Apps. When I try to install the freshly downloaded copy of VS Code for Windows 11, I got this message:
I tried downloading several times and used the fresh download each time and got the same result each time. My Windows is up to date.
Then I went to the Microsoft Community to see if my question was there and got this response:
Now I’m without VS Code unless I go back a couple months to my last download which is the version that won’t run Live Server.
Any suggestions on how to proceed from here?
I finally got Live Server to work. Although the VSC Explorer window showed that my index file had been opened along with other html files in the same directory, there was some issue. Perhaps I had not opened the folder first but had opened the files directly. I don’t know; I’m only speculating. In any case, I closed all the open files in VSC and went back to the folder I use for staging FTP uploads. I chose that folder and opened it. I then opened all the files in the folder including 3 html files and my css file. I could then choose an html file from the VSC Explorer list, right-click and choose open with Live Server. That gives me the browser display of the file chosen.
I did this after uninstalling all vestiges of VS Code from my system and downloading a fresh copy from the Microsoft store insteading of the link given by searching for “VS Code Download.” I then reinstalled it before making the changes described in the paragraph above.
It’s unclear to me which change worked, but I suspect that it was opening a folder afresh then opening the files therein.
I’m posting in case someone else is searching here with the directory listing problem.
2 Likes
Sometimes it’s a workspace or root folder mismatch. Is your index.html definitely in the folder you’re opening Live Server from, not a subfolder?
1 Like
Yes, everything is in order now. I think there was a root folder mismatch but I got it fixed.
Thanks for the help.
