Which addresses can a page read with fetch?
This page is served from the course site, so only that site's own files can be read, just as your page at localhost:5173 can read its own public/ folder. A wrong path is an answer (404), not an exception: only the three blocked reads throw.
A page you double-click cannot read data files or import its own code, because the browser treats file:// pages as unsafe. A small local server (Vite, run by Node) fixes that, and npm fetches D3 for you. This topic sets up the project the rest of the course uses.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write the exact terminal commands, in order, that take you from an empty folder to a running dashboard project with D3 installed. Then say which of them you would run again on a teammate's computer that already has your package.json and src/.
A teammate sends you a zip of the project that includes node_modules (tens of megabytes for this project, often far more). What do you do, and what do you tell them to send next time?
Explain it without notes
Why does fetch("data.csv") work from npm run dev but not from a double-clicked page?
What is the difference between package.json, package-lock.json and node_modules?
What does the ^ in "d3": "^7.9.0" mean, and why does it not accept 8.0.0?
Preview
Console
Nothing logged yet.Expected console output
a file on this site -> 200 OK
a file that is not there -> 404 not found
a relative name (like a double-clicked page) -> TypeError: Failed to fetch
your own Vite server -> TypeError: Failed to fetch
a file:// address -> TypeError: Failed to fetch