VS Code Live Server Path Configuration

Mon, 31 Mar 2025 00:00:00 +0000

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.

Vscode on homelab