Where the data lives: one value, three bases
The placeholder bucket does not exist, so the request fails like any blocked address. The naive join without a slash is a 404: a typo, not a network problem.
Later the data will live in cloud storage instead of your project folder. Only one line of config changes, but the browser then enforces CORS, caching and size rules you must understand. Keys and secrets never go in frontend code.
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 dataUrl(base, file) so that dataUrl("/data/lumen", "/daily.csv") and dataUrl("/data/lumen/", "daily.csv") both give /data/lumen/daily.csv.
A teammate sees Failed to fetch for the bucket URL but the file opens in a new tab. Name the likely cause and the first place to look.
Explain it without notes
Why does moving the data to a bucket change only one line of code?
What does the browser do when a response has no Access-Control-Allow-Origin header, and what does your code see?
Why must a secret key never appear in frontend code, and what do you use instead?
Preview
Console
Nothing logged yet.Expected console output
local files (the course default) 25 stations loaded
local, base typed without the end slash 25 stations loaded
a public bucket (PLACEHOLDER name) TypeError: Failed to fetch
Naive join: /data/lumenstations.csv
-> 404 Not Found