VS Code Live Server Path Configuration#

What Was Established#

Resolved the “Cannot GET /page-name” error in VS Code Live Server by implementing a standardized project directory structure and correct relative pathing. The core fix involves ensuring the server root is set to the project root and using ../ to traverse up from subdirectories.

Key Decisions#

Project Rooting: Always open the top-level project folder in VS Code rather than individual subfolders (like html/). This allows Live Server to correctly resolve paths relative to the project root.
Directory Separation: Adopted a structured hierarchy to separate assets, logic, and presentation.

Current Configuration#

Project Structure#

project-root/
├── Assets/
│   ├── icons/
│   └── images/
├── html/
│   ├── index.html
│   ├── about.html
│   └── contact.html
├── scripts/
│   └── main.js
└── Styles/
    └── style.css

Pathing Rules (when working inside `html/`)#

When files are located within the html/ subdirectory, all links to external directories must use the ../ prefix to exit the html/ folder first.

Resource Type	Path Pattern	Example
Internal HTML	`href="filename.html"`	`<a href="about.html">`
CSS	`href="../Styles/filename.css"`	`<link rel="stylesheet" href="../Styles/style.css">`
JavaScript	`src="../scripts/filename.js"`	`<script src="../scripts/main.js"></script>`
Images	`src="../Assets/images/filename.png"`	`<img src="../Assets/images/logo.png">`

Historical Notes#

This configuration was established in March 2025 to resolve broken links caused by moving HTML files into a dedicated html/ folder.

Open Questions#

None.

None

Sources#

ingested/chats/026-Live Server Path Issue in VS Code.md Live Server Path Issue in VS Code · ingested/chats/live_server_path_issue.md