Live Server in VS Code shows same content for multiple HTML files instead of different content

Question

I've been working on the Odin Recipe Project, which can be found here: https://www.theodinproject.com/lessons/foundations-recipes

I've encountered an issue which I've captured in a screenshot.

(https://i.sstatic.net/wiZz8HKY.png)

https://i.sstatic.net/Yj3GGtax.png

Initially, I created an index.html file and successfully previewed it using Live Server in VS Code. However, after creating a second file, when I tried to preview it with Live Server, both files displayed the same content as index.html. I expected each file to display different content on the server preview or in the browser.

I've attempted solutions like reinstalling Live Server, checking configuration files (like JSON), and troubleshooting, but none of these efforts have resolved the issue.

Answer 1

Live Server serves a directory and special-cases the index.html file in the root of the workspace. For more info on that, see https://stackoverflow.com/a/78178809/11107541. To open your other file, you need to request the resource at the corresponding path. I.e. click into the URL bar of the browser window and add the path of the file relative to the workspace root, or mount directory.